Automatic Sale Badges

SHOPIFY SNIPPET
Demo product
SALE

1 Overview

Automatically display "SALE" badges on products that have discounted variants. This smart snippet checks all product variants and shows a badge when any variant has a compare_at_price higher than its price, creating urgency and highlighting discounts to boost conversions.

2 Key Features

Variant-Aware

Checks all variants for discounts

Eye-Catching Design

Red badge with white text stands out

Conversion Boost

Creates urgency for discounted items

Mobile Optimized

Perfectly sized for all devices

3 Code Implementation 

{% comment %}
  On Sale Badge Based on Price
  Shows sale badge when product variant is discounted
  Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}

{% assign product_has_discount = false %}
{% for variant in product.variants %}
  {% if variant.compare_at_price > variant.price %}
    {% assign product_has_discount = true %}
  {% endif %}
{% endfor %}

{% if product_has_discount %}
  <div class="sale-badge" style="position: absolute; top: 10px; left: 10px; background: #FF5252; color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; font-weight: bold; z-index: 1;">
    SALE
  </div>
{% endif %}

4 Installation Guide

1

Access Product Template

Go to Online Store → Themes → Edit code → Locate sections/product-template.liquid

2

Find Product Image

Locate the product image container (look for product.media or product.featured_image)

3

Insert Badge Code

Paste the snippet immediately after the product image container (within the same parent element)

4

Set Compare Prices

In your product admin, set compare_at_price for variants to activate badges

5

Customize Appearance

Modify the CSS in the snippet to match your store's design

Pro Tip: Combine with the "Calculate Discount Percentage" snippet to show savings amounts next to the sale badge for even greater impact.

Scroll to Top