How to Create a Custom Shopping Cart Icon on Squarespace 7.1 Using CSS
To make your Squarespace website stand out from the crowd, it's all about the little touches. One way to add a unique touch and elevate the appearance of your navigation is by incorporating a custom cart icon. In this guide, we'll take you step-by-step through the process of adding your own personalized cart icon to your Squarespace site. Plus, we've included a selection of shopping cart icons for you to download and use for free!
In this guide, we'll leverage custom CSS to tweak the appearance of the shopping cart icon on your Squarespace website. By default, this icon blends in with your navigation links, but with a bit of code magic, we can give it a whole new look!
It's important to note that the icon consists of two components: the cart itself and the numerical representation of items in it. The number is treated as a font, granting us flexibility to adjust its color, font type, and size.
As for the cart graphic, it's constructed using an SVG icon, limiting our customization options primarily to color adjustments.
But if you're craving more customization freedom, keep an eye on the tutorial video around the 3:25 mark. There, I'll demonstrate how to swap out the default icon with your very own image!
Below, you'll find the codes shared in the tutorial. They're incredibly versatile, so be sure to watch the video for guidance on tailoring them to suit your website perfectly!
Procedure:
Go to your Design Menu
Select Custom CSS
Paste the code listed below into the Custom CSS window
Select save and refresh your page!
The codes provided in this tutorial offer extensive customization possibilities. You can play around with colors, incorporate custom font sizes or typography styles – the options are endless! This flexibility allows you to craft a shopping cart icon that truly reflects your website's unique identity.
Here are the customized codes you can use:
To change the color of the cart icon:
css:
.header-actions-action--cart .icon {color: #333!important}
To change the color and adjust the font size of the cart number:
css:
.header-actions-action--cart .icon-cart-quantity {color: #333!important; font-size: 15px; background: yellow}
To remove the cart icon and only display the number:
css:
.header .header-actions-action--cart svg {display: none}
To remove the number and only display the cart icon:
css:
.header-actions-action--cart .icon-cart-quantity {display: none}
To replace the cart icon with your own image:
css:
.header .header-actions-action--cart svg {stroke: transparent}
.header-actions-action--cart .icon-cart-quantity {display: none}
.header .header-actions-action--cart {background-image: url(image-url-here); background-size: contain}
To replace the cart icon with your own image while keeping the number:
css:
.header .header-actions-action--cart svg {stroke: transparent}
.header .header-actions-action--cart {background-image: url(image-url-here); background-size: cover; height: 50px}
Remember to replace "image-url-here" with the URL of your custom image.