Shopify Developer Guide – How to display percentage discount in Shopify
In Shopify we have have the ability to display the regular product price and a discounted price (called the compare at price in Shopify). In this tutorial I’ll show you how to use those two fields to display a percentage discount on the product page (or the collection page) automatically.
You’ll need to be comfortable editing liquid files within your Shopify store in order to do this. If you aren’t then you should hire a Shopify expert developer.
This is the code we’ll be using to calculate the percentage discount:
{% capture discount %}
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
{% endcapture %}
And here’s the liquid code we’re using to display the discount (you’ll want to add your own markup here).
{{ discount }}
In the example below you can see how I used it within a collection template to display the discount between regular and sale price automatically:
And then when you also drill down to the product page within the Shopify store.
It’s pretty simple and can be applied to basic products but some more code would need to be written where you have variants with differing prices – there things get a little more complex. This should be enough for many stores though.
Contact us to hire a Shopify expert or Shopify developer.
