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

Store Design

Topic summary

Change the Sale badge to show “xxx% off” in the Refresh theme by editing price.liquid and replacing the translation key (‘products.product.on_sale’) with a computed percentage: (compare_at_price − price) × 100 ÷ compare_at_price.

The initial approach used product.compare_at_price and product.price; it didn’t update correctly for variants.

Fix: use product.selected_or_first_available_variant.compare_at_price and .price so the badge reflects the selected variant’s discount.

Result: the original issue was resolved; multiple users confirmed it works.

For product grids/collection pages, edit card-product.liquid: compute percent from card_product.compare_at_price and card_product.price, round it, and display “Save {{ percent }}%”.

Some users don’t have the on_sale translation key in card-product.liquid, suggesting theme/version differences; apply changes in price.liquid or the equivalent snippet in your version.

Open items: how to implement this in the Dawn theme v9, and ensuring collection page badges show the percentage in all setups.

Key terms: compare_at_price = original/strikethrough price; price = current sale price; translation key labels the sale badge; selected_or_first_available_variant ensures variant-specific pricing. Images/GIFs illustrate behavior; code snippets are central to the solution.

Summarized with AI on January 14. AI used: gpt-5.
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?