How can I make a sale badge a discount tag?

[FelaC]

I changed the "Sale" label next to the price to "Limited Edition".

But what I really wanted was to show the discount amount of the product here.

I have several products with different discount percentages. How can I create a label that shows the correct discount for all of them?

Label Colour Hex Code: #1777f2
Font: Bold
Corner: Rounded, 6px

[Dan-From-Ryviu]

Hi @FelaC 

What theme are you using? Could you share your store URL?

[FelaC]

Sure. https://buythewall.com/products/official-maga-2024-supporters-baseball-cap

It's the Refresh Theme.

[Dan-From-Ryviu]

Go to your Online Store > Themes > in Refresh theme, click "..." > Edit code > open price.liquid file, find this line of code 

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

Replace it with this code and save the file.

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

Relate to change color of this button, you can find it in Theme customize, theme settings 

[FelaC]

I want the label to say "X% OFF". How can I do that?

[Dan-From-Ryviu · Accepted solution]

Update the code 

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

[FelaC]

Thank you. It worked!

[Dan-From-Ryviu]

You are very welcome! 

[Dan-From-Ryviu]

You are very welcome

Regards,

Dan

[neobarv]

Hello Dan, I implemented this but how to a make this apply to all variants with different prices

[GTLOfficial]

Hello @FelaC ,

2) For Label Colour Hex Code: #1777f2
Font: Bold
Corner: Rounded, 6px

Go to online store ---------> themes --------------> actions ------> edit code------->assets------>section-main-product.css
add this code at the bottom of the file.

.product .price .badge, .product .price__container {
background: #1777f2;
height: 28px;
font-weight: bold;
border-radius: 11px;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks