Debut theme: change color of cart quantity circle only

Tinselworm
Explorer
47 0 13

This relates to the Debut theme. When I add something to my cart the quantity of items in the cart appears in a cicle over the top of the cart icon. You can change the colour of this circle under themes > customise > general settings > colors > buttons.

Thing is, this changes ALL the button colors (add to cart, checkout, etc etc). Does anyone know how I can just change the colour of the circle that appears over the top of the cart icon, without affecting button colors elsewhere? I'm sure it must be a simple bit of css but not sure where to begin looking. Can anyone advise?

Thanks!

Replies 5 (5)
Abdus_Subhan
New Member
4 0 0

Please go your theme.scss.liquid file from theme file. And put the blow cote at the bottom 

 

.site-header__cart{

color: color-name;

}

Please email me For FREE advice or projects on shopifylab@gmail.com
Tinselworm
Explorer
47 0 13

Thanks, but this doesn't work. This changes the colour of the cart icon. I don't want to change the colour of the cart icon. I want to change the colour of the circle that sits over the top of the cart icon which displays the number of items in the cart.

Tinselworm
Explorer
47 0 13

I figured it out myself in the end.

Go to Line 3772 

.site-header__cart-count {
  display: block;
  position: absolute;
  top: -1px;
  font-weight: bold;
  background-color: $color-btn-primary;
  color: $color-btn-primary-text;
  border-radius: 9px;
  min-width: 16px;
  height: 16px;

 

and replace $color-btn-primary (line 3777) with whatever colour you want. I couldn't get hex colour codes to work (maybe someone can expand on why?) but I only wanted a generic red so just typed "red" and this worked.

dklebine
New Member
2 0 2

This worked for me, thanks. Also the hex # works if you make sure to put the hashtag# before the code.

JCStart
Tourist
6 0 0

Thanks, this worked for me too.

Any suggestion as to how to auto update the cart count, without having to refresh the page or adding to the cart?