The Squarespace shopping cart page is one of the most asked-about customization targets in the Squarespace community. Forum threads about cart styling regularly attract thousands of views because the default cart design does not match most brand aesthetics. The cart uses a slide-out panel with its own set of deeply nested selectors that are difficult to discover without inspecting the DOM.
This guide maps every important cart selector, shows you how to style each component, and gives you production-ready CSS that you can paste directly into your Custom CSS panel.
Understanding the Cart Structure
Squarespace's cart is a slide-out panel that renders on top of your page content. The outermost container is .cart-container. Inside that, individual cart items live in .cart-row elements. The cart title uses .cart-title, and the subtotal and checkout area lives in .cart-footer.
/* Cart panel background and width */
.cart-container {
background: #fafafa !important;
max-width: 420px !important;
}
/* Cart title */
.cart-title {
font-family: inherit !important;
font-size: 18px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 24px 20px !important;
border-bottom: 1px solid #e5e5e5 !important;
}
/* Individual cart item rows */
.cart-row {
padding: 20px !important;
border-bottom: 1px solid #eee !important;
}
/* Cart item product title */
.cart-row .cart-row-title {
font-size: 14px !important;
font-weight: 500 !important;
color: #1a1a1a !important;
}
/* Cart item price */
.cart-row .cart-row-price {
font-size: 14px !important;
color: #666 !important;
}The cart also injects a dark overlay behind the panel. You can target it with .cart-overlay to change the opacity or color of the backdrop. Setting background: rgba(0,0,0,0.3) on it creates a lighter, more modern feel compared to the default heavy overlay.
Styling the Quantity Selector and Remove Button
The quantity input and remove button are the interactive elements that visitors use most in the cart. By default, they are small and hard to tap on mobile. Making them larger and more visually distinct improves usability.
/* Quantity input field */
.cart-row .cart-row-quantity input {
width: 48px !important;
height: 36px !important;
text-align: center !important;
border: 1px solid #ddd !important;
border-radius: 3px !important;
font-size: 14px !important;
}
/* Remove item button */
.cart-row .cart-row-remove {
color: #999 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: color 0.2s ease;
}
.cart-row .cart-row-remove:hover {
color: #dc2626 !important;
}Changing the remove button hover color to red is a small detail that communicates destructive action. It is a UI pattern visitors expect, and it reduces accidental removals.
The Checkout Button and Cart Footer
The checkout button is arguably the most important element on the entire cart. It drives conversions, and it needs to stand out. The default styling often blends into the cart panel, especially on light-colored themes.
/* Cart footer with subtotal */
.cart-footer {
padding: 20px !important;
border-top: 2px solid #1a1a1a !important;
}
/* Subtotal text */
.cart-footer .cart-subtotal {
font-size: 16px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* Checkout button */
.cart-footer .checkout-button,
.cart-footer .cart-checkout-button {
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
padding: 16px 32px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
width: 100% !important;
transition: background 0.2s ease;
}
.cart-footer .checkout-button:hover,
.cart-footer .cart-checkout-button:hover {
background: #333 !important;
}Making the checkout button full-width with generous padding ensures it dominates the footer area. The uppercase text with wide letter spacing gives it a premium feel that matches high-end e-commerce sites.
Generate Cart Styles Instantly
The cart panel has over a dozen individual components to style, and getting them all to look cohesive takes time. Our Cart Styler generates a complete set of cart CSS from a single color palette. Choose your brand colors, preview the cart in real time, and copy the finished code.
Building an e-commerce site on Squarespace? See our guide to contact form styling and explore our full Squarespace tool suite.
