Changing Product Price Color When it's on Sale

Technical Q&A
1

Hello,

Recently I have been trying to change the price color of products that are on sale. It should be displayed in reddish color when the product adjusted to be on sale. I have knowledge in Liquid and CSS so by basic instructions I can handle that. Can anyone help me to get started?

2

@batulkr Hello, I am happy to help you,

Can you please share your store url or on sale product page URL. By checking you website I will provide you style to put on css file

3

@SagarSukhanandi hey, thanks for replying.

Here is the link to one of those products.

4

@batulkr May be you forget to put link by mistake

5

@SagarSukhanandi oh I am so sorry! I thought I already have put it there..

https://zandalfa.com/products/saf-ask-aromaterapi-karisimi

6

@batulkr Here is the simplest solution

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
s.product-price__sale {
    color: red !important;
}
1 Like
7

@SagarSukhanandi thanks for helping. But I want to make the current sale price red instead of the compared at price.

8

I found the solution by myself. Putting here in case anyone else needs it in the future.

{%- if first_variant.compare_at_price -%}
  		{{ first_variant.price | money }}
		~~{{ first_variant.compare_at_price | money }}~~
  {% else %}
  {{ first_variant.price | money }}
	{%- endif -%}
9

@batulkr Great fix by you but the thing is you should not add inline style. Best practice is to add style on css file only.

Here is the new style

#shopify-section-product-template .product-price{
    color: #b11918!important;
}
s.product-price__sale {
    color: #000000 !important;
}
10

Hey @batulkr what would the code for making product price red but only when on sale (when there is compare at price). I have found some threads about this topic but they make the product price red all the time even when the product is not on sale (there is no compare at price). Thanks in advance :slightly_smiling_face: