Cart quantity button color or cart quantity text color is the same

Store Design
, , ,

Topic summary

Issue: On the cart page, the quantity selector showed white text on a white background, making the number unreadable. The requester wanted to change either the quantity button background or the quantity text color.

  • Initial suggestion added CSS to change a span’s background in the quantity control and offered a cart-only scope via a Liquid condition in theme.liquid. This didn’t affect the correct element and produced unexpected results.

  • Clarification established the target as the quantity input’s text (or its background) specifically on the cart page. Screenshots were used to pinpoint the element.

  • Revised fix: apply CSS targeting the input, e.g., .page-cart .quantity input { color: black; }, and remove the earlier span-based rule. When it didn’t apply, increase priority with !important.

  • The Liquid condition for scoping to the cart page needed a correction to {% if template.name == ‘cart’ %} … {% endif %}. The helper also switched from changing background to explicitly setting text color on the input.

Outcome: After correcting the conditional and using the higher-priority CSS on the input, the quantity text became visible. Resolved; no open questions.

Summarized with AI on February 5. AI used: gpt-5.
1

Can someone please help for changing Cart quantity button color or cart quantity text color :

Dragoniic_0-1667955890917.png
Dragoniic_0-1667955890917.png1873×1047 70.9 KB

My website is www.dragoniic.com

2

This is PageFly - Free Landing Page Builder.

You can add this code into the theme.css, this can help you to change the quantity selector color

.quantity .qty-inner>span {
background: black !important;
}

You can change the color here to match with your requirements

or this code if you want for cart page only/ paste this code in theme.liquid above the 

{% if template.name == 'cart' %}

  {% endif %}

Hope this can help you solve the issue

Best regards,

PageFly

3

Hi Victor,

Thanks for the reply, but now after putting the 2nd code

this is the result :

Dragoniic_0-1667959443320.png
Dragoniic_0-1667959443320.png1488×456 29.5 KB

4

hi @Dragoniic we are talking about this button right?

PageFlyVictor_0-1667959632974.png
PageFlyVictor_0-1667959632974.png2962×764 168 KB

5

Hi Victor,

No sorry if i was not clear earlier, it is this :

Dragoniic_0-1667960061455.png
Dragoniic_0-1667960061455.png1488×456 30.2 KB

Quantity number’s color or that whole quantity button’s background which is white currently and if I can change it to another color as text color is white as well.

6

Thank you for confirmation, please try this code into the css for the first way

.page-cart .quantity input {
color: black;
}

and remove the old one

7

This is what I did, but still no luck :

Dragoniic_0-1667960646137.png
Dragoniic_0-1667960646137.png1113×1015 66 KB

8

can you try this for me, to get a higher priority

.page-cart .quantity input {
color: black !important;
}

or this in theme.liquid

{% if template.name == 'cart' %}

  {% endif %}
9

First code still does nothing :

After Second code, result is like this :

Dragoniic_0-1667962135433.png
Dragoniic_0-1667962135433.png1546×674 50.6 KB

10

my bad the second code should be like this

{% if template.name == 'cart' %}

  {% endif %}

i changed background to color for this one

11

Thanks mate !

It is working now

12

My pleasure :heart: