Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
Can anyone please tell me how to show the actual % off for each product, say 20% OFF or save $, to replace the "sale". I am using dawn. Thank you.
Best Regards,
tara
Solved! Go to the solution
This is an accepted solution.
Hey @Tara123 ,
Please follow the following steps:
1) Go to your online store and select Themes from left panel
2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code
3) Open the file price.liquid (you can search for it)
4) In that file comment the code which currently displays the SALE badge, and instead add code for discount.
Basically find this code
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
And replace it with this (as shown in picture)
{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}
{% comment %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
{% endcomment %}
After you do that you will be able to see something like this on your product page
Thanks
Yash Garg
This is an accepted solution.
Hey @Tara123 ,
For adding %OFF to collections page, you can do this -
1) Open file - card-product.liquid
2) Search for {{- 'products.product.on_sale' | t -}}
3) Replace it with following code
{{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round }}% OFF
{% comment %}
{{- 'products.product.on_sale' | t -}}
{% endcomment %}
So your final code should look like this
You will then see something like this
For changing syling of %OFF badge on product page, you can do this:
1) Open file - component-price.css
2) Add these styles at end of file
3) Experiment with font value (decimals allowed) to get desired effect.
.price--on-sale .price__badge-sale {
font-size: 2rem;
font-weight: bold;
}
Thanks
Yash Garg
This is an accepted solution.
Thanks for sharing this. Having checked for the code again I see two occurrences of {{- 'products.product.on_sale' | t -}} in the file.
I meant changing the first occurrence which is near line 135. In your change you have updated the 2nd occurrence instead. Try updating the first occurrence as I suggested earlier.
This is an accepted solution.
Hey @Tara123
Glad to know it worked this time. Now for the styling:
1) Open the file base.css this time, and find ".badge" selector (without quotes)
2) You will see something similar to this
3) Now this already has font-size property, experiment with value to get desired value
4) For bold, add a new field - "font-weight: bold;" , like I suggested earlier
Thanks
Yash Garg
This is an accepted solution.
Hey @Tara123 ,
Please follow the following steps:
1) Go to your online store and select Themes from left panel
2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code
3) Open the file price.liquid (you can search for it)
4) In that file comment the code which currently displays the SALE badge, and instead add code for discount.
Basically find this code
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
And replace it with this (as shown in picture)
{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}
{% comment %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
{% endcomment %}
After you do that you will be able to see something like this on your product page
Thanks
Yash Garg
Thank you Yash. It works great.
How can I make it a little bigger and in bold? How can this also show on the product image under collection (currently it shows sale)?
This is an accepted solution.
Hey @Tara123 ,
For adding %OFF to collections page, you can do this -
1) Open file - card-product.liquid
2) Search for {{- 'products.product.on_sale' | t -}}
3) Replace it with following code
{{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round }}% OFF
{% comment %}
{{- 'products.product.on_sale' | t -}}
{% endcomment %}
So your final code should look like this
You will then see something like this
For changing syling of %OFF badge on product page, you can do this:
1) Open file - component-price.css
2) Add these styles at end of file
3) Experiment with font value (decimals allowed) to get desired effect.
.price--on-sale .price__badge-sale {
font-size: 2rem;
font-weight: bold;
}
Thanks
Yash Garg
Thanks very much Yash.
% badge styling works perfect. However, no change with collection page. Kindly see below screenshot after code change row 320-323. I want it to look the same way as what we did for product (% OFF, font bigger and in bold) .
Hey @Tara123 ,
Is % OFF visible with the code change I mentioned, or even that is not working.
Thanks
Yash Garg
No, % OFF is invisible, still sale
Can you share the store link ?
This is an accepted solution.
Thanks for sharing this. Having checked for the code again I see two occurrences of {{- 'products.product.on_sale' | t -}} in the file.
I meant changing the first occurrence which is near line 135. In your change you have updated the 2nd occurrence instead. Try updating the first occurrence as I suggested earlier.
It works finally😀 How can make the font bigger and in bold?
This is an accepted solution.
Hey @Tara123
Glad to know it worked this time. Now for the styling:
1) Open the file base.css this time, and find ".badge" selector (without quotes)
2) You will see something similar to this
3) Now this already has font-size property, experiment with value to get desired value
4) For bold, add a new field - "font-weight: bold;" , like I suggested earlier
Thanks
Yash Garg
It worked perfect!😄 Thank you so so much!!
Happy to help 🙂
For the benefit of someone who comes across this in future, I have created a Youtube video and blog post for the same.
Post: https://shopifocus.com/index.php/2024/01/15/how-to-show-discount-off-on-a-product/
Video: https://www.youtube.com/watch?v=cW5bUnQD7qo
how to change the color of the badge? im at base.css and found badge section shown above. how to change it from black to red with hex ?
Thank you for taking your time to explain so well! For me (Dawn theme) it worked only by changing both occurrences of {{- 'products.product.on_sale' | t -}} in the file.
Is there anyway you could do this for the Buy X Get Y automatic discounts?
Can I hire you to put this on my store
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024