How to add color on my quantity indicator dawn theme

Shopify Discussion

Topic summary

A user implemented custom code for a quantity/stock indicator on their Shopify Dawn theme store. The CSS styling works correctly on desktop but fails to apply on mobile devices.

Proposed Solutions:
Two community members suggested similar fixes involving adding CSS code to style in-stock (green) and out-of-stock (red) indicators:

  • One recommended adding code to the base.css file in the assets folder
  • Another suggested using the component-card.css file instead

Both solutions target .card-information with .inventory-stock classes using !important flags.

Current Status:
The issue remains unresolved. The original poster tested at least one suggested solution and confirmed it did not work. Screenshots were provided showing the desktop vs. mobile display discrepancy, and a store preview URL was shared for troubleshooting.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I have added a custom code to display a quantity/stock indicator on my store. The indicator was working fine on desktop, but when I checked on mobile, the css styling that I applied is not working on mobile. Does anyone know what might be the problem with this? See photo for reference:

Store Preview URL: https://1r0c4mtux8ldg2yl-13830324282.shopifypreview.com

IntechCarl_0-1741081341860.png
IntechCarl_0-1741081341860.png1585×830 224 KB

IntechCarl_1-1741081351120.png
IntechCarl_1-1741081351120.png410×840 121 KB

2

Hi @IntechCarl

Please follow the steps below to change the sale badge font size in the Dawn theme:

Step 1: Go to Shopify Admin → Online Store → Theme → Edit code.
Step 2: Go to the assets folder.
Step 3: Insert the following code in the bottom of the base.css file.

.card-information p.inventory-stock.in-stock {
    color: green !important;
}
.card-information p.inventory-stock.out-of-stock {
    color: red !important;
}

Hope this can help you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hi @IntechCarl , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.card-information .inventory-stock.in-stock {
 color: green !important;
}
.card-information .inventory-stock.out-of-stock {
 color: red !important;
}

Screenshot_2.png
Screenshot_2.png374×803 125 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

1 Like
4

Hi @B2Bridge , It’s not working

5

sure