Hide Cart Until Item Added

What You'll Create

A cart icon that only appears in the header after a customer adds an item to their cart. The icon stays hidden when the cart is empty, creating a cleaner header for non-shoppers.

The Problem It Solves

Squarespace always displays the cart icon in the header, even when it's empty. For sites where commerce isn't the primary focus, an empty cart icon can look unnecessary. This technique shows the cart only when it contains items.

Perfect For

Service-first sites with shop, Portfolio sites with merch, Minimal headers, Clean navigation, Hybrid business sites

What Makes This Different

This technique uses a MutationObserver to watch the cart quantity and dynamically hide or show the cart icon based on whether items are present. Smooth fade transition when the cart appears. Works across all pages without needing page-specific code.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Commerce-enabled site, Cart icon in header

• Toolkit Title: Hide Cart until item is added

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support