SALE badge text colour and sale price colour change

Store Design
, , , ,

Topic summary

A user seeks to modify two styling elements in their Shopify store: the text color of “SALE” badges on collection pages and the sale price color.

Solutions Provided:

Multiple developers offered CSS-based fixes:

  • stylesheet.css modification: Add code targeting .price-item--sale and .sale-item classes with color: #000000;
  • theme.liquid insertion: Insert custom CSS in <style> tags above </head> to target badge and price elements
  • base.css update: Modify .price--on-sale .price-item--regular for background color and .product-item__badge--sale for badge styling

All solutions follow similar steps: Access Shopify Admin → Online Store → Theme → Edit code, then add CSS to the appropriate file.

Outcome:

The user confirmed one solution worked successfully, resolving the styling issue.

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

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.

Unfurl_0-1730346546045.png
Unfurl_0-1730346546045.png162×296 32.8 KB

2

@Unfurl can you please share this page link?

3

Hi @Unfurl

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

4

www.unfurlclothing.com.au

5

@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;}

suyash1_0-1730347269883.png
suyash1_0-1730347269883.png1366×768 197 KB

6

@Unfurl ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above

Result:

BSSCommerceB2B_0-1730347329176.png
BSSCommerceB2B_0-1730347329176.png1568×925 263 KB

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

Best Regards :blush:

7

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.

8

thankyou so much that worked!