Shopify: How To Show Percentage Discount Saved

By Cesar Beltran
SHOPIFY: HOW TO SHOW PERCENTAGE DISCOUNT SAVED created by Shopify developers

Ever wanted to show a neat little You saved 25% on your store, without doing it manually?

In this quick tutorial, we’ll show you how to add a percentage discount to your store – and let Shopify’s Liquid code do all the work.

Quick note: The code in this post won’t work with Themes that use JavaScript to load the prices. That’s a bit more in-depth than what’s described here (this includes our Bilingual Theme, which doesn’t work with this code snippet). We’ll try to update this post at some point to be compatible with it. With other themes, though, it should work. Just a heads up. Thanks!

When Would We Want This?

Most Shopify Themes come with built-in “Sale” banners that allow you to showcase when a product is on special or discounted.  To add to this, you might want to say:

was $20.00 $15.00 – You save 25%

Step 1: Find Your Product Template

In your Shopify Admin, go to Themes > Template Editor > product.liquid.  This is probably where your prices are stored.  Do a search for “price”.  Somewhere in the template, you should see a piece of code:

{{ product. price }}

This is where your theme shows the price of the product: in our example above, $15.00.

Step 2: Insert This Code

Boring note first: Make a backup!

Next, insert the following piece of code wherever you want it to appear.  For example, if you want to show the % discount next to the price, place the code next to {{ product. price }}.

This code calculates and displays the percentage off, rounded to the nearest whole number.
E.g. – You save 25%

{% if product.compare_at_price_max > product.price %}You save {{ 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'}}%{% endif %}

What The H*ll Does That Code Do, Exactly?

The code above says:

  • If the product is on special right now ( {% if product.compare_at_price_max > product.price %} )
  • Show the text “You save”, and then
  • A long-winded piece of math, finding the discount ($5) as a percentage of the original price ($20), neatly formatted into a percentage without any decimal points.

Variations

If you want to say something other than “You save”, just change that text in the code snippet.  For example, if you want “Discount: 25%”, just change “you save” to say “Discount:” in the code above.

shopify-show-percentage-discount-300x175

***

Thank you for checking out our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our portfolio. We also have some top blog recommendations for you to check out; More Shopify Design Strategies, 4 Ways to show social proofsShopify incoming sales,   and Social Media.  Keep a lookout for new blog posts.

Do you have any questions? Leave them in the comments below and we will get back to you as soon as possible.

What are the top Shopify stores doing?

Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.

Powered by ConvertKit
Tell others about this post

Comments 40

  1. Hi great tutorial!

    Question: any chance this can be applied to a specific collection instead of a store wide discount?

    Best,
    Liz

    1. Hey Liz,
      Glad you liked it! Hmm… that could be done. Could you point me to a link of a collection you’d like to use? If you can clarify a bit further, I’ll do my best to find a way to do it.

      Should be do-able. You could have an if statement in the code, to say:

      if the collection’s title is “collection-title-here”, then show the discount. i.e., in liquid:

      {% if collection.handle == ‘collection-title-here’ %}
      [CODE FOR SHOWING THE DISCOUNT GOES HERE %}
      {% endif %}

      Hope that helps!
      Tristan.

  2. Hi guys,

    I am having a hard time trying to locate the {{ product.price }}. Is there a different term that might have been used?
    I am trying to basically do what this article is talking about.
    If you could help that would be great.

    The Template I am using is Megatronic.

    Regards,
    Ali

    1. Hi Ali,
      I’m not so familiar with the Megatronic theme… but I’d suggest to try looking under “Snippets” if you don’t see it in product.liquid. There many be something like ‘product-form.liquid’ or similar. Try looking in all the “Snippet” files and doing a ctrl+f for “product.price’. Hope that helps!

  3. Hey guys,

    I added this to my product.liquid file and for my products, the selector was {{ product.price | money }}.

    I added the snip of code your provided and it said the following error on the front end:

    “You save Liquid error: wrong argument type nil (expected Regexp)%”

    Thoughts? My theme might use JS, not positive on that. -ZL

    1. Hi Zach,
      Can you point us to your website and let us know which theme you’re doing? I’ll take a look. If your theme uses JS, that’ll be why it’s not working. Cheers! Tristan.

      1. Ever figure out why JS isn’t allowing to render the Liquid correctly? I’m getting the expected Regexp error as well, on the Megatronic theme.

        1. Hey Josh! It’s not so much that JS won’t render the liquid correctly – it’s just that with themes that use JS, the code needed for that is in a different place. In other words – different themes, different code snippets to switch the pricing – that’s why we can’t really give general guidance here in this article. I’m not so sure about megatronic as I’ve not used that theme much – my apologies!

          If you see a file called “Apps.js” or similar, that could be a good place to start. The other option would be to contact Shopify (since they support that theme) and see if they can point you. Best of luck!

  4. Hi I am having somewhat of the same problem with my site.. I have looked for the {{product.price}} in product.liquid form but all I can see is this

    {{ product.price_min | money }}{% if product.price_min < product.compare_at_price_min %} {{ product.compare_at_price_min | money }}{% endif %}

    Would I enter the code just after this??? Also I am looking to enter a store wide discount… How would I do this please???

          1. Hi Callum,
            I had a look at your site. It is indeed using JavaScript to update prices based on the variant, which is why this solution isn’t working (it’s more complex, and very dependant on the theme).

            What this means is: If I go to your product page and select a different frame size, the price updates. That’s how we know it uses JavaScript.

            This would have to be done custom. It could be done in about 2 hours of development ($120/hr). Feel free to let me know if you’d like to go ahead and we could get it set up for you next week. Other question welcome. Cheers – Tristan.

  5. G’day Tristan,

    Hoping for your help and to get this feature on my site.

    I can find similar to “{{ product.price }}” but not exact.

    Any help on the matter would be greatly appreciated.

    1. Hi Jonathan,

      Could you tell me what you found? I can’t see it without looking inside your theme, and it seems to be custom (I took a quick look). If it looks like product.price or similar, that’s probably the one to try. You can make a backup and test it out.

  6. Thanks for the quick reply Tristan.

    here is what I’ve got. The closest i can get has a ‘%’ next to product.price…..

    {% if product.available %}

    {% else %}

    {% endif %}

    {% if product.compare_at_price > product.price %}

    {{ product.compare_at_price_max | money }}
    {{ product.price | money }} INC GST.

    {% else %}
    {{ product.price | money }} INC GST.
    {% endif %}

  7. ok Tristan i think im getting somewhere.

    This is what shows on the website:

    ‘You save Liquid error: wrong argument type nil (expected Regexp)%’

    1. Hi Jonathan,
      Glad you’re making progress. I can’t really go much deeper than that here on this post. If your Theme uses JavaScript, it might be more complicated than in this post (as I mentioned at the top of the post). If you have a web developer, you could get them involved; otherwise, we could help you set it up in about 2 hours (as a mini-project). Feel free to contact us via our “Contact” page if you’d like to. Alternatively you could play around with it a little and perhaps it’ll come good.. hard to tell without seeing inside your theme. Good luck!

  8. Hello Tristan,

    This works properly with the product.price tag, but what about products with multiple variants? I tried changing all applicable uses of ‘product’ to ‘variant’ but this just displays everything as 0% off. Is there a way to make this work for products with more than one variant?

    Thanks,
    Samantha

    1. Hi Samantha — thanks for reading. Yes, in short, there is a way, but almost every theme is different. You’d probably need to edit the SelectCallback function, which can be quite tricky if you’re involving variants. We’d probably need our Technical Lead to help with this. Which theme are you using?

      1. I actually figured it out. All instances of “product” need to be changed to “variant” as I expected; however, the use of “_max” needs to be dropped entirely for the code to work for variants.

  9. hi! thanks for your kind help, it’s working perfectly but I’m having another kind of problem. When I reload the website, i can see the price, and the x% that’s working perfect, BUT it only appears for 1 second, then this % disappears.
    In this fraction of time, I can see that the % is working ok, but it only lasts for 1 second. Do you know what kind of problem I’m having?
    Thanks again,
    Sebastian

    1. Hi there — try making it “display: block !important;” in the CSS, that may help. Otherwise it might be being hidden by some JavaScript in your theme, best to check with a developer on that 🙂

  10. Hello,
    I cannot seem to find product.price anywhere ! I have the Canopy theme installed.
    I found {{ product. price | money }} in product.liquid, but whne i add the code, nothing seems to work.

    please help!

  11. Hi Tristan. I followed your directions and I was able to show the exact phrase only after clicking the product but the percent discount does not automatically shows on my store’s front page. Any help?

    1. Hi There Jether. I will send your message to our support team, and they will help you figure this out. I am happy that you are following our directions.
      Thank you. Cesar Beltran.

  12. Hi Tristan. I followed your directions and I was able to show the exact phrase only after clicking the product but the percent discount does not automatically shows on my store’s front page. Any help?

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.