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.
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.