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

Store Design
1

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
qIBHNNmV9I.png1315×602 329 KB

Thank you so much for any help.

1 Like
2

Hi @patrickscheper

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

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

Kani_1-1659625661378.png
Kani_1-1659625661378.png1204×353 10.8 KB

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
Kani_2-1659625684397.png901×308 9.23 KB

4 Likes
3

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

4

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 Like
5

Thank you, it helped

6

worked!

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

image.png
image.png1063×676 384 KB

7

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

Thanks in advance

8

Hi everyone, i need same help.

BR

Raul

9

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

2 Likes
10

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

11

I also trying to figure out! any answer?

12

Anyone have that answer?

13

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 }}%
1 Like
14

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?