Trying to change sale color on my theme, but is tied to outlines

Store Design
,

Topic summary

A user working with Shopify’s Pipeline theme faces a design constraint where sales badges, sale prices, and add-to-cart button outlines all share the same color setting (Primary accents). They need to change only the sales badge and sale price to red while keeping the button outline unchanged.

Additional request: Modify the sale badge text from “SAVE 33%” to “33% OFF”.

Solutions provided:

Two community members offered identical CSS code snippets to:

  • Change sale badge and sale price colors to red using !important declarations
  • Update badge text to “33% OFF” using CSS ::after pseudo-element

Both responses recommend adding the custom CSS to the theme’s CSS file (theme.css). The code targets .sale-badge and .product__price--sale classes to override the theme’s default color settings without affecting other elements tied to the Primary accents color.

Status: Solutions provided; awaiting user confirmation of implementation.

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

So I’m using the pipeline theme. Its a bit strange as far a themes go, the colors for add to cart outline, sales badges, and sale price are all tied to one color setting, [Primary accents]
What I need is a way to overwrite to a red color, for both the sales badge, and sale price, without affecting the add to cart outline preferably in a CSS code.

If someone could also provide code to change the Sale badge text so i can just have it say [33% OFF]
Instead of the [. SAVE 33%] , id really appreciate that aswell,
Thank you.

Site: Lancastor.com
Example:

5bc3fcf6-fc62-4840-a861-df7a576a948c.png
5bc3fcf6-fc62-4840-a861-df7a576a948c.png2080×1206 327 KB

2

To change the color of the sales badge and sale price to red without affecting the add-to-cart outline, and to modify the sale badge text, you can add some custom CSS. Here’s what to do:

/* Change sale badge and sale price color to red */
.sale-badge, .product__price--sale {
  color: red !important;
}

/* Change the sale badge text to say 33% OFF */
.sale-badge::after {
  content: "33% OFF" !important;
}

i hope this helps!

3

Hi @Carinjable ,

This is Polo from MS Web Designer.
I would love to assist you with your concern.

Here is the solution:

Please add this code in theme.css at the bottom of this file 

/* Change sale badge and sale price color to red */
.sale-badge, .product__price--sale {
  color: red !important;
}

/* Change the sale badge text to say 33% OFF */
.sale-badge::after {
  content: "33% OFF" !important;
}

If you have any doubt, please let me know.

Regards
Anni