How to use your own image for the cart icon in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes
In this tutorial, we’ll use custom CSS to replace the shopping cart icon in the header of your website with your own image!
The codes from the tutorial are below, and they are SUPER customizable so be sure to watch the tutorial video so you know exactly what you’ll want to change to make it look amazing in your own site!
Here are the steps you’ll need to take:
Navigate to Website and then Website Tools
Select Custom CSS
At the top of the menu, click the Manage Custom Files button.
(the video shows this at the bottom of the custom css panel but it was moved to the top in August 2023)Drag & drop your image file there.
Paste the code listed below into the Custom CSS window
Remove the text image-url-here
Click on the image you uploaded to your custom files to add the link in between the parenthesis in the code where the image-url-here text was
Select save and refresh your page!
Video tutorial
Code Example
Here are the codes from this tutorial. Don’t forget to adjust any number values & colors in bold below to suit your own site style!
Replace cart with your own image:
.header .header-actions-action--cart svg {stroke:transparent!important} .header-actions-action--cart .icon-cart-quantity {display:none} .header .header-actions-action--cart {background-image: url(image-url-here); background-size: contain}
Here are some code to help you customize the cart number:
Cart Number Color:
.header-actions-action--cart .icon-cart-quantity { color: #50bdb8!important}
Cart Number Color & Size:
.header-actions-action--cart .icon-cart-quantity { color: #50bdb8!important; font-size: 2rem}
Remove the number & leave the cart:
.header-actions-action--cart .icon-cart-quantity {display:none}
