SALE badge text colour and sale price colour change

[Unfurl]

hiya, i am trying to change the Sale text colour inside the badge on the collection pages, and also the sale price colour. i have been through the threads but none of the codings are working for me.

[suyash1]

@Unfurl  can you please share this page link?

[Unfurl]

www.unfurlclothing.com.au

[suyash1 · Accepted solution]

@Unfurl - please add this css to the very end of your stylesheet.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> stylesheet.css

.sale-item {color: #000000;}
.price-item--sale {color: #000000;}

[Unfurl]

thankyou so much that worked!

[Dan-From-Ryviu]

Hi @Unfurl 

Could you share your store URL so I can check and give you the code to do that?

[BSSCommerce-B2B]

@Unfurl,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.sale-item.sale-item--icon {
   color: black!important /* Choose the sale badge text color you want */
}
.product-info-inner .price__sale span {
   color: black!important /* Choose the sale price text color you want */
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[WizzCommerce_Co]

Hi @Unfurl , thank you for posting here!

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code

2. Asset->/base.css->paste the below code at the bottom of the file:

.price--on-sale .price-item--regular {
background-color: [the hex code color you want to change];
}
.product-item__badge.product-item__badge--sale {
background-color: [the hex code color you want to change];
}

After adding the custom CSS, click the "Save" button at the top-right corner of the code editor.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.