Change the Background Colour of the Cart Page | Squarespace 7.1

What does this code do?

This code snippet will allow you to change the background colour of the shopping cart page.

Read this First

Squarespace automatically creates a shopping cart page for you using some of your Site Wide Styles.

In Squarespace 7.1, this page is styled according to your default color theme which is set by the template you choose. You can change which color theme is the default using the Squarespace App! If you want the background color to be one of the other colours in your color palette, you do not need to use code. You can change the default color to the color theme of your choice. The search page will then take on the styles of the new default color theme.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Shopping Cart Page -->
<script >
  $(document).ready(function() {
    $("#cart #header").css("background", "grey"); //header background
    $("#cart #page").addClass("white"); //shopping cart page theme
    $("#cart #page").css("background", "white"); //shopping cart page background
    $("#cart #page").css("color", "black"); //shopping cart font colours
  }); 
</script>

You can change white in the .addClass() to match the theme you want the shopping cart page to be.

White Minimal = .white

White Bold = .white-bold

Light Minimal = .light

Light Bold = .light-bold

Dark Minimal = .dark

Dark Bold = .dark-bold

Black Minimal = .black

Black Bold = .black-bold

Accent Dark = .bright

Accent Light = .bright-inverse

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the background colours, theme, and font colour.