Squarespace Shopping Cart Icons Setup Guide
TL;DR:
- Shopping cart icons appear in your site header and can be customized in both Squarespace 7.1 and 7.0
- Toggle the cart icon on/off and change its appearance through the site header editor
- Options depend on your template, with different settings for mobile and desktop
- Hidden icons may still appear after customers add products unless configured otherwise
- Some templates offer advanced styling options for deeper customization
The shopping cart icon sits in your site header by default, whether you're using Squarespace 7.1 or 7.0. Here's how to customize it to match your site's look and feel.
Basic Cart Icon Setup
Start by clicking Edit at the top left of your site preview. Hover over the header area and select Edit Site Header. Choose Add Elements and turn the Cart toggle on to activate the icon.
Once activated, you'll see several styling options:
Icon Style: Pick from different designs like a cart, basket, or bag. You can adjust the size through the settings after selecting your preferred icon.
Text Style: Instead of an icon, you can use text up to 10 characters that matches your navigation links.
Customizing Colors and Borders
You can align the icon or text color with your navigation link colors to keep everything consistent. There's also an option to add a border around the icon, with multiple shapes available and either an outline or solid fill.
If you want to show a zero next to the cart icon before any purchases are made, activate the Show "0" in cart toggle. This helps visitors understand the cart is there and functional.
Save your settings by clicking Save, or Exit and then Save when you're finished.
Mobile Display Settings
When you set the cart icon to show text, it displays the current number of items on mobile devices. You'll see a "(0)" initially until items are added to the cart.
The mobile experience can differ from desktop, so check how your cart icon appears on both screen sizes.
Template-Specific Behavior
Not all templates handle the shopping cart icon the same way. Some show it as a permanent feature, while others only display it after someone adds an item to their cart.
Templates like Brine, Skye, and York offer more customization options for both desktop and mobile views, giving you greater control over how the icon appears.
If your shopping cart isn't displaying as expected, check whether Express Checkout or other site-specific settings are affecting its visibility.
Hiding the Cart Icon
To hide the shopping cart icon completely:
- Go to Edit Site Header through the site preview
- Switch the cart toggle off under Add Elements
- Keep in mind the icon may still appear at the bottom of the page when a product is added, unless you configure additional settings
Version Differences
The core functionality remains similar between Squarespace 7.1 and 7.0, but the interface and available options may vary slightly. Most modern sites use 7.1, which offers more flexible design options.
FAQs
Can I have different cart icon styles for mobile and desktop?
Yes, certain templates provide separate style settings for mobile devices, allowing you to optimize the appearance for each screen size.
Why can't I see my shopping cart icon?
This usually depends on your template settings and whether features like Express Checkout are active. Some templates only show the icon after a product is added.
How do I completely remove the shopping cart icon?
While you can hide it through header settings, some templates automatically display it when customers add products. You may need to adjust additional settings or use custom CSS for complete removal.
Can I use custom images for my cart icon?
Standard Squarespace settings don't support custom cart icon images, but you can choose from the available icon styles or use text instead.
Jargon Buster
Template: A pre-designed layout that determines your site's structure and available customization options.
Header: The top section of your website, typically containing your logo, navigation menu, and cart icon.
Toggle: A switch in your settings that turns specific features on or off.
Express Checkout: A Squarespace feature that allows customers to purchase items quickly without going through a traditional cart page.
Wrap-up
Setting up your Squarespace shopping cart icon is straightforward once you know where to find the controls. The key is understanding how your specific template handles cart display and testing your changes on both desktop and mobile devices.
Small details like cart icon styling can improve your site's user experience and potentially increase sales. Take time to get it right and ensure it matches your brand's overall design.
Ready to dive deeper into Squarespace customization? Join Pixelhaze Academy for more detailed tutorials and expert guidance.