I would like to include a 'discount % tag' on my product page

[noosathletics]

I would like to include a 'discount percentual tag' on my product page and also in my featured products page. my current view is: 

 

But I would like to add a 'tag with percentual discount', like this:

 

website is: www.noosathletics.com

password: B2Bridge

Thanks!

[tobebuilds]

Hi Noosathletics,

How did you set your discounts up? Are you using compare at price? Or actual discounts?

Best,

Tobe

[noosathletics]

Hi Tobe,

This has been done with a 'compare at price'.

[Abel_Lesle]

Hi @noosathletics , 

When you use Shopify discounts to configure discounts, it will natively show up on the cart and checkout touchpoints.

But since you're using compare at price and product price and want to show the difference as a percentage. You will need to set this up using liquid like shown below

{% if product.compare_at_price > product.price %}
  {% assign discount_percentage = 100 | minus: product.price | times: 100 | divided_by: product.compare_at_price %}
  <span class="discount-badge">
    -{{ discount_percentage | round }}% OFF
  </span>
{% endif %}

And also in CSS - we can add some default styles 

.discount-badge {
  background-color: #ff3b30; /* Red background */
  color: #fff; /* White text */
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}

Regards