Help Needed: Changing Sale Button to Show Percentage Discount

[abdullah_9]

Hi Shopify partners, team and users, hope you are doing great!

I need help modifying a sale button to display the discount percentage instead of just a “Sale” label. How can I adjust the button so that it dynamically calculates and shows the percentage discount based on the original and discounted prices?

Any guidance or example code would be greatly appreciated.

Thanks in advance!

Best,

Abdullah

[Chtopher]

Hi to you as well and how are you doing??

To provide you an answer to your question;You can modify your Shopify theme’s Liquid code to dynamically display the discount percentage instead of just the “Sale” label. With that the percentage button should display and if you don’t understand I can guide you through, it’s just a simple steps.

I hope this answers your questions

[abdullah_9]

Can you guide me in little bit detail so I can follow that guidelines, like code or something, I’ll be grateful!!

[AlphaSale_Kathy]

Hey @abdullah_9 ,

Before diving into Liquid edits, have you checked your theme settings? Some themes let you customize sale badges without coding. Look for settings under Badges, Product, or Product Grid—they might have an option to switch from “Sale” to a percentage discount.

If there’s nothing like that, then yeah, you’ll need to tweak the Liquid code. Try looking in the Snippets section for files like:

card-product.liquid
price.liquid

Once you find the right file, look for this line:
{{- ‘products.product.on_sale’ | t -}}

And swap it with:
{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round }}% OFF

The tricky part is that every theme structures this differently, so if things don’t match exactly, try searching for compare_at_price in your theme files to track down the right variable.

Also, you might find these Shopify Community threads helpful - they cover similar changes:
https://community.shopify.com/c/shopify-design/change-on-sale-badge-text-to-percentage-discount/m-p/2281374
https://community.shopify.com/c/shopify-design/how-can-i-display-sale-percentage-in-dawn-theme-s-sale-badge/td-p/1660607
https://community.shopify.com/c/shopify-design/show-percent-off-badge-instead-of-sale/m-p/2803984

And if you’re using an app to apply sale prices, their support might be able to help - at Alpha Sale, we do this all the time:)

[abdullah_9]

Hi, AlphaSale_Kathy

I really appreciate your efforts to give me the solution of my problem, but I didn’t found any option in theme settings and the code you provide didn’t work unfortunately as here’s the screenshot:

But on the other hand, I found one website in which the working code is provided and after applying that code, the results were idea as you can see in the screenshot:

But I want to share that codes and website with you as a gift and so you can help others, details are below

Update code in Price.liquid File:

Replace {{ ‘products.product.on_sale’ | t }} with the following code:

-{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF

Then:

Update code in Card-product.liquid File:

Replace {{- ‘products.product.on_sale’ | t -}} with the following code:

-{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF

Then:

Add this Code in Base.css File

.card__badge .badge{

border-radius: 0;

font-size: 13px;

background-color: red;

font-weight: bold;

border: none;

}

.price .price__badge-sale {

border-radius: 0;

font-size: 13px;

background-color: red;

font-weight: bold;

border: none;

margin-top: 0 !important;

margin-bottom: 0 !important;

}

Now, you can see the code for base file which you can customize the 100% button as you want, even those who don’t understand the coding.

The website is: https://websensepro.com

I hope, this information is useful for you and this code will work on all the free themes of Shopify, thanks.

Regards,

Abdullah