How to alter price and sales color on Impulse theme?

Store Design

Topic summary

Users of Shopify’s Impulse theme are seeking to differentiate regular prices from sale prices through color coding—typically wanting regular prices in black and sale prices in red, with strikethrough original prices in grey.

Initial Solution Provided:
A CSS code snippet was shared to add to the theme.scss.liquid file:

  • .grid-product__price { color: #ff0000; }
  • .grid-product__price--original { color: #000; }

Recurring Problem:
Multiple users report this code incorrectly colors ALL prices red, including non-sale items. The desired outcome is:

  • Regular (non-sale) prices: black
  • Original prices (strikethrough): grey
  • Sale prices: red

Refined Solution:
An updated CSS selector was provided:

  • .grid-product__price--original + span + span.money { color: #e23737; }
  • .grid-product__price--original { color: #ccc; } (for grey strikethrough)

Current Status:
The discussion remains ongoing with several users still troubleshooting implementation issues. The helper (KetanKumar) continues requesting site URLs to provide customized solutions, and some users have shared private login details for direct assistance. One user mentions the issue also affects the Flex theme.

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

Hello, my current price and sales price colors are both the same, and I would like to create a distinction between the two. I understand it has to deal with the code, how can I change the current price to black, and sales price to red?

Theme: Impulse

1 Like
2

Hello, @Famby

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

3

Hi thanks for responding. Site: famby.nl

4

Can you please help?

5

@Famby

Thanks for URL.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-product__price {
color: #ff0000;
}
.grid-product__price--original {
color: #000;
}
6

Thanks brother, you helped me a lot!

7

@KetanKumar I am also using the theme Impulse by Archetype and had the same issue we want resolved. I added the code you suggested and it worked but it ended up “also changing” my regular priced items (non-sale items) to be red as well and we want them to remain their original black color.

I don’t want any of my products not on sale to be affected by these code changes.

End goal is to have: Regular non-sale products have price that remains original black color and current sale items have the strike through price in grey with new sale price in red.

Let me know if you have a solution. Thank you in advance for your time, I appreciate any help I can get.

1 Like
8

@KristyC721

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

1 Like
9

Thanks @KetanKumar

My site URL is www.kkgivingtree.com

I’m going to upload 2 images below. One showing my current sale price layout and then the next one showing an example of the layout I want instead. I prefer the strike-through price to be grey and show sale price in red with “now (sale price)”. Let me know if possible, thanks!!

Current Live Sale Price Example
Current Live Sale Price Example644Ă—882 79 KB

This is an example of how i want sale price to look instead
This is an example of how i want sale price to look instead644Ă—882 77.2 KB

1 Like
10

@KristyC721

Thanks for post

can you please share

this page url so i will check and provide proper solution

11

Sure @KetanKumar !

Our “clearance sale” page with that example from the picture I sent is here: https://www.kkgivingtree.com/collections/clearance-sale and the item from the picture will be the 6th item on that page but “all” items on that page are perfect examples.

Also, please note that the example in picture was from the “collection page” layout but the issue also affects the price layout on the individual product pages as well, as shown here: https://www.kkgivingtree.com/collections/clearance-sale/products/merrymaker-top-bloomer-set

12

Hello, @KristyC721

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

1 Like
13

Hello, I have the same issue with the theme Prestige.

In the Product grid, how can I make the Original price and the Sale price with two different colors? (es. Green and Red)

LIKE THIS

€ 400,00 € 200,00

Hope to get some help very soon! thank you

1 Like
14

@valeria_shadi

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

1 Like
15

Hi thank you

https://www.leshadi.com/

16

https://www.leshadi.com/

1 Like
17

@valeria_shadi

Thanks for it

i have to check this but i can’t see this

can you please share particular URL

1 Like
18

Hi Kumar, sure

https://www.leshadi.com/collections/all

Hope it works

Thanks

1 Like
19

@valeria_shadi

Thanks

it can be done some customization code can you please contact PM

20

Hi @KetanKumar , I’m using the impulse theme as well, and having the same issue about the sale price and original price’s colour.

The non-sale prices’ colour will be changed to red at the same time if I used the code you provided up there.

My purpose is: sale products → original price keep black colour, sale price is changed to red colour

non-sale products → no colour change on price, keep black

Could you please provide me any help that can solve this problem. Thank you so much.

1 Like