Jump to content

How do I change the colour of the Number representing Items in Cart ?

Go to solution Solved by joseph81,

Recommended Posts

Hey all,

Hopefully a quick one. I've noticed that when I add items to my cart, the number isn't visible... You can slightly see it when you hover, but I'd like it to be white. Does anyone know how to achieve this? Couldn't see an option for it in the site styles.

I do have some custom hover CSS added, but I don't think it's the problem. It's below incase anyone can see any issues. I also have an image showing the issue, and the password to the website is 'forum' if anyone would like to have a look. Thanks!



.header-actions-action--cart:hover .icon--cart { 

background-color: #755aa1!important ; 
  fill: #fff!important; stroke: #fff!important; opacity:100%!important;





Link to comment
  • Replies 2
  • Views 265
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Without seeing your website, it's hard to tell. But I am guessing if the cart is an SVG, then maybe the text is also an SVG Text tag:

.header-actions-action--cart text {
  fill: white !important;

If it's not an SVG Text tag than maybe it is a span:

.header-actions-action--cart span
  color: #fff !important;


Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.



Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.