How to Change the Cart Page Background Color in Squarespace 7.1

Jun 23

Changing your Cart Page background color in Squarespace 7.1 is one of the easiest ways to create a more immersive shopping experience as well as to make it more visually appealing.

As soon as the visitors add products and go to the checkout, having a different background (than the default one) instantly tells them that they are now on a special action page (the buy zone!)

This engenders user trust and importance.
And it just makes your checkout flow feel like a premium experience, a professional experience.

Squarespace 7.1 doesn't have an option which we can use to change only the cart page background, but it's easy with some custom CSS, clean/easy/safe, and mobile responsive!

Step-by-Step: How to Change the Cart Page Background Color

Step 1: Understand How Squarespace Labels the Cart Page

When a customer goes to the Cart page, Squarespace automatically adds a unique CSS id to the <body> tag:

This cart-page class allows us to target only the cart page using CSS, without affecting the homepage, product pages, or blogs.
This is the secret key that makes everything possible!

Step 2: Add Custom CSS to Target the Cart Page

To apply the background color change, go to:
Pages → Custom code → Custom CSS
And paste this code:


/* Change background color only on the Cart Page */
#cart {
  background-color: #f7f7f7; /* Light gray background — you can change this color */
}

What happens now:

Only when the page has the cart ID, the background color change.
Other pages remain the same.

Step 3: (Optional) Style the Inner Cart Area for Better Design

If you want your Cart contents (the white box) to stand out more, you can style the cart itself separately.

Add this code below the previous one:


/* Optional: Style Cart Content Area */
#cart.Cart {
  background-color: #ffffff; /* White box */
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 50px auto;
}

Now your Cart will look like:

A floating, soft, white "card" in the center
Nice padding around the content
Gentle shadow to create depth

Result:

Very clean, high-end ecommerce checkout feel — just like premium Shopify or WooCommerce stores!

Step 4: Customize Background and Card Colors

You can customize these values easily:

  
      What You Can Change
      Where
    
      Page Background Color
      #cart { background-color: #yourcolor; }
    
      Cart Box Color
      .Cart { background-color: #yourcolor; }
    
      Shadow Size
      Adjust box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    
      Padding
      Adjust padding: 40px; for more or less spacing

This lets you match your brand color palette perfectly.

Quick Recap:

  
      Step
      Action
    
      1
      Squarespace adds the #cart class on the Cart page
    
      2
      Target cart-page in Custom CSS
    
      3
      Change background color
    
      4
      (Optional) Style the Cart content for a floating card design

Clean, lightweight, easy to maintain — no plugins, no third-party scripts needed!

Final Result

After following these steps:

Your Cart Page will have a custom background color, making checkout visually distinct.
Your customers will recognize they are in a special checkout flow.
Your website will look polished, modern, and user-friendly.

Adds a professional and branded feel without needing complex theme edits!

Important Best Practices:

  
      Tip
      Why
    
      Keep background colors soft/light
      So cart text and totals stay readable
    
      Use slight shadows and padding
      Creates a modern card effect, easy on the eyes
    
      Always test on mobile
      Make sure the Cart box still looks good on phones
    
      Match your brand colors
      Keeps the checkout experience cohesive and trustworthy

Frequently Asked Questions (FAQ)

1. Can I change only the Cart Page background in Squarespace without affecting other pages?

Yes. Because you target the #cart ID, which Squarespace adds automatically to the cart page, all your background color changes will apply only to that one page and not to other pages.

2. Where can I stick the CSS to get these changes?

Visit your Squarespace dashboard and go to:

Pages → Custom code → Custom CSS

Paste the supplied CSS there, and it will work sitewide – but just for the cart page, thanks to the specific #cart selector.

3. Will this work on mobile devices, too?

Yes. All that’s included is a mobile-friendly, responsive CSS code that will work on mobile, tablet, and desktop.

4. What if I want a background image instead of a solid color?

You can replace the background color with an image like this:


#cart {
  background: url('https://yoursite.com/path-to-image.jpg') no-repeat center center;
  background-size: cover;
}

Make sure to use a high-resolution image for best results.

5. Can I change the font or button styles inside the cart?

Yes, you can customize any element within the cart using additional CSS. For example, to change button styles:


#cart .sqs-block-button-element {
  background-color: #000;
  color: #fff;
  border-radius: 5px;
}

6. Is this method safe to use with future Squarespace updates?

Yes. This is a non-destructive method using only Custom CSS — it does not require Developer Mode or external plugins, so it’s safe, reversible, and future-friendly.