Change Original Price Color (Keep Sales Price Color)

Store Design
, , ,

Topic summary

A user wants to change the sale price color from black to white on their Shopify store’s featured collection (homepage), while keeping the original/slashed price red.

Initial Solution Attempt:

  • Another user provided CSS code to add to theme.liquid file above the </body> tag
  • This successfully changed the color but created a new problem: white text became invisible against the white background on product pages

Refinement:

  • A conditional solution was offered using {% if template == 'index' %} to target only the homepage featured collection
  • This approach did not resolve the issue—the product page price remained white

Alternative Solution:

  • A third participant suggested adding CSS code to the base.css file instead:
span.price-item.price-item--sale.price-item--last {
  color: #000 !important;
}

Current Status:
The discussion remains unresolved, with the user still seeking a way to apply the white color exclusively to the featured collection without affecting product page pricing display.

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

Hi all,

I would like to change the sale price color from black to white (shown below) but leave the slashed price to red.

I only need the color changes made on the home page within the featured collection (not on other pages)

psimo90_0-1690950564455.png
psimo90_0-1690950564455.png1489×816 186 KB

2

Hey @psimo90

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 tag

Moeed_0-1690951781669.png
Moeed_0-1690951781669.png1033×624 148 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Forgot to mention… My theme is refresh. Should i be using this in base.css?

4

I suggest you to follow the steps I mentioned so in that way you won’t face any issue and the color of your regular price will be changed as well.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

It worked, however because i have a white background on the product page, it also change the price color to white which now can’t be seen.

Is it possible to only change the price color in the featured collection?

psimo90_0-1690952189055.png
psimo90_0-1690952189055.png1247×615 136 KB

6

Hey @psimo90
Remove the previous code and add this new code

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 tag

{% if template == 'index' %}

{% endif %}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Unfortunately it did not change anything. The price is still white on the product page

8

Hello @psimo90

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

span.price-item.price-item--sale.price-item--last {
    color: #000!important;
}