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.
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.
***
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 proofs, Shopify 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.
Hi great tutorial!
Question: any chance this can be applied to a specific collection instead of a store wide discount?
Best,
Liz
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.
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
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!
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
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.
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.
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!
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???
Hi Callum,
Hard to say without seeing your site. What’s your URL and your theme? Yes, try entering it after that, refresh, and see what happens. You can always remove it if it doesn’t work.
For site-wide discounts, I’d recommend the App “Product Discounts” by Bold Apps: https://apps.shopify.com/product-discount
Hi Tristan, my website is ** Could you have a look please I have entered it after the, end%} and nothing has happened…
And the theme is minimal
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.
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.
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.
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 %}
Hey Jonathan,
I think these would be the ones: {{ product.price | money }} INC GST.
ok Tristan i think im getting somewhere.
This is what shows on the website:
‘You save Liquid error: wrong argument type nil (expected Regexp)%’
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!
Ok cheers Tristian. Ill play around with it.
Thanks for all the help
Apply the instruction as provided on the retina theme; it showed the offer price vs original price (strike-off); but it does not show the % discount and the text “You Saved”
Please advise.
Hi Dennis,
I took a look. You’d need to contact the developers of that theme at outofthesandbox.com, they should be able to help. Cheers! Tristan.
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
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?
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.
Glad you worked it out, well done! 🙂
I really like the solution
hello,
it shows %.0. How can I remove the 0?
Hi there, try adding:
| remove: ‘0’
Guideline: https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#remove
Hope that helps!
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
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 🙂
Nice post Tristan! I used to recommend Shopify store owners to name their discount with the pourcentage off (e.g. 25-off) but it’s kinda bad and easy to cheat 🙂
You should have a look at my new app called Automatic Discount, it’s complementary to this post: https://apps.shopify.com/automatic-discount-rules
Thanks Derek, interesting way to do it and minimal coding 🙂 Nice!
It worked for me but it is showing discount percentage before price, how can i place it after discounted price?
Thank you
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!
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?
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.
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?
Perfect thanks
hi
I love it
Could you please tell me how can i use it with the variations?
Your method of explaining the whole thing in this article is in fact good, all be capable of without difficulty
be aware of it, Thanks a lot.
Thanks for a marvelous posting! I actually enjoyed reading it, you happen to be a great author.
I will ensure that I bookmark your blog and will often come back down the road.
I want to encourage you to definitely continue your great job, have a nice morning!