shopifocus.com

Code snippets for adding Sale % Discount Badge on Products

product-thumbnail.liquid

{% if product.compare_at_price and product.compare_at_price > product.price %}
{% assign discount = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="sale-badge product-sale-badge">SALE<br/>{{ discount }}% OFF</div>        
{% endif %}

base.css

.sale-badge {
  background: red;
  position: absolute;
  color: white;
  display:flex;
  justify-content:center;
  align-items: center;
  text-align: center;
  z-index: 1;
  border-radius: 50%;
}

section-main-product.css

.product-sale-badge {
  top: 5%;
  right: 5%;
  width: 8rem;
  height: 8rem;
  /* font-size: 1rem; */
}

card-product.liquid

        {% if card_product.compare_at_price and card_product.compare_at_price > card_product.price %}
        {% assign discount = card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round %}
          <div class="sale-badge grid-sale-badge">SALE<br/>{{ discount }}% OFF</div>        
        {% endif %}

component-card.css

.grid-sale-badge {
  top: 5%;
  right: 5%;
  width: 5rem;
  height: 5rem;
  font-size: 1rem;
}