Guides / How to show the discount percentage on a Shopify product page

How to show the discount percentage on a Shopify product page

Shoppers decide faster when they see 20% off than when they see two prices and have to do the sum. Here is how to show the percentage on your product page.

The short answer

Shopify does not store a discount percentage. It stores two prices: the selling price and the compare-at price (your MRP). The percentage is worked out from those two numbers. Some themes show it for you. If yours does not, you can add a few lines in the theme editor.

Either way, the percentage on the page is only as good as the two prices behind it.

Step 1: set the compare-at price

In your Shopify admin, open Products and pick a product.
In Pricing, enter the selling price in Price.
Enter the MRP in Compare-at price. It must be higher than the price.
Save.

If you are not sure what this field does, our guide on compare-at price in Shopify covers it, including variants.

Step 2: check your theme first

Open Online Store, then Themes, then Customize. Click a product page and look through the settings for the price area. Many themes show a Sale badge, and some can show the amount saved or the percentage saved. Names differ from theme to theme, so look for words like save, savings or discount.

If you find it, switch it on, save, and check a product page on your phone. You are done.

Step 3: add the percentage yourself

If your theme only shows a Sale badge, you can add the percentage with a Custom Liquid block. You do not need to edit any theme files.

First duplicate your theme (Themes, then Actions, then Duplicate) so you have a copy to go back to.
In the theme editor, open a product page template.
In the product information section, choose Add block, then Custom Liquid.
Paste this and save:

{% assign v = product.selected_or_first_available_variant %}{% if v.compare_at_price > v.price %}{% assign off = v.compare_at_price | minus: v.price | times: 100.0 | divided_by: v.compare_at_price | round %}{{ off }}% off{% endif %}

This takes the gap between the MRP and the selling price and shows it as a whole-number percentage. Move the block under the price and style it as you like. If you do not want to touch code, a developer can do this in a few minutes, and many apps do it too.

Check every variant

Each variant has its own price and its own compare-at price. A shirt in three sizes needs the compare-at price filled on all three, or two of them will show no percentage.

The snippet above reads the variant that is selected when the page loads. In some themes, the number will not change when a shopper switches variants unless the theme refreshes that block. Open a product with variants, switch between them on your phone, and watch the number. If it stays stuck, ask your theme developer to update it when the variant changes, or show the percentage only on products with one price.

Rounding

The snippet rounds to a whole number. A product with an MRP of 1,499 and a selling price of 999 shows 33% off. Rounding like this is fine for display. Use "up to" or "over" wording only if it is true for the product.

The percentage on the page and the percentage in your code

This is where store owners get confused. The percentage on the product page comes from the gap between your MRP and your selling price. A discount code or an automatic discount is a separate thing. Shopify takes its percentage from the selling price, and ignores the compare-at price.

Here is a simple example. A product has an MRP of 1,000 and a selling price of 800. The page shows 20% off. You then run a flat 40% code for your WhatsApp list. The code takes 40% from 800, which is 320, and the shopper pays 480. That is 52% off the MRP, far more than the 40% you meant to give.

You can raise every price back to the MRP before a sale and lower them again after, but that is a lot of editing and everyone sees it. Another option is an app that takes the percentage from the compare-at MRP. We make one, Durakart MRP Compare Discount. The code takes 40% from the MRP of 1,000, the shopper pays 600, and the prices on your store do not change. On our own store, a flat 50% off WhatsApp campaign returned 15x on spend. That is one store's result, not a promise for yours. Our guide on MRP vs sale price discounts shows the gap in more detail.

Use a real MRP

Only enter a compare-at price that is a real price your product was or is sold at. A made-up MRP makes the percentage look bigger and misleads shoppers. Check the rules that apply to your product category.

Common mistakes

Compare-at lower than price. No percentage shows, or a negative one.
One variant filled. The other variants show nothing.
Forgetting the end of a sale. The old MRP and percentage stay on the page.
Not checking on a phone. Some themes hide parts of the price area on small screens.
Editing the live theme without a copy. Duplicate it first.

Quick checklist

Fill the price and compare-at price on every variant.
Check your theme settings for a saving or percentage option.
If there is none, add the Custom Liquid block on a duplicated theme.
Test a product with variants on your phone.
Place one test order with your code and read the final price.
Make sure the wording in your ad matches what the shopper pays.

More guides

Run your next sale on the MRP.

Install it, make one code, and check it in your own checkout. The first 7 days are free.

Book a demo Start free