Adding a percentage in the sale banner
Hi there!
I'm looking to update my sale banners on the product thumbnails to show the percentage that customers are saving as opposed to just the word, SALE. Any thoughts on how to accomplish this?
Thanks :)
-
You can follow these steps to show the sale banner as a percentage:
- In the theme code go to the product-thumbnail.liquid snippet. If you’re on the Turbo theme go to the product-details.liquid snippet.
- You’ll need to find this code:
<div class="sale_banner">{{ 'collections.general.sale' | t }}</div>
and update it to be:
{% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
{% if savings > 0 %}
<div class="sale_banner">Save {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</div>
{% endif %}
A couple of things to note:
- This will not work if you have removed the decimals from your product prices.
- If you have a product with variants, with only 1 or some of them on sale, this won’t apply because the thumbnail image represents all variants so the percentage discount would then not be true therefore would not work. In this case, you’re probably better to just leave the ‘SALE’ banner as it is.
-
I think it would, you would just have to make a couple of tweaks!
In Flex, this information looks to be stored in the product-thumbnail__sticker.liquid snippet.
So you would change this code:
{% if product.compare_at_price_max > product.price %}
<div class="sale-sticker thumbnail-sticker sticker-{{i}}">
<span class="sticker-text">{{ 'collections.general.sale' | t }}</span>
</div>
{% endif %}to be this instead:
{% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
{% if savings > 0 %}
<div class="sale-sticker thumbnail-sticker sticker-{{i}}">
<span class="sticker-text">Save {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</span>
</div>
{% endif %}
Please sign in to leave a comment.
Comments
5 comments