Change 'on sale' badge text to percentage discount

Store Design

Topic summary

A Shopify store owner wants to replace the default ‘on sale’ badge text with a dynamic percentage discount that automatically calculates based on each product’s price difference.

Solution Provided:
A community helper (@Dan-From-Ryviu) provides custom Liquid code to calculate and display the discount percentage. The code needs to be added in two locations:

  • card-product.liquid file for collection/list pages
  • price.liquid file for individual product pages

The code calculates the percentage by comparing the original price to the sale price:

{%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
Save {{ percent }}%

Key Issues Addressed:

  • Initial implementation worked on collection pages but not product pages (required updating both files)
  • For products with variants at different prices, the percentage wasn’t updating when selecting new variants (resolved with modified code using variant-specific price variables)
  • One user requested showing the saved amount in currency instead of percentage (alternative code provided)
  • Display formatting issues with decimals (e.g., showing “,00”)

Status: The solution successfully resolved the issue for multiple users, though some troubleshooting continues for specific theme implementations.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

I would like to show a xx% off badge that’s correct on every product.

Screenshot 2023-10-24 092725.png
Screenshot 2023-10-24 092725.png1194×492 361 KB

At the moment I thought entered this text.

Screenshot 2023-10-24 092826.png

website url: https://thesnoozy.com/

Dawn theme

2

@Softtech

So instead of saying £25 Off. I would like for it to say X% Off. So on every product the percentage discount is relevant to the price of the product.

Not all of my products have the same amount discount

3

I mean, I built the store that im showing you now. Is that experience?

4

Hi @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 this code below this

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
Save {{ percent }}%
5

Hi there @Dan-From-Ryviu !

Thanks for the reply. When I go to that folder. this code: {{- ‘products.product.on_sale’ | t -}}

is shown twice in the file.

Do I replace it on both?

6

You can try replace code one by one to check

7

Hi @Dan-From-Ryviu ! It works on the product list page. But when I click on a specific product and go to the product page it turns back to the before badge

8

Hi, please replace the same code in price.liquid file for product page

9

hi @Dan-From-Ryviu , it does give a percentage but no number

10

Do you want to it appear bot % off and number amount discount off?

11

Thanks! This works well on the images of collection pages, but how can I do the same on the product page? I mean, the sales badge that appear on the right of the product price.

12

Please use this code in price.liquid file, find this code

{{ 'products.product.on_sale' | t }}

Replace it with this code

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
Save {{ percent }}%
13

Excellent!!! What would be the code if we just want to add the amount saved (not percentage). Thanks again!

14

Hey Dan, please let me know :slightly_smiling_face:

15

Please use this code

{%- assign percent = product.compare_at_price | minus:product.price -%}
      Save {{ percent | money_with_currency }}
1 Like
16

Hey can you please help me

I’m using dawn theme for my store but when i chose another variant on product page the buy now button gets disappeared please help me to solve this …

my website url is — https://mansaroverfurnishings.com/

17

Excellent great job!!

18

Hey!

In my case it worked but I have different % of discounts for different sizes, and the % showed is always the same, it doesn’t adjust according to the size I select. Any way to fix this?

Thanks a lot!

19

Hi, please use this code instead of

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%
20

Hi @ragazzo-c

Please use this code so it will update the save percent when you change the size.

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%
2 Likes