059: How to Activate Cart Icon in Your Top Navigation in Squarespace

How to Activate Cart Icon in Your Top Navigation in Squarespace

One of the benefits of a Squarespace site is the ease of the shop functionality. You can have your digital or physical products on sale or you can sell your 1 to 1 services, courses (like I do) or coaching sessions.

Now if you want to have a cart icon enabled in your navigation, this blog + video is for you. In this example, I am working with the Rally template but it applies to any template within Brine.


1| Go to Design > Site Styles

Hover over the top navigation and see if the Cart option shows up in the sidebar setting options. You will see under Header: Layout, Cart Position: Hide. Click on the drop down arrow and select the position you want it to show up. In my case, I chose Top Right.

If this option doesn’t show up, that means you need to create a product page with either digital, physical or services items.

Note: If you have a product page but still don’t see the cart option, then you need to disable “Express Checkout” in your Commerce> Check Out options. See how to do this in an upcoming video.

Cart icon in top navigation

2| Go to Header: Cart

Under Header: Cart, you will see the options for customization show up. Choose from Text, Cart, Cart (alternative), Bag (alternative).

3| Choose Colors & Font to match your design

Cart option top navigation squarespace

When you select “Cart”, you can customize these items: font size and style, color of the quantity and color of the quantity text.

Cart alternate top navigation Squarespace

When you select “Cart Alternate”, you can customize these items: color of the cart icon, and the font size + type of the quantity text.


Bag option shop navigation Squarespace

When you select “Bag”, you can change the color of the bag, and the font size + type of the quantity text.

Bag alternate Squarespace shop ecommerce

When you select “Bag alternate”, you can change the color of the bag, and the font size + type of the quantity text.


Cart text option Squarespace shop

When you select “Text”, you can change the font size and type and the color of font as well.

 

Show us what you’ve created!

That’s it, my dear friend! It really is as easy as 1-2-3! I love seeing what you create so hop on down to the comments and show me what you’ve created!

Your Brand New Website!

Are you getting excited to get your own website? I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me and get a free 15 minute video consultation to discuss your website dreams.

Questions about this blog post? You can drop them in the comments below!

~Peace,

Sophia

Sophia Ojha

Web Design Services + ConvertKit Services + Biz Coaching for Web Designers + Weekly Blog & Video Tutorials

I (Sophia Ojha) am web designer and coach to web designers based in the Blue Ridge Mountains of North Carolina. I love to design websites for my clients via my Website-In-A-Day package or my Website-In-Two-Weeks package. I publish a weekly free newsletter called the Abundant Creative which includes blog articles and video tutorials on using Squarespace, ConvertKit and other online tools for online businesses. Also, I love teaching these platforms one-to-one to clients who can hire me for an hour for a quick crash-course on Squarespace or ConvertKit. I am also the founder of Millionaire Web Designer, a 12-month group coaching program that helps web designers build a successful and spacious web design business.

To ask me about any of these, drop me a line via: Contact page.
Receive invites to events and new content: Abundant Creative Newsletter
Find a web designer for your next project: Millionaire Web Designer Directory

www.millionairewebdesigner.com | www.sophiaojha.com

Previous
Previous

060: Why is the Cart Icon Not Showing up in My Top Navigation?

Next
Next

058: How to Create Double Top Navigation Layout in Squarespace