How to Edit the Shopping Cart Page in Squarespace 7.1 (What You Can & Can’t Customize)
A lot of Squarespace users want to customize or redesign the shopping cart page – amend its layout, typography and spacing elements; insert trust-inspiring features. In Squarespace 7.1, the cart is a system-generated page so customizations are done differently than other pages.
This guide covers what’s doable, what’s not, and how to make the cart your own – with a few safe CSS customizations.
What Is the Shopping Cart Page in Squarespace?
In Squarespace 7.1, the cart is:
A system page (not editable like normal pages)
Rendered as a cart drawer or cart page
Globally applied across the site
Controlled mainly by Squarespace’s Commerce engine
You cannot:
Duplicate the cart page
Add blocks inside the cart
Rearrange cart structure
Edit cart HTML directly
But you can customize the cart’s appearance using Custom CSS.
What You Can Edit on the Cart Page
With CSS, you can:
Change fonts and font sizes
Adjust spacing and alignment
Style buttons (Add to Cart, Checkout)
Modify background colors
Hide or show specific cart elements
Improve mobile layout and readability
How to Access Cart Customization
Go to:Website → Pages → Custom Code → Custom CSS and add the following:
All cart-related styling is done from here.
Common Cart Elements & CSS Selectors
Here are the most useful selectors for the Squarespace 7.1 cart:
Hello, World!
| Cart Element | CSS Selector |
|---|---|
| Cart container | .sqs-cart-container |
| Cart item title | .cart-title |
| Cart price | .cart-price |
| Quantity input | .cart-quantity |
| Checkout button | .cart-checkout-button |
(Selectors may vary slightly by template, but these work in most 7.1 sites.)
Step 1: Change Cart Font Size & Spacing
#sqs-cart-container {
font-family: 'Clarkson';
}
.cart-title {
font-size: 18px !important;
font-weight: 600;
margin-bottom: 6px !important;
}
This improves readability and creates a cleaner visual hierarchy.
Step 2: Style the Checkout Button
.cart-checkout-button {
background-color: #000 !important;
color: #fff !important;
border-radius: 6px !important;
padding: 14px 20px !important;
font-size: 16px !important;
}
.cart-checkout-button:hover {
opacity: 0.9;
Background-color:green !important;
}
Perfect for making the primary CTA more prominent.
Step 3: Improve Mobile Cart Layout
@media only screen and (max-width: 767px) {
@media only screen and (max-width: 767px) {
#sqs-cart-container {
padding: 16px !important;
}
.cart-title {
font-size: 16px !important;
}
}
This prevents overcrowding on smaller screens and improves tap usability.
Can You Add Custom Content to the Cart Page?
Directly—no.
But you can:
Add trust badges near the checkout button (via CSS background images)
Add messaging before checkout using announcement bars
Customize the Checkout Page branding separately via Commerce settings
Editing the Checkout Page (Important Distinction)
The Checkout page is different from the Cart page.
You can customize:
Logo
Accent colors
Button styles
Fonts (via Site Styles)Go to:
Commerce → Checkout → Customize
Common Mistakes to Avoid
Trying to edit the cart like a normal page
Injecting heavy JavaScript into the cart
Over-hiding essential elements (like totals or quantity)
Not testing mobile checkout flows
Styling the cart without checking the checkout page consistency
Final Thoughts
On Squarespace 7.1, the Shopping Cart page is not yet completely customizable—but a few smart lines of CSS can help you make this page look pretty and usable without going against your platform’s terms of use (like I have done here).
The trick is knowing what Squarespace allows, and designing within its limitations for the best results.
FAQ : Editing the Shopping Cart Page in Squarespace 7.1
-
No. The cart is a system page and doesn’t support blocks.
-
DescriptioNot structurally. Only visual styling via CSS.n text goes here
-
Only for minor enhancements. Avoid heavy scripts.
-
No. The cart collects items; checkout handles payment and customer info.
-
No. Cart styles apply globally.
Can I style the cart differently per page?
No. Cart styles apply globally.
