Prestige: Change "On Sale" badge to "xx% OFF"

[plejbela]

Theme Prestige

I would like to change the badge "on sale" to "--% Off" - the percentage calculated from the sale price vs original price.
Thank you for your help!

[KetanKumar]

Hello, @plejbela 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[Jasoliya]

Hi @plejbela 

You can find your grid code in Snippet->product-grid file and find sale code where you can change badge to this code:

{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}

 This code will calculate discount of price  

[plejbela]

Thank you for your comment. 

The site has not been published yet. .

I found some specific instructions to do this in other themes. I was wondering if there are any codes that enables Prestige to change the badge?

[plejbela]

Dear @Jasoliya

Thanks for your help.

There seems to be no "product-grid" file (no "product-grid.liquid" file either) in Prestige (in Snippets).

Am I looking in the wrong place?

[Jasoliya]

You can find it on "product-item" file if you have.

[plejbela]

I've tried many variations and this worked for me. 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}

Thanks for the advice!

[Fayzmo]

Hey @plejbela,

I noticed that you wanted to apply discount badges (with % value) on your catalog images.

We have developed an app (Modemagic) that will help you add product stickers/badges on your catalog within seconds. And we have an extensive collection of customized stickers based on different occasions (Sale & Discounts, Pre-Order, Trust Badges and much more) You can also create custom badges based on what copy you prefer.

Over here, you can choose what value of discount you would like in the badge, customizability is available.

No complex edits, no back & forth with designers. Update your store within seconds! And it's free.

Don’t find a sticker that meets your need, reach out to us on chat for a custom design. We also create stickers in various languages. Check out this app on Shopify here.

Hope this helps

Fayaz

[Sara_Kolster]

Hi @plejbela ,

Can I ask you where exactly tou placed this code?  

I am using the prestige theme too, but I'm not quite sure where to put it. Under my snippets - product.item.liquid - I found this code:

{%- if product.available -%}
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ 'product.labels.on_sale' | t }}</span>
{%- endif -%}

Would it be around here?

Thanks!

[plejbela]

Yes, you can try replacing {{ 'product.labels.on_sale' | t }} with {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}} .

Make sure you save your original coding in case something went wrong.

Good luck