How to change on sale text color on Prestige Theme

Store Design
,

Topic summary

Goal: make the “On sale” product label text fully black in the Prestige theme.

What changed:

  • Initial suggestion was to override a subdued text style via CSS targeting the on-sale label modifier. That didn’t take effect.
  • After viewing the store, the effective fix was a broader CSS rule:
    • .ProductItem__Label.ProductItem__Label { color: #000; }
  • Result: the on-sale label text displays in black; the original poster confirmed success.

Follow-up/related issues (unresolved):

  • Another user wants a distinct “New” label style but the class ProductItem__Label–New isn’t present in the theme. They likely need to add that class in the Liquid templates before CSS can target it; more details were requested to proceed.
  • A separate request asks how to change a label’s background; clarification on which element and a store URL were requested.

Notes:

  • CSS controls visual styling (e.g., color, opacity).
  • Liquid is Shopify’s templating language; adding a class in Liquid enables specific CSS targeting.

Status: original on-sale text color issue resolved; new customization requests pending more info.

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

so i know how to change the on sale background but here i wanna change the on sale text color because as you can see its a bit grey-ish and not plain black so its kind of hard to read, how do i change the text to absolutely black?

Untitled.png
Untitled.png335Ă—320 4.84 KB

1 Like
2

@MarloHelmi - the main cause is, that there is the class Text–subdued applied to that label; you should be able to override it by adding this block of CSS - f.ex. to the end of your /assets/theme.(s)css(.liquid) file:

.ProductItem__Label--onSale.ProductItem__Label--onSale {
  color: #000;
  opacity: 1;
}

Hope this helps,
Mario

3

i tried adding this to my theme liquid scc file but still no luck..

4

@MarloHelmi – please share the link to the page where the screenshot came from. Thank you!

Mario

5

www.mispacci.com

6

@MarloHelmi – alright – here you go:

.ProductItem__Label.ProductItem__Label {
  color: #000;
}

Result:

Screenshot 2021-09-14 at 20.21.23.jpg
Screenshot 2021-09-14 at 20.21.23.jpg912Ă—240 6.88 KB

All the best, Mario

7

thank you! you literally saved my money to hire someone for the coding all love !

1 Like
8

@MarloHelmi – no problem – I’m glad I could help.

BTW – I also code for money, but in instances like this, writing the bill takes longer than doing the job. So in case you need help in the future, I’ll be happy if you get in touch again – and maybe then it’ll be a bigger fish to fry ^^

All the best,
Mario

9

Hey R8R, thanks for these advices,

I had a tag thats display a label : eg ProductItem__Label–New
But i dont suceed to change color of it because “the class ProductItem__Label–New does not exist in the theme. You will have to make sure to modify Liquid to add this class if you want to style a label in a different way.”

Can you help me, where in liquid i have to add it please ?
Theme : Prestige
Ex: https://reaverfit.com/products/sac-handy

10

hej @MarloHelmi , would you mind sharing how to change the background? I’ve been trying to do that for weeks!

Thanks you so much :slightly_smiling_face:

11

@Zoubidou75 is that problem still something you need fixed? If so, can you provide me with more details about the current status? Thanks!

12

@anna-soenksen the background of which element would you like to change? Do you mind sharing the URL to your store?

Thanks, Mario