Shoppers love seeing exactly how much they save. A discount banner that auto-calculates the percentage from your compare-at price does the persuasion for you — and it only appears on discounted products, automatically. These 6 Liquid-powered banners drop into a Custom Liquid section with zero apps.

1. Fashion Store – Bold Sale Banner

Hot red banner for apparel sales.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:Arial, sans-serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#dc2626; color:#ffffff; border:2px solid #991b1b;
  border-radius:8px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

2. Electronics Store – Neon Deal Banner

Dark banner with neon green for tech deals.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:'Segoe UI', sans-serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#111827; color:#ffffff; border:2px solid #22ff88;
  border-radius:6px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

3. Clearance – Clearance Banner

High-contrast black/yellow clearance look.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:Verdana, sans-serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#facc15; color:#111111; border:2px solid #111111;
  border-radius:4px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

4. Bundle Offer – Bundle Banner

Purple gradient feel for bundle discounts.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:'Trebuchet MS', sans-serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#7c3aed; color:#ffffff; border:2px solid #4c1d95;
  border-radius:12px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

5. Jewelry Store – Gold Sale Banner

Elegant gold-on-black for fine jewelry.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:Georgia, serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#0a0a0a; color:#f5e6c4; border:2px solid #c9a227;
  border-radius:4px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

6. Flash Sale – Flash Banner

Urgent orange for limited-time flash sales.

Preview

Sample: appears automatically on discounted products (Liquid calculates the %).

Liquid Code

{% if product.compare_at_price > product.price %}
  {% assign pct = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
  <div class="lk-disc" style="font-family:Arial, sans-serif;">
    🔥 <strong>SALE:</strong> Save {{ pct }}% today — <s>{{ product.compare_at_price | money }}</s> <strong>{{ product.price | money }}</strong>
  </div>
{% endif %}
<style>
.lk-disc {
  background:#ea580c; color:#ffffff; border:2px solid #9a3412;
  border-radius:10px; padding:12px 16px; margin:14px 0;
  font-size:15px; text-align:center;
}
.lk-disc s { opacity:.7; }
</style>

How to Add Discount Banner to Shopify

No theme file editing needed. Use Shopify’s Custom Liquid section:

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your live theme (works with Dawn and all OS 2.0 themes).
3. Navigate to your product page template using the top page selector.
4. In the left sidebar, click Add section and choose Custom liquid.
5. Paste the code from any variation above into the Custom liquid box.
6. Drag the section to the right position (under the buy buttons is ideal) and click Save.

Tip: want it on every product automatically? Add the section once to the default product template and it appears store-wide.

Customize the Discount Banner

• The percentage is automatic — just set a compare-at price on the product in Shopify admin.
• Hide it for small discounts: change the {% if %} to {% if pct >= 10 %}.
• Edit the emoji and wording (‘SALE’, ‘Deal of the day’, ‘Price drop’).
• Match the banner colors to your sale campaign theme.

More Shopify Code Sections

• Shopify Product Page Custom Offer Box
• Shopify Product Card Sale Badge
• Shopify Product Card Discount Percentage
• Shopify Countdown Announcement Bar
• Shopify Product Page Stock Counter (Only X Left)
• Shopify Animated Sale Announcement Bar
• Shopify Product Page Trust Badges with Liquid (Code + Guide)
• Shopify Cart Countdown Timer

Conclusion

A discount banner turns your compare-at prices into a visible, exciting saving — automatically. Set your sale prices, pick a banner style, and let Liquid do the math on every product page.

Want this done for you? LayoutKart builds conversion-ready Shopify stores with all these sections pre-installed. Browse our readymade Shopify templates or get a custom store built for your brand.