Change 'on sale' badge text to percentage discount

Store Design
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