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’

 
In Squarespace, Toggle Cart On
 
Select Squarespace cart style and size
 
Select your favorite Squarespace cart icon
 
 
 

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 👇


 
 
 

This page contains affiliate links

 
 

My Insta

@jenxwebdesign

 

Like this post?

Pin It to Pinterest 👇

How to Customize the Shopping Cart Colors and Quantity in Squarespace
Jennifer Barden

This article was written by Jennifer Barden, founder of Jen-X Website Design and Strategy.

Many Squarespacers feel defeated when their websites don’t attract and engage visitors.

In my blog, I share my secrets for effective Squarespace website design and strategy so that DIYers and Squarespace Website Designers can learn tips for building Squarespace websites that attract and engage the right visitors.

https://jenxwebdesign.com
Previous
Previous

5 Key Elements to Increase Engagement in Every Blog Post

Next
Next

Align Business Goals and Blog Content for Strategic Success