How to Customize the Shopping Cart Colors and Quantity in Squarespace

Customize the Shopping Cart Colors and Quantity in Squarespace

The color and size of the shopping cart icon and quantity in Squarespace is determined when you select the font size and color theme in the design panel.

But what if you want your shopping cart icon and quantity to stand out? Maybe you’d like it to be a different color. Or two colors. Or bigger.

In this tutorial, I’m going to show you how to customize the shopping cart color(s) and quantity size and color using a bit of custom CSS.

Choose Your Shopping Cart Icon

First thing you'll do is choose your shopping cart icon.

1. Go into edit > Edit site header>Add elements and make sure ‘Cart’ is toggled on

2. Come on over to your cart and edit the cart

3. Select ‘Style’ and choose your favorite shopping cart or shopping bag or shopping basket—whatever you like

4. Adjust the size until you get it how you like it (up to 40px)

5. You’ll notice that the quantity size does not change

6. Select ‘Save’

How to Customize the Shopping Cart Icon and Quantity

Now you need to go into your custom CSS panel.

1. Select pages > Website tools > Custom CSS

2. Copy and paste the code below (scroll down) into custom CSS

3. Add your hex code to the ‘stroke’ (the outline) to match your brand

4. If your icon has a ‘fill’, add your hex code to the ‘fill’ to match your brand—sometimes it looks nice if it’s different from the stroke color

5. Add your hex code to the quantity to match your brand

6. Adjust the size of the quantity ‘font-size’ to your desired size

7. Select ‘Save’

*If your icon doesn’t have a ‘fill,’ you can delete .header-actions-action--cart .icon { fill: #000!important}

I hope that makes sense.

Code Snippet

/* Customize shopping cart and quantity*/

.header-actions-action--cart .icon {stroke: #000!important}

.header-actions-action--cart .icon {fill: #000!important}

.header-actions-action--cart .icon-cart-quantity { 
  color: #000!important;
  font-size:30px}

Was this helpful?

Are you going to try this on your store’s website? Your client’s website? Got any other burning questions? Drop your comments below 👇

---

If you liked this post, you’ll LOVE these:​​

• How to Add a Second Button to Navigation in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

• How to Add a Search Bar Above Navigation in Squarespace 7.1

• How to Add a Background Image to the Header in Squarespace

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇