Shopify themes, liquid, logos, and UX
Hi there,
I'd like to change the "sale" badge to "xxx% off". The percentage should be calculated from the price and compared price with the Refresh Theme.
My shop site is: https://roverrats.com/products/small-platform-lava-ledge-for-mice-hamsters-rats-and-more
Thank you so much for any help.
Solved! Go to the solution
This is an accepted solution.
I fixed the issue by changing the code from:
{% comment %}
{{ 'products.product.on_sale' | t }}
{% endcomment %}
{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% off
to:
{% comment %}
{{ 'products.product.on_sale' | t }}
{% endcomment %}
{{product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100 | divided_by: product.selected_or_first_available_variant.compare_at_price }}% off
1: Online store > themes > Actions > Edit code > Snippets > price.liquid
2: find code ' {{ 'products.product.on_sale' | t }} '
3: replace code
before
{{ 'products.product.on_sale' | t }}
after
{% comment %}
{{ 'products.product.on_sale' | t }}
{% endcomment %}
{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% off
Hey,
Thanks for helping out! Though this solves the problem for showing the percentage, the issue is that it doesn't take into account the variations (see GIF below). Do you know how to take into account this? Thank you!
This is an accepted solution.
I fixed the issue by changing the code from:
{% comment %}
{{ 'products.product.on_sale' | t }}
{% endcomment %}
{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% off
to:
{% comment %}
{{ 'products.product.on_sale' | t }}
{% endcomment %}
{{product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100 | divided_by: product.selected_or_first_available_variant.compare_at_price }}% off
How do we reflect this on collections page sales badges as well?
I'm trying to figure out this as well. Any one got an idea?
I also trying to figure out! any answer?
Thank you, it helped
Hi, please do you know how to do the same thing with the dawn them version 9?
Thanks in advance
worked!
I also want to change it on the product grid section on the shop page. How can I do this?
Hi everyone, i need same help.
BR
Raul
Anyone have that answer?
Please go to your Online store > Theme > Edit code > card-product.liquid file, find this line of code:
{{- 'products.product.on_sale' | t -}}
Replace with:
{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
Save {{ percent }}%
Hey,
i wanted to implement your code but my card-product.liquid file doesnt have a the {{- 'products.product.on_sale' | t -}}. It has it only in price.liquid. Is there another way or do i need the newest version?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025