Changing Product Price Color When it's on Sale

Solved
batulkr
Excursionist
33 1 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?

0 Likes
SagarSukhanandi
Trailblazer
156 27 43

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
batulkr
Excursionist
33 1 1

@SagarSukhanandi hey, thanks for replying.

Here is the link to one of those products.

0 Likes
SagarSukhanandi
Trailblazer
156 27 43

@batulkr May be you forget to put link by mistake

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
batulkr
Excursionist
33 1 1

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

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

0 Likes
SagarSukhanandi
Trailblazer
156 27 43

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
batulkr
Excursionist
33 1 1

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

0 Likes
batulkr
Excursionist
33 1 1

This is an accepted solution.

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

 

	{%- if first_variant.compare_at_price -%}
  		<span style="color: red;" data-product-price>{{ first_variant.price | money }}</span>
		<s class="product-price__sale" data-compare-price>{{ first_variant.compare_at_price | money }}</s>
  {% else %}
  <span data-product-price>{{ first_variant.price | money }}</span>
	{%- endif -%}
0 Likes
SagarSukhanandi
Trailblazer
156 27 43

@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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
NikolaKopanic
Excursionist
26 0 0

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

0 Likes