Custom Cart Icon | Squarespace 7.1

What does this code do?

This code snippet will allow you to use a custom cart icon in the header and in the floating shopping cart button.

Note: In Squarespace 7.0, some templates will allow you to choose between several different cart icons in Design > Site Styles.

Prepare Your Image

The first step is to prepare the image you would like to use as the cart icon. This works best if the image is square with a transparent background.

Upload this file to Design > Custom CSS > Manage Custom Files.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Cart Icon in the Header */
.icon--cart{
  g {
   display: none;
  }

  background-image: url(IMAGEURL);
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

Then delete the word IMAGEURL. Place your cursor between the brackets and click on the image you uploaded to Manage Custom Files. This will insert the image’s url in between the brackets.

How To Use It

1. Prepare your custom image and upload it to Manage Custom Files

2. Copy and paste the code as indicated above.

3. Delete the word IMAGEURL. Place your cursor between the brackets and click on the image you uploaded to Manage Custom Files.