.png?table=block&id=219105a2-9d95-8155-a86a-cd76031e8283&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Squarespace
squarespace customization
user experience enhancement
Tags Synced
Tags Synced
AI summary
Customize your Squarespace shopping cart icon by adjusting styles like color and size, troubleshooting visibility issues, and hiding the icon if needed. Ensure a smooth user experience by matching the icon with your website design and template settings.
Last edited by
Platform
Category
Topic
Customise Your Squarespace Shopping Cart Icon
Learn how to customise the cart icon in Squarespace for a better user experience.
TL;DR: Key Points
- Customise the shopping cart icon in Squarespace for both desktop and mobile
- Adjust icon styles like colour, size, and whether it shows a zero
- Advanced customisation is available in certain template families
- Troubleshoot visibility issues with cart icons in Squarespace
- Hide the shopping cart icon based on the version and template
Default Cart Icon Styles and Basic Adjustments
Squarespace gives you several options for customising the shopping cart icon across different site versions and templates. This helps match the icon with your overall website design.
In Version 7.1 and 7.0, the shopping cart icon sits in your site's header and displays by default. You can add a cart icon by editing the site header and switching the Cart option on.
Your customisation options include choosing between an icon (like a cart, basket, or bag) or text (up to 10 characters), the icon colour, border adjustments, and whether to show a "0" quantity before any item gets added.
Steps to Style the Icon
- Click 'Edit' in the top-left of your site preview
- Hover over the header and select 'Edit Site Header'
- Go to 'Add Elements' and toggle the Cart option on
- Customise the icon through the pencil icon and select 'Style'
- Choose between an icon or text, modify colours, outline, and thickness
- Save your changes by exiting the editor
Mobile Display Customisation
Here's something worth knowing: when the cart icon is in text mode, it shows the quantity in mobile views by default. If you've set it to display "0", this will automatically appear as "(0)".
Additional Styling Based on Template Family
Various template families like Brine, Farro, Tremont, and York offer expanded styling opportunities. These include separate mobile styles and the ability to hide the cart icon. Check your template-specific settings for more options.
Troubleshooting Icon Visibility
Sometimes the shopping cart icon doesn't appear as expected. This usually happens because of template-specific settings or when Express Checkout is activated. Review your template's documentation and check your settings to fix visibility issues.
How to Hide the Shopping Cart Icon
In both versions 7.1 and 7.0, hiding the cart icon involves editing the site header and toggling the Cart option off.
Pixelhaze Tip:
If you hide the cart icon, make sure your customers can still easily get to checkout. This is especially important if you're using Express Checkout or selling subscription-based products.
FAQs
How can I hide the shopping cart icon in Squarespace?
To hide the cart icon, access your site header settings in Version 7.1 or use specific style tweaks in Version 7.0, depending on your template.
Why is the shopping cart icon not showing up on my Squarespace site?
The icon might be hidden because of template settings or features like Express Checkout. Check your template settings and documentation for guidance.
Can I customise the appearance of the shopping cart icon on mobile devices?
Yes, in certain template families like Brine and York, you can adjust the cart icon's mobile display separately.
Jargon Buster
- Template Family: Different groups of Squarespace templates that share design and functionality traits
- Site Styles: Panels where you can edit and customise different design and layout aspects of your Squarespace site
- Express Checkout: A Squarespace feature that lets customers bypass the cart to checkout directly for faster purchases
Wrap-up
Getting your shopping cart icon right improves both how your site works and how it looks. Understanding how to customise and troubleshoot this feature means you can create a smooth shopping experience for your users. Whether you prefer a subtle icon or a bold, text-based display, Squarespace's design options will cover what you need.