How to display the cart icon once an item is added Squarespace 7.1
If you're using Squarespace 7.1 for your online store, you might have noticed that the cart icon doesn’t always appear until a product is added. While this minimalism is elegant, it can confuse users who don’t realize where to go to check out. Luckily, you can customize this behavior to ensure the cart icon appears only when an item is added, giving your store a cleaner appearance while still being user-friendly.
Table of Contents
Why Show the Cart Icon Only After an Item Is Added?
By default, some Squarespace templates always show the cart icon — even if the cart is empty. This may not be ideal for all brands, especially if you're aiming for a cleaner aesthetic. Conversely, hiding the icon until it's actually needed:
Keeps the header cleaner
Avoids user confusion (if the cart is empty)
Creates a more dynamic and intuitive user experience
Complexity: Easy
Step-by-Step Instructions
Step 1
From your Squarespace account, simply add the following JavaScript below to Pages > Custom Code > Code Injection > Footer and then save your changes.
<script>
/**
* Hide Cart until items in the cart
*/
(function () {
var carts = [].slice.call(document.querySelectorAll('.header-actions-action--cart'));
carts.forEach(function(cart) {
hideCart(cart);
});
/**
* Hide Cart
*/
function hideCart(cart) {
var cartQty = cart.querySelector('.sqs-cart-quantity');
// Handler
function handler(target) {
if (target.innerHTML === '0') {
cart.setAttribute('hidden', '');
} else {
cart.removeAttribute('hidden');
}
}
// Observer handler
var observer = new MutationObserver(function(mutations) {
handler(mutations[0].target);
});
// Hide/show the cart when the page is loaded
handler(cartQty);
// Hide/show the cart when an item was added/removed
observer.observe(cartQty, { childList: true });
}
})();
</script>
Step 2
Item added to cart
Key Takeaways
You can hide the cart icon by default using CSS for a cleaner layout.
JavaScript helps detect when an item is added and triggers the cart icon to appear.
MutationObservers are ideal for tracking changes to dynamic content like cart updates.
Always test on multiple devices and refresh after adding products to verify the functionality.
FAQs
Will this work with all Squarespace 7.1 templates?
Yes, but the class names for the cart icon may vary. Make sure to inspect your site and adjust the selector accordingly.
What if I want to always show the cart icon again later?
Just remove the custom CSS hiding the cart icon and delete the script from your Footer Injection.
Does this affect the mobile view?
This code works site-wide. If your mobile header uses a different cart icon class, you may need to target that as well.
Conclusion
Displaying the cart icon only when an item is added can streamline your site’s appearance while still keeping the shopping experience intuitive. With a little custom code, you can control when and how key elements like the cart appear, giving your Squarespace store a polished and professional touch.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
