Changing Product Price Color When it's on Sale

Solved
batulkr
Excursionist
25 1 0

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
Tourist
100 17 30

@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
25 1 0

@SagarSukhanandi hey, thanks for replying.

Here is the link to one of those products.

0 Likes
SagarSukhanandi
Tourist
100 17 30

@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
25 1 0

@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
Tourist
100 17 30

@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
25 1 0

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

0 Likes
batulkr
Excursionist
25 1 0

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
Tourist
100 17 30

@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