How to Add a Sale Badge to Product Images in Shopify (Without Losing Your Mind)

Want to make your discounted products stand out? Slapping a sale badge on your product pics is like waving a giant “HEY, BUY ME” sign. Here’s how to do it in Shopify, whether you’re a coding newbie or a total pro.

Sale badges (also called discount labels or promotional tags) help highlight products on sale, making them visually stand out to customers. This can:

✅ Increase Click-Through Rates (CTR): Shoppers are more likely to click on discounted items.
✅ Boost Conversions: Buyers feel urgency when they see a Sale label.
✅ Enhance User Experience: Customers can easily spot deals instead of manually comparing prices.
✅ Drive Seasonal & Clearance Sales: Highlighting discounts encourages faster stock movement.

Top eCommerce brands use sale badges to boost sales:

Amazon: Displays red “Limited-Time Deal” and “% Off” labels.
Nike: Uses a simple red “SALE” label to make discounted products stand out.
Zara: Shows a bold red SALE tag on product images, making discounts visually obvious.

How to Add a Sale Badge on Shopify Product Pictures

There are three primary ways to display sale badges in Shopify, based on how much customization you want:

1. Using Shopify’s Built-in Product Labels and Badges

Most Shopify themes automatically display a sale badge when a product has a Compare at price that is higher than the regular price.

🔹 Steps to Enable Shopify’s Built-in Sale Badges

Most modern themes like Dawn, Debut, or Streamline, etc support sale badges out of the box. Whenever you change your product price, the sale badges are automatically added on your product images. Want to adjust their color, follow these steps:

Go to Online Store > Themes > Customize.
Navigate to Product Grid settings and toggle on “Sale badge Color Scheme”.
Another way, head to Theme setting > Badges > Configure the badge’s color as you want

Ease of Implementation: ⏱️ 2 minutes | Difficulty: Beginner

Drawbacks: Can’t adjust the content of sales badges

2. Customizing Shopify Theme with Liquid Code

For themes that don’t have built-in sale badges, you can manually add them with Shopify’s Liquid code.

🔹 Steps to Add a Sale Badge via Liquid Code

1️⃣ Go to Shopify Admin > Online Store > Themes > Edit Code.
2️⃣ Find the product card template. This is usually named:

product-card.liquid
product-grid-item.liquid
card-product.liquid (Varies by theme)
3️⃣ Locate the product price section (search for product.price).
4️⃣ Insert this code inside the product image container:

				
					{% if product.compare_at_price > product.price %}
  <span class="sale-badge">Sale</span>
{% endif %}

5️⃣ Save changes and customize the badge’s appearance with CSS.

🎨 Styling the Sale Badge with CSS

To make the badge stand out, add this CSS to theme.css or base.css:

				
					.sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-transform: uppercase;
}

👉 Customization Options:

Change the background-color for different themes (e.g., #FFD700 for gold).
Adjust position: absolute; to move the badge.
Use border-radius: 5px; for rounded corners.

🔹Add a Custom “Bestseller” Badge in 5 Minutes

For non-sale badges like “Bestseller” or “New Arrival”:

Edit Your Theme Code:
- Go to Online Store > Themes > Actions > Edit Code.
- Open Snippets/product-card.liquid.

Add Liquid Code:

				
					{% if product.tags contains "Bestseller" %}  
  <div class="best-seller-badge">Bestseller 🔥</div>  
{% endif %}

Style with CSS:

				
					.best-seller-badge {  
  position: absolute;  
  top: 10px;  
  left: 10px;  
  background: #4CAF50;  
  color: white;  
  padding: 5px 10px;  
  border-radius: 15px;  
}

💢 Caution: The code snippets provided above are for demonstration purposes. Implementing them requires technical expertise. Always duplicate your theme before adding or editing code to ensure you have a backup in case of issues. Test thoroughly to minimize risks.

3. Using Free Shopify Badge & Icon Apps

If you don’t want to edit code, the easiest way to add sale badges is by using Shopify apps. These apps allow you to quickly apply pre-designed or custom badges to products without touching your theme’s Liquid files.

Best Free Apps for Sale Badges on Shopify

App	Best For	Free Plan	Paid Plan	Key Feature
BSS: Product Labels & Badges	Best overall (customization & conditions)	✅ Yes	$9+	Stackable badges, scheduled labels, advanced targeting
Fordeer: Product Labels & Badges	Best for automation & segmentation	✅ Yes	$4.99+	Auto-applies badges by price, stock, collection, and customer
Wi Flash Sale & Bulk Discount	Best for flash sales & bulk price changes badges	✅ Yes	$7.99+	Recurring sales, countdown timers, and FOMO triggers
Snap Price Design Badge & Icon	Best for custom styling & animations price design	✅ Yes	Free	Unique sale price effects & shake animations

1️⃣ BSS: Product Labels & Badges (Best for Customization & Features)

⭐ Rating: 4.9/5 (1,249+ reviews)
💰 Pricing: Free plan available, Paid plans start at $9/month
🛠️ Best for: Custom product labels, stacking multiple badges, scheduling sale badges

Why Use This App?

BSS Product Labels & Badges allows merchants to add eye-catching badges to products, helping highlight discounts, limited-time deals, or low-stock items. It offers:
✔️ Pre-designed badge library (sale, discount, holiday labels, etc.)
✔️ Customizable badge styles (upload your own design, change colors, text, fonts)
✔️ Flexible conditions: Show badges based on price, stock, sale status, country, or specific time periods
✔️ Works with the latest Shopify themes without additional coding

Free Plan Features:

✅ Use 2 labels/badges for 20 products
✅ 50+ free sample badges
✅ Basic customization (text, colors, positioning)

Unlimited badges per product (PRO plan – $9/month)
📅 Scheduled badges for promotions (ADVANCED plan – $19/month)
🌎 Country-based badge display (PLATINUM plan – $29/month)

Best For: Store owners who want full control over how their sale badges look and function without coding.

2️⃣ Fordeer: Product Labels & Badges (Best for Automated Badge Display)

⭐ Rating: 4.9/5 (302+ reviews)
💰 Pricing: Free plan available, Paid plans start at $4.99/month
🛠️ Best for: Auto-applying badges based on pricing, discounts, inventory, and customer segmentation

Why Use This App?

Fordeer Product Labels & Badges offers automation-driven product badges, helping merchants run multiple sales campaigns effortlessly. Key features include:
✔️ Automated badge display based on discount percentage, stock status, or collection rules
✔️ Show badges on specific pages: Homepage, product pages, collection pages
✔️ Supports metafields to dynamically display sale information
✔️ Different labels for different customer segments (e.g., VIP, first-time buyers)

Free Plan Features:

✅ 2 product labels & 1 price badge
✅ 50+ sample badge designs
✅ Unlimited trust badges (e.g., secure checkout icons)

3️⃣ Wi Flash Sale & Bulk Discount (Best for Flash Sales & Bulk Discounts Badges)

⭐ Rating: 4.6/5 (85+ reviews)
💰 Pricing: Free plan available, Paid plans start at $7.99/month
🛠️ Best for: Running quick flash sales, bulk discounts, and automated price changes

Why Use This App?

Wi Flash Sale & Bulk Discount is perfect for time-sensitive promotions like Black Friday, Cyber Monday, or holiday sales. It allows you to:
✔️ Schedule and automate price discounts (storewide, by product, collection, or tags)
✔️ Apply sale badges automatically when prices change
✔️ Add countdown timers & stock counters to create urgency
✔️ Set recurring sales (daily, weekly, monthly)

Free Plan Features:

✅ Unlimited sale tasks
✅ 50 product variants per active task
✅ Customize discount & badge display

4️⃣ (Bonus) Snap Price Design Badge & Icon (Best for Unique Badge Styles)

⭐ Rating: 5.0/5 (New app)
💰 Pricing: Free
🛠️ Best for: Custom styling of sale prices and price badges

Why Use This App?

Snap Price Design Badge & Icon helps you create visually unique sale badges with drag-and-drop builders. Key features:
✔️ Custom price text formatting (animate, resize, reposition sale prices)
✔️ Dual price display (showing before & after discount)
✔️ Shake animations & attention-grabbing effects
✔️ Works without coding – fully customizable in the Shopify editor

💡 Best For: Stores that want stylized sale price badges to grab attention and increase conversions.

Using a Shopify badge app is the fastest and easiest way to add eye-catching sale labels. Whether you:
✅ Want full customization (BSS),
✅ Need automated badge placement (Fordeer),
✅ Run flash sales (Wi Flash Sale),
✅ Or prefer unique design effects (Snap Price Design),

👉 These apps help highlight promotions, boost sales, and increase conversions effortlessly! 🚀

How Easy Is It to Implement Badges in Shopify?

Method	Difficulty	Time Required	Customization
Built-in Sale Badges	⭐ (Easy)	1-2 minutes	Limited
Liquid Code (Manual)	⭐⭐⭐ (Hard)	10-15 minutes	Full control
Shopify Badge Apps	⭐ (Easiest)	2-5 minutes	Pre-designed badges

Final Thoughts

Adding sale badges is one of the easiest ways to boost sales—no fancy skills needed. Whether you use an app, tweak your theme, or copy-paste some code, you’ll get it done faster than binge-watching a Netflix episode.

✅ Use Shopify’s built-in sale labels,
✅ Customize your theme with Liquid & CSS,
✅ Install a free Shopify badge app,

👉 Adding sale badges is quick, easy, and improves sales performance! 🚀

Sophia

Sophia Dao is a Shopify Conversion Specialist at WizzCommerce, specializing in e-commerce and Shopify solutions. With a passion for digital marketing and a keen eye for detail, Sophia creates engaging content that helps businesses thrive online. When she’s not writing, she enjoys exploring the latest trends in tech and commerce. Follow Sophia for practical e-commerce tips and the latest marketing insights!