How to add a custom shopping cart icon to your Squarespace 7.1 website with CSS

Creating a Squarespace website that doesn’t feel like a Squarespace website is all in the details. Adding a custom cart icon throughout your site will dress up your navigation and create a more custom look and feel. In this tutorial, we’ll walk you through how to add a custom cart icon to your Squarespace website — included is a free download to shopping cart icons for you to use on your website!

STEP 1:
Download our free custom cart icons

FILL OUT THE FORM BELOW TO GET ACCESS TO YOUR FREE DOWNLOAD VIA EMAIL

STEP 2:
Copy/paste CSS

GO TO: DESIGN > CUSTOM CSS > PASTE CODE BELOW

// CUSTOM CART ICON


.icon--cart {   
  svg {     
    display:none;   
  }  

.header .header-actions-action--cart svg {
  stroke:transparent!important
}

.header .header-actions-action--cart {
background-image: url();
background-size: 22px 24px;
background-repeat: no-repeat;
}

STEP 3:
Adjust header settings

IN EDIT MODE, GO TO HEADER SETTINGS AND IMPLEMENT THE FOLLOWING:

STEP 4:
Update css to implement custom icon

FOLLOW THE VIDEO BELOW TO IMPLEMENT CUSTOM CART ICON IN YOUR SQUARESPACE WEBSITE:

More tutorials

PIN THIS TUTORIAL FOR LATER!