How to change product price color on Impulse Theme?

Store Design

Topic summary

A user seeks to change the original (crossed-out) product price to red when displaying alongside a discounted price on the Impulse theme. They successfully modified the collections page but needed help with the product page.

Solution provided:

  • Add CSS code to theme.css file:
    .product__price.on-sale {color: #ff0000;}
  • This targets the sale price element on product pages

Clarification:
The user initially wanted the crossed-out price red (not the sale price). After some back-and-forth, they confirmed the provided code worked and could be customized to separate the original and sale price styling—allowing them to make the original price red and sale price green through theme settings.

Related issues:

  • Another user reports the code only works on product pages, not homepage collections
  • A third user asks for similar customization (red comparison price, black sale price) and is awaiting a solution after sharing their store URL

The original issue appears resolved through CSS customization.

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

Hi guys!

So, i’m trying to change the original product price to red when in comparison to the discounted price. I manage to find how to do that, but only for the collections page:

Collections
Collections782×329 13.8 KB

Now I just need to do the same on the product page!

Product Page
Product Page575×170 8.88 KB

TIA

1 Like
2

@rprioli

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Thanks for the reply @KetanKumar !

https://mybluehome.com.br

1 Like
4

@rprioli

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.product__price.on-sale {color: #ff0000;}
1 Like
5

@KetanKumar

Almost! :slightly_smiling_face:

But it’s the crossed price that needs to be red

picprice.JPG
picprice.JPG329×100 6.13 KB

1 Like
6

@rprioli

do you mean cross price red and normal black right?

1 Like
7

@KetanKumar

For some reason, they linked both original and sale prices. I need to separate those so I can turn the original (crossed price) red and then edit the sale price to green

So I guess if you would be so kind to help me turn the crossed price red, I’d be able to do the rest through the theme settings :slightly_smiling_face:

1 Like
8

@rprioli yes its customization code

1 Like
9

@KetanKumar

Oh, so sorry! your code worked perfectly, I just had to customize it.

Much appreciated for taking the time to help and the quick answers!

1 Like
10

@rprioli

its my pleasure to help us

1 Like
11

@KetanKumar

Hi,
In my case , it only works on product page. but on the home page the collections are black color on both original and price on sale. Please help

12

Hi!

I would like to make the ‘old’ price red and keep the new price Black. What is the code for the comparison price?

Thankss in advance

1 Like
13

@Danny8 yes please share your store url so i will check and let you know proper solution