Re: Change 'on sale' badge text to percentage discount

Change 'on sale' badge text to percentage discount

GeorgeRizos
Pathfinder
132 1 19

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

Screenshot 2023-10-24 092725.png

At the moment I thought entered this text.

Screenshot 2023-10-24 092826.png

website url: https://thesnoozy.com/

 

Dawn theme

Replies 21 (21)
GeorgeRizos
Pathfinder
132 1 19

@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

GeorgeRizos
Pathfinder
132 1 19

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

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

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 }}%

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GeorgeRizos
Pathfinder
132 1 19

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?

Dan-From-Ryviu
Shopify Partner
8435 1660 1675
You can try replace code one by one to check

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GeorgeRizos
Pathfinder
132 1 19

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

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GeorgeRizos
Pathfinder
132 1 19

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

 

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ADT2
New Member
6 0 0

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.

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

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 }}%

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ADT2
New Member
6 0 0

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

ADT2
New Member
6 0 0

Hey Dan, please let me know 🙂 

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

Please use this code 

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123
Explorer
104 1 1

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/

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

Hi, please use this code instead of 

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ADT2
New Member
6 0 0

Excellent great job!!

ragazzo-c
Visitor
2 0 1

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!

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

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 }}%

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ragazzo-c
Visitor
2 0 1

It worked perfectly, thanks a lot @Dan-From-Ryviu!

Dan-From-Ryviu
Shopify Partner
8435 1660 1675

You are very welcome!

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.