Key takeaways
- The “Sale” badge appears automatically when a product has a compare-at price set - no code needed.
- The “Sold Out” badge appears automatically when all variants are out of stock.
- Custom badge text, colors, and additional badge types are controlled in Theme settings or require CSS/code.
- Fudge can add fully custom badge logic - such as “New”, “Best Seller”, or product-specific tags - without manual coding.
Product badges - those small labels on product cards showing “Sale”, “New”, or “Sold Out” - are powerful conversion signals. Here’s how to control them in Shopify.
Why you can trust us
Jacques has 15+ years of Shopify development experience. We built Fudge — an AI storefront editor used by hundreds of Shopify stores, with a 5.0 rating on the Shopify App Store.
How the Sale badge works in Shopify
Shopify shows the “Sale” badge automatically on any product that has a compare-at price set.
To trigger the Sale badge:
Step 1. Go to Shopify Admin → Products → click a product.
Step 2. In the Pricing section, set a Compare-at price higher than the actual price (e.g., compare-at $60, actual price $45).
Step 3. Save.
The product card will now display a Sale badge on your storefront. The badge label and style are controlled by your theme.
How to edit badges on Shopify
Badge appearance - colors, font size, shape - is typically controlled in one of two places:
Theme settings. Go to Online Store → Themes → Customize → Theme settings. Look for a “Badges”, “Product labels”, or “Product cards” section. Some themes expose badge color and style settings here.
Section settings. In your collection page or featured products section, click the section in the Theme Editor and look for badge-related settings in the section settings panel.
If neither location has badge controls, your theme handles badges entirely through CSS. You’ll need to override the styles manually.
How to add product badges in Shopify
Beyond “Sale” and “Sold Out”, adding new badge types - “New”, “Best Seller”, “Limited Edition” - is not a native Shopify feature in most themes.
Method 1 - Product tags. Some themes support tag-based badges. Add a tag like badge:new or label:new to a product in the Products admin, and the theme renders a badge from that tag. Check your theme’s documentation to see if this is supported.
Method 2 - A Shopify app. Apps like Badgify or Product Labels & Badges from the Shopify App Store add flexible badge management with no code required.
Method 3 - Custom code via Fudge. For themes that don’t support tag-based badges natively, Fudge can add this functionality. Tell Fudge:
“Add a ‘New’ badge to products tagged with ‘new-arrival’. Style it in green, placed in the top-left corner of the product card, matching the existing Sale badge style.”
How to change Sale badge text in Shopify
The “Sale” label is usually defined in your theme’s language file, not in the Theme Editor.
Step 1. Go to Online Store → Themes → Actions → Edit languages.
Step 2. Search for “Sale” or “sale” in the search bar.
Step 3. Find the relevant field (often under “Products” or “Labels”) and update the text.
Step 4. Save.
This changes the badge label across all products with a compare-at price.
How to change badge colors with CSS
If your theme doesn’t expose badge colors in Theme settings, override them with custom CSS.
Go to Theme settings → Custom CSS and add:
/* Sale badge */
.badge--sale,
.product-badge--sale {
background-color: #E63946;
color: #FFFFFF;
}
/* Sold out badge */
.badge--sold-out,
.product-badge--sold-out {
background-color: #6B6B6B;
color: #FFFFFF;
}Find the exact class names by right-clicking a badge on your live store → Inspect.
How to show discount percentage in the Sale badge
Some themes display the percentage saving in the Sale badge (e.g., “Save 25%”) rather than just “Sale”. This is a theme-level feature.
Check your Theme settings or section settings for a “Show percentage savings” or “Badge type” option. If it’s not there, it requires editing your theme’s product card Liquid template to calculate and display the percentage.
The calculation in Liquid:
{%- assign savings = product.compare_at_price | minus: product.price -%}
{%- assign savings_percent = savings | times: 100.0 | divided_by: product.compare_at_price | round -%}
Save {{ savings_percent }}%Describe this to Fudge if you want it implemented without writing the code yourself.
Using Fudge for custom badge logic
Complex badge requirements - multiple badge types, tag-driven badges, badges that show only during certain date ranges, or custom badge styles - are a good use case for Fudge:
“Add a ‘New’ badge to products tagged ‘new-arrival’, a ‘Best Seller’ badge to products tagged ‘best-seller’, and show a percentage discount in the Sale badge. Style all badges consistently with our brand colors.”
Fudge implements the Liquid logic and CSS as a draft. Review and approve before anything goes live.
