Change "Sale" Badge To "xxx% off" in Refresh Theme

[patrickscheper]

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.

[Kani]

Hi @patrickscheper 

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

[patrickscheper]

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!

 

[patrickscheper · 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

[lord-ecom]

How do we reflect this on collections page sales badges as well?

[alfredrahman]

I'm trying to figure out this as well. Any one got an idea?

[JassonMarc]

I also trying to figure out! any answer?

[skmeico]

Thank you, it helped

[manurun]

Hi, please do you know how to do the same thing with the dawn them version 9?

Thanks in advance

[varysia]

worked! 

I also want to change it on the product grid section on the shop page. How can I do this? 

[rk315]

Hi everyone, i need same help.

BR

Raul

[JassonMarc]

Anyone have that answer?

[GeorgeRizos]

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 }}%

[DavidStrom]

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?