Most Shopify stores rely on generic “Sale” badges that appear automatically when using compare-at pricing. While this works for basic discounts, it doesn’t allow for specific messaging like “Final Sale,” “Deal of the Day,” or “Limited Time Offer” that can drive higher conversion rates.
Custom badges give you control over the exact messaging, styling, and conditions for when badges appear on your products.
There are two main approaches to implementing custom badges: coding them directly into your theme, or using specialized badge apps. Each method has distinct advantages depending on your technical comfort level and customization needs.
How to Do It with Code
Method 1: Tag-Based Badges
The simplest coding approach uses product tags to trigger specific badge text. This method works well with any discount app since you can manually tag products or set up automation to add tags when discounts are applied.
Step 1: Add the Liquid Code
Find your product template file (usually sections/product-form.liquid, templates/product.liquid, or snippets/product-card.liquid) and add this code where you want badges to appear:
{% if product.tags contains 'final-sale' %}
<span class="custom-badge final-sale">Final Sale</span>
{% elsif product.tags contains 'deal-of-day' %}
<span class="custom-badge deal-of-day">Deal of the Day</span>
{% elsif product.tags contains 'flash-sale' %}
<span class="custom-badge flash-sale">Flash Sale</span>
{% elsif product.tags contains 'clearance' %}
<span class="custom-badge clearance">Clearance</span>
{% endif %}Step 2: Add CSS Styling
Add this CSS to your theme’s stylesheet (usually assets/theme.css or assets/styles.css):
.custom-badge {
display: inline-block;
padding: 8px 12px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: white;
border-radius: 4px;
margin: 5px 0;
}
.final-sale {
background-color: #d32f2f;
}
.deal-of-day {
background-color: #ff6f00;
}
.flash-sale {
background-color: #7b1fa2;
}
.clearance {
background-color: #388e3c;
}Step 3: Tag Your Products
In your Shopify admin, add the appropriate tags to products: final-sale, deal-of-day, flash-sale, or clearance.
Method 2: Automatic Price-Based Badges
This method automatically shows badges when compare-at pricing is detected, with different text based on discount percentage:
{% if product.compare_at_price > product.price %}
{% assign discount_percentage = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round %}
{% if discount_percentage >= 50 %}
<span class="custom-badge mega-sale">{{ discount_percentage }}% OFF - Final Sale</span>
{% elsif discount_percentage >= 25 %}
<span class="custom-badge big-sale">{{ discount_percentage }}% OFF</span>
{% else %}
<span class="custom-badge regular-sale">Sale</span>
{% endif %}
{% endif %}Method 3: Custom Metafields
For maximum flexibility, use metafields to store custom badge text for each product:
Step 1: Create Metafield Definition In Shopify admin, go to Settings > Metafields > Products, and create a new definition:
- Namespace:
custom - Key:
badge_text - Type: Single line text
Step 2: Add Liquid Code
{% if product.metafields.custom.badge_text != blank %}
<span class="custom-badge custom-text">{{ product.metafields.custom.badge_text }}</span>
{% endif %}Step 3: Add Badge Text: Edit any product and add your custom badge text in the metafield section.
How to Do It with Apps
BSS: Product Labels & Badges
- Best for: Comprehensive badge management with scheduling and automation
- Pricing: Free (2 labels, 20 products) to $20/month
- Features: Custom text, animations, scheduling, multiple badge positions
Lably
Best for: Free solution with custom text options
Pricing: Completely free
Features: Custom badge text, basic styling, product/collection targeting
DECO: Product Labels & Badges
- Best for: AI-powered badge creation and advanced customization
- Pricing: Free to $7/month
- Features: AI badge generation, custom text, countdown timers, animations
Flair Product Badges + Labels
Best for: Enterprise stores with complex badge requirements
Pricing: $29-99/month
Features: Advanced automation, variant-specific badges, A/B testing, analytics
FAQs
Can I use both code and apps together? Yes, but test carefully to avoid conflicts. Apps may override your custom CSS, so use different CSS classes if combining methods.
Will custom badges slow down my store? Code-based badges have minimal impact. Apps can add 100-500ms load time depending on features used. Choose lightweight options for better performance.
How do I hide badges when discounts end?
With code: Remove product tags or use date-based conditions.
With apps: Most offer scheduling features to automatically enable/disable badges.
Can I show different badges on product pages vs collection pages?
Yes. Place code in different template files or use apps with position-specific settings.
What if my theme updates and removes my custom code?
Code changes may be lost during theme updates. Save your custom code separately and reapply after updates, or use apps for more update-resistant solutions.
How do I make badges work with my existing discount app?
Set up your discount app to add product tags when applying discounts, then use those same tags in your badge code or app conditions.
Conclusion
Custom badges significantly improve the effectiveness of your promotional messaging compared to generic “Sale” labels. The code method offers unlimited customization and better performance, while apps provide user-friendly interfaces and advanced automation features.
For most store owners, starting with the tag-based code method provides immediate results with minimal technical complexity. As your needs grow, you can either expand your custom code or transition to a specialized badge app that handles the automation while preserving your custom messaging strategy.
The key is ensuring your badge text aligns with your promotional strategy and creates urgency that drives conversions, whether that’s “Final Sale” for clearance items or “Deal of the Day” for time-sensitive offers.
