Debut theme: change color of cart quantity circle only

Highlighted
Excursionist
44 0 7

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!

0 Likes
Highlighted
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
0 Likes
Highlighted
Excursionist
44 0 7

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.

0 Likes
Highlighted
Excursionist
44 0 7

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.

1 Like
Highlighted
New Member
2 0 0

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

0 Likes