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!

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

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.

 
Custom Icon In Squarespace Website
 

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.

Walid Hasan

I'm a Professional Web developer and Certified Squarespace Expert. I have designed 1500+ Squarespace websites in the last 10 years for my clients all over the world with 100% satisfaction. I'm able to develop websites and custom modules with a high level of complexity.

If you need a website for your business, just reach out to me. We'll schedule a call to discuss this further :)

https://www.squareko.com/
Previous
Previous

How To Create A Rotating Hero Banner With Squarespace Auto Layout 

Next
Next

How to add rotating text to your Squarespace 7.0 & 7.1 website