Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

patrickscheper
Tourist
3 1 2

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

 

qIBHNNmV9I.png

 

Thank you so much for any help.

Accepted Solution (1)
patrickscheper
Tourist
3 1 2

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

 

View solution in original post

Replies 13 (13)

Kani
Shopify Partner
468 125 232

Hi @patrickscheper 

1: Online store > themes > Actions > Edit code > Snippets > price.liquid

2:  find code '  {{ 'products.product.on_sale' | t }}  '

Kani_1-1659625661378.png

 

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

 

Kani_2-1659625684397.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
patrickscheper
Tourist
3 1 2

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!

msedge_hiPXUw9xR9.gif

 

 

patrickscheper
Tourist
3 1 2

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

 

lord-ecom
Tourist
6 0 4

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

alfredrahman
Visitor
1 0 0

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

JassonMarc
Visitor
2 0 0

I also trying to figure out! any answer?

skmeico
Tourist
18 0 2

Thank you, it helped

manurun
Excursionist
19 0 4

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

Thanks in advance

varysia
Visitor
1 0 0

worked! 

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

image.png

rk315
Visitor
1 0 0

Hi everyone, i need same help.

 

BR

Raul

JassonMarc
Visitor
2 0 0

Anyone have that answer?

 

GeorgeRizos
Pathfinder
132 1 19

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
Visitor
1 0 0

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?