Key takeaways
- The “Sale” badge appears automatically when you set a compare-at price on a product.
- “New”, “Best Seller”, and custom badges depend on your theme - check Theme Editor settings first.
- Many themes display product tags as badges on collection and product pages.
- For custom-styled badges in specific positions, use Fudge.
Product badges grab attention in collection grids and convert browsers into buyers. A well-placed “Sale” or “Best Seller” badge creates urgency and signals social proof at a glance.
Why you can trust us
We’ve worked on conversion rate optimisation for hundreds of Shopify stores. We also built Fudge — an AI storefront editor with a 5.0 rating on the Shopify App Store.
The “Sale” badge - automatic
Shopify shows a “Sale” badge on any product where the compare-at price is set to a higher value than the current price.
To trigger the Sale badge:
Step 1. Open a product in the admin.
Step 2. In the Pricing section, enter the current (discounted) price in the Price field.
Step 3. Enter the original price in the Compare-at price field.
Step 4. Save.
The badge appears automatically on collection pages and product pages. The exact styling and position are controlled by your theme.
”New”, “Best Seller”, and other theme badges
Some Shopify themes include built-in badge systems that go beyond just “Sale”. Check your theme settings before looking for workarounds.
Step 1. Go to Online Store > Themes > Customize.
Step 2. Click into a product card in a collection view, or navigate to a product page.
Step 3. Look in the block or section settings for badge-related options. Common labels include “Product badges”, “Labels”, or “Stickers”.
Step 4. Some themes let you define which product tag triggers which badge. For example, tag a product “new” and the theme shows a “New” badge on that product’s card.
If your theme supports this, enable it here and apply the relevant tags to products.
Related: Add a Hover Image on Shopify Product Cards.
Related: Add New Badges in Shopify.
Using product tags as badges
Even without dedicated theme badge support, many themes display product tags visually on collection grids.
To add a tag to a product:
Step 1. Open the product in the admin.
Step 2. In the right sidebar, find the Tags field.
Step 3. Add the tag (e.g., “new”, “bestseller”, “limited-edition”).
Step 4. Save.
Whether this tag shows as a visible badge depends entirely on your theme. Check your collection pages after adding a tag to see if anything appears. If it does, you have a simple system for controlling badges from the admin.
Are product badges worth it?
Yes - when used with restraint.
Badges work because:
- They trigger faster decisions on collection grids where buyers are scanning
- “Sale” and “Best Seller” carry genuine social proof signals
- Urgency badges (“Low Stock”, “Selling Fast”) reduce hesitation
Badges stop working when:
- Every product has a badge - they become visual noise
- The badge is not accurate (calling everything “Best Seller” erodes trust)
- The styling clashes with the product image
A useful rule: apply badges to no more than 20-30% of your catalogue at any time.
Related: Change Product Badges in Shopify.
Related: Add Best Seller Badges in Shopify.
Related: Add Trust Badges to Shopify Checkout.
Custom product badges without code
If your theme doesn’t support the badge type you need, or the styling isn’t right, you have two options without touching code yourself:
A Shopify app - several apps add custom badge functionality. Look in the Shopify App Store for “product badges”.
Fudge - describe exactly what you want and Fudge generates the badge as native Liquid code in your theme.
For example: “Add a ‘Vegan’ badge in the top-left corner of product images on collection pages, for any product tagged ‘vegan’. Style it with a green background and white text.”
Fudge drafts the change for your review before anything goes live.
Badge placement options
Common positions for badges on Shopify product pages:
- Top-left of product image - most visible, good for Sale and status badges
- Top-right of product image - alternative position if top-left conflicts with other elements
- Below the product title - works well for trust labels like “Vegan” or “Organic”
- Next to the price - natural placement for sale price context
FAQ
The compare-at price needs to be higher than the current price - if they're equal or compare-at is empty, no badge appears. Also check your theme's Theme Editor settings; some themes have a "Show sale badge" toggle that can be disabled. If it's still missing, your theme may have removed the badge in a customisation.
(compare_at_price - current_price) / compare_at_price, rounded down. So a $100 → $80 product shows "20% off". Some themes round to the nearest 5%; others show the exact percentage. Many themes also have a setting to disable the percentage and just show "Sale".
You can but it's not recommended. Pre-baked sale text in product images doesn't update when prices change, doesn't translate to other markets/currencies, and hurts SEO (Google can't read pricing in images). Use the compare-at price + native badge instead - it's dynamic and consistent.
Not natively in the Theme Editor, but yes with custom Liquid logic. Describe the condition to Fudge ("show this Member-only badge only to customers tagged 'vip'") and it wraps the badge in the right {% if customer.tags contains '…' %} block. Useful for VIP labels, B2B-specific badges, or anything gated by customer attributes.
Indirectly. The text in custom badges (like "Vegan" or "Organic") that's rendered in the page HTML is indexable by Google, which can help with relevant keyword matches. Native Sale and Sold Out badges are not particularly SEO-relevant - they're shopper-facing UI rather than ranking signals.
