Change color of + and - in cart.

[nativesons]

The quantity (+ and -) buttons on our cart are not high enough contrast from the background to be easily seen. How can we change this so that they are more clearly recognizable?

Site Test URL: https://native-sons-roasters-3430.myshopify.com/

Out of the Box Flex theme.

Code at Snippets/ quantity-box.liquid :

{% if settings.qty_box_style == 'stacked' %}
  {% assign icon-plus = 'up-caret' %}
  {% assign icon-minus = 'down-caret' %}
{% else %}
  {% assign icon-plus = 'plus' %}
  {% assign icon-minus = 'minus' %}
{% endif %}

{% if item.quantity %}
  {% assign value = item.quantity %}
{% else %}
  {% assign value = 1 %}
{% endif %}

  

    
      {%
        render 'icon',
        name: icon-minus,
      %}
    
  

  
    
  

  
    
      {%
        render 'icon',
        name: icon-plus,
      %}
    
  

Thank you

[AK_Design_Dev]

Hello @nativesons

.ajax-cart–drawer .quantity-wrapper .icon svg{

fill : red;

}

[nativesons]

@AK_Design_Dev Where should I post this code snippet, if I post it at the end as such:

It does not work.

Thanks!

[AK_Design_Dev]

please put this css in base.css file

[AK_Design_Dev]

this css is for background

.ajax-cart–drawer .quantity-minus.button[disabled]{

background-color: #0000001f;

}

[nativesons]

Ok that worked great! Is there a way to make the + and - icons more bold? Just increase the stroke weight a bit.

[nativesons]

I was attempting to allow the disabled to be one color and the active to be another color and it seems that the disabled stuck, but when it is active it stays the background color.

This is the result. I was able to adjust the plus icon, but it seems that the active minus icon did not stick.

I tried tagging the active as !important but it then disables the disabled tag.