how to display percentage discount in Shopify

<!-- here we're going to add a % discount which is a calculation of the sale and product price -->
<!-- quite simple - capture the value and then display it -->
<!-- see newer version at end -->


<!-- capture the % discount -->

{% capture discount %} 
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}% <!-- percentage maths -->
{% endcapture %}


<!-- display the % discount -->
<p class="discount">{{ discount }}</p>

<!-- now take a break -->
<!-- need help with custom shopify theme development? -->
<!-- email us: hello@liquify.design -->
<!-- visit us www.liquify.design -->




<!-- Updated oct 2017 works with all edge cases-->


{% comment %}
  Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% comment %}
  Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}


{% comment %}
  Check if the product is new.
{% endcomment %}

{% assign is_new = false %}

{% assign found = false %}
{% for c in product.collections %}
  {% if c.handle == "new-in" %}
    {% assign found = true %}
	
		{% assign is_new = true %}
	
  {% endif %}
{% endfor %}



{% comment %}
  capture the discount
{% endcomment %}

{% if on_sale %}
{% capture discount %} 
<span class="percentage_off-">– {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%</span>
{% endcapture %}
{% endif %}





// updated jan 2018
search
{% if item.compare_at_price_max > item.price %}- {{ item.compare_at_price_max | minus:item.price | times:100 | divided_by:item.compare_at_price_max | remove: '.0' }}%{% endif %}

product
<div class="on-sale testing">
    {% if product.compare_at_price_max > product.price %}- {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max | remove: '.0' }}%{% endif %}
    </div>

Hire one of our Shopify developers. Will take a couple of hours to implement.