How to Add a Custom “Sale / Discount” Badge to Shopify Products (Liquid + CSS)

Want to show a custom SALE or -20% OFF badge on products when they are discounted? This tutorial shows you how to add a dynamic badge that updates automatically whenever a product goes on sale.

You can apply this to:

• Collection page product cards
• Featured products
• Search results
• Related / recommended products

This is a simple, safe modification — no apps needed.

---

🔥 What You Will Build

A custom badge that:

• Shows only when the product is on sale
• Can display custom text (SALE)
• Can show discount percentage (e.g., –25%)
• Works across all theme product grids

---

🧩 Step 1 — Find Your Product Card File

Inside Shopify admin:

1. Go to Online Store → Themes → Edit Code
2. Open snippets folder
3. Look for the product card snippet. Names vary by theme:

Common filenames:

• card-product.liquid
• product-card-grid.liquid
• product-card.liquid

Open whichever file your theme uses.

---

🧩 Step 2 — Add the Sale Badge Code

Inside your product card snippet, find the product image wrapper. Add this Liquid block inside the main product card container but above the image:

{% if product.compare_at_price > product.price %}
  

{% endif %}

This checks whether a product has a sale price and displays the badge only if discounted.

---

🧩 Step 3 — (Optional) Add Dynamic Percentage Discount

If you want the badge to show the discount amount, replace the earlier code with this:

{% if product.compare_at_price > product.price %}
  {% assign discount = product.compare_at_price | minus: product.price %}
  {% assign discount_percentage = discount | times: 100 | divided_by: product.compare_at_price %}

  

{% endif %}

This automatically calculates the percentage discount.

---

🎨 Step 4 — Add CSS to Style the Badge

Go to:

• Assets → base.css or theme.css

Add this at the bottom:

.custom-sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e63946;
  color: white;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 10;
  text-transform: uppercase;
}

If your theme uses a media container, you may need:

.product-card,
.card-wrapper,
.card {
  position: relative;
}

This ensures the badge positions correctly on the product image.

---

🧪 Step 5 — Test Your Badge

Go to the store and check:

• A product with a sale price → badge should appear
• A product without a sale price → badge should NOT appear
• Collection page layout → badge should sit at top-left corner

---

🎉 You’re Done!

You now have a custom sale badge that works across your entire theme. It’s lightweight, responsive, and fully automatic.