Blog

Discount Sale Badge in Debutify Theme

Adding a sale badge that displays the discount percentage of the item on your Shopify product pages is a great way to attract customers. Follow these simple steps to implement it in your Debutify theme or any other Shopify theme.

1. Go to your Shopify Admin Dashboard > Edit Code.
2. Open the product-template.liquid File under the Snippets folder

Find the following code inside the product-template.liquid file:

<span class="text-muted text-strike{% unless is_on_sale %} hidden{% endunless %}"
      data-product-price-compare
      aria-label="{{ 'products.general.regular_price' | t }}">
</span>

3. Paste the following Sale Badge code just below the code mentioned above:

{% if product.compare_at_price > product.price %}
  <div class="sale-badge">
    Save {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round }}%
  </div>
{% endif %}

<style> 
.sale-badge {
    background-color: red;
    color: #fff;
    padding: 0px 8px;
    border-radius: 4px;
    font-size: 15px;
    margin-left: 8px;
}
</style>

4: After pasting the code, save the file to display the discount percentage badge on the Shopify product page.

👉 Video Guide for Discount Save Badge