How to make the promo price in red color?

Store Design
, ,

Topic summary

A user wants to change promotional pricing to red on their Shopify store using the Impulse theme.

Initial Solution Provided:

  • Add custom CSS to theme.liquid file above the </body> tag
  • Target span.product__price.on-sale class with red color styling
  • This successfully changed the price color on product pages

Additional Requirements:

  • User also needs red promotional pricing on product grid pages (not just individual product pages)
  • Wants the “Sale” badge to appear in red with bold text

Current Status:

  • The original solution worked for product pages but not grid pages
  • A CSS snippet was provided to style the sale badge (.grid-product__tag--sale), but the user reported it didn’t work
  • A corrected version of the badge CSS was shared to fix a typo

Outstanding Issues:

  • Grid page promotional price color change still needs to be addressed
  • Sale badge styling solution pending confirmation after typo correction
Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Screenshot (583)
Screenshot (583)1920Ă—878 130 KB

How to make the promo price in red color?

1 Like
2

Hey @Jim3

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
span.product__price.on-sale {
    color: red !important;
}
</style>

RESULT:

image
image729Ă—723 37.8 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

In general terms you need to edit your theme code adding some custom CSS to the on-sale price display for your product pages.

More specifically, you will need to track down the specific theme snippet that contains the code for that pricing display and edit it directly. This depends on what theme you are using.

Drop us the name of the theme, and we can point you in the right direction.

Also, if you’re ever looking for an ongoing partner for issues like this we work with merchants all the time to be your go-to wizard for Shopify issues large and small.

That way you can get back to the important work of growing your brand and leave the technical bits to us!

Screenshot 2025-09-15 at 12.43.50 PM
Screenshot 2025-09-15 at 12.43.50 PM1628Ă—799 102 KB

4

It workout. I need to make the promo price red also in the product grid - there it didn’t chaged. Also the Sale badge in the product grid should be red with Bold sale letters please. Can we do that?

Screenshot (585)
Screenshot (585)1920Ă—847 130 KB

5

Sounds intresting. The name of the theme is Impulse

7

Hi, This does not work

8

@Jim3 it looks like there was a typo in the CSS I sent over. Apologies for that. Please swap out the code inside of the <style> tag above with the CSS below:

.grid-product__tag--sale {
    background: red !important;
    font-weight:900 !important;    
}

If your issue persists I’m happy to dig in a little deeper with you. There are a few different locations we can place the CSS.