How to change the sale badge color on all website pages?

Store Design
1

Hello, I’m using the Prestige theme, I have added the following code under theme.css

.template-collection .ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
	background: orange;
	color: white;
}

It works well to change the SALE badge color under the collection page.

But how do I change the SALE badge under the homepage collections and “You may also like” & “Recently viewed” under the product page?

Million thanks!

2

Hi @meatking

Would you mind sharing your store’s URL so we can provide a solution for that? Cheers!

3

If I put this, this will change ALL label under ALL pages

.ProductItem__Label {
	background: orange;
	color: white;
}

What I wanted to do is differentiate the color badge between the SALE badge & SOLD OUT badge under ALL pages.

4

thanks for your quick response.

URL is www.meatking.hk

Thank you so much!

5 
.ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
	background: orange;
	color: white;
}

Sale badge appears under ALL pages after removed .template-collection

But not sure how to change the SOLD OUT badge now :disappointed_face:

6

Add this code for the sold out:

span.ProductItem__Label.ProductItem__Label--soldOut.Heading.Text--subdued {
    background: orange;
    color: white;
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

1 Like
7

MILLION THANKS!! WORKS PERFECTLY!

8

@meatking :wink: Your products sure do look tasty!

9

Hello @meatking
I had a suggestion for you for adding badges & labels to your store. There are apps on the Shopify app store that allow you to do so with ease. You can simply pick the badges/labels with the text that you want. And easily apply these without any development effort at all. It’s a simple 3 step process where you select your image, select the label and then apply the changes. You can use apps like ModeMagic to do the same!

Also, you have the option to add custom text to the badges. Or if you don’t find anything of your preference, you can get a custom design made as well :). Feel free to explore the app with the free trial available.

Thanks