How to Add Custom Badges Based on Product Tags in Shopify

Adding custom badges based on product tags in Shopify usually means editing your theme so it checks for tags like sale, new, or badge_web-exclusive and then outputs a styled label on the product card or product page. In most stores, this takes 10 to 30 minutes if you know where your theme renders product cards.

In my experience building Shopify apps and working with merchants on theme customisation, tag-based badges are one of the quickest visual wins you can make. They help products stand out in collection grids, create urgency, and make merchandising decisions more obvious without changing your catalogue structure.

How do I add custom badges based on product tags in Shopify?

The simplest way is to add tags to products in Shopify admin, then edit your theme's Liquid files to display a badge when a matching tag is present. You will usually need to update one Liquid file and one CSS file.

For most themes, the process looks like this:

1. Add the tag to the product, such as sale, new-arrival, or badge_final-sale.
2. Duplicate your live theme before editing.
3. Open the product card or product template file in Online Store > Themes > Edit code.
4. Insert a Liquid condition that checks product.tags.
5. Add CSS so the badge is positioned and styled correctly.
6. Test on product pages and collection pages.

If you want a broader grounding in how Shopify tags work before you start, I recommend reading What Are Tags Used for in Shopify? How-To, Tips & Tricks. It will save you from messy tag naming later.

Why use product tags for Shopify badges?

Product tags are the fastest no-app trigger for custom badges in Shopify. They are built into Shopify, easy to bulk-edit, and work across most themes with a small amount of Liquid.

I still like this approach in 2026 because it is cheap, flexible, and easy for merchants to understand. If a product has the tag, it gets the badge. That simplicity matters when you hand the store back to a client or when a team member needs to update merchandising without touching code.

Typical badge use cases include:

• Sale
• New
• Best Seller
• Limited Edition
• Pre-order
• Final Sale
• Web Exclusive

Badges also pair nicely with other merchandising tactics such as featured sections, add-ons, and upsells. If you are improving product pages more broadly, see How to Add Featured Products on Shopify and How to Create Product Add-Ons for Your Shopify Store.

What is the best way to structure badge tags?

The best badge tag structure is one that is consistent, readable, and unlikely to clash with other tags used for filtering or automation. I usually recommend either simple fixed tags or a badge_ prefix system.

Here are the two structures I use most often:

For most merchants, badge_ prefixed tags are the sweet spot. They keep badge logic separate from operational tags, collection tags, and internal admin labels.

How do I add the tags to products in Shopify?

To add badge tags, go to the product in Shopify admin, find the Tags field, enter the tag, and save. You can also bulk edit tags for multiple products at once.

Here is the quick process:

1. Go to Products in Shopify admin.
2. Open a product you want to label.
3. Scroll to Tags.
4. Add a tag like sale, new, or badge_best-seller.
5. Click Save.

If you need to update lots of products, use Shopify's bulk editor or bulk actions. That is much faster than opening products one by one, especially if you are tagging seasonal ranges or clearance stock.

If you also display tags on the storefront, make sure your badge tags are not exposed in a way that looks messy. This guide can help: How to Display Product Tags on Your Shopify Store.

Which Shopify theme files should I edit for custom badges?

The right file depends on where you want the badge to appear. For collection grids, you usually edit a product card snippet. For product pages, you usually edit the main product section or template.

Common files include:

• snippets/card-product.liquid
• snippets/product-card.liquid
• sections/main-product.liquid
• templates/product.liquid
• snippets/product-grid-item.liquid

In Dawn and many Online Store 2.0 themes, card-product.liquid is often the key file for collection badges. On the product page itself, main-product.liquid is a common place to inject the badge near the title, price, or media.

Before you do anything, duplicate your theme in Online Store > Themes. I do this every single time, even for tiny edits. It avoids the classic problem of breaking a live collection page on a busy trading day.

Useful Shopify references:

• Shopify theme structure documentation
• Shopify Liquid documentation
• Shopify product tags help

How do I add a simple hardcoded badge based on product tags?

The easiest code method is to check whether the product contains a specific tag and then print the matching badge text. This is the best option for stores that only need a few badge types.

Add something like this where your badge should appear, usually above the product title or over the product image:

{% if product.tags contains 'sale' %}
  <span class="custom-badge custom-badge--sale">Sale</span>
{% elsif product.tags contains 'new' %}
  <span class="custom-badge custom-badge--new">New</span>
{% elsif product.tags contains 'final-sale' %}
  <span class="custom-badge custom-badge--final">Final Sale</span>
{% endif %}

This works well if you want one badge per product based on a clear priority order. In the example above, if a product has both sale and new, only the first matching badge will show.

That priority is important. In my experience, merchants often forget that if/elsif logic stops at the first match. If you need multiple badges on the same product, use a loop instead.

How do I show multiple badges instead of just one?

To show multiple badges, use separate if blocks or loop through product tags. This lets a product display labels like New and Pre-order at the same time.

{% if product.tags contains 'sale' %}
  <span class="custom-badge custom-badge--sale">Sale</span>
{% endif %}

{% if product.tags contains 'new' %}
  <span class="custom-badge custom-badge--new">New</span>
{% endif %}

{% if product.tags contains 'preorder' %}
  <span class="custom-badge custom-badge--preorder">Pre-order</span>
{% endif %}

This is usually my preferred setup for merchandising-heavy stores because it gives the team more freedom. The only downside is visual clutter, so keep the badge count sensible.

How do I create dynamic badges with a badge_ tag prefix?

The most flexible tag-based method is to use a badge_ prefix and let Liquid extract the text after it. For example, badge_web-exclusive can output web-exclusive automatically.

Use this code:

{% for tag in product.tags %}
  {% if tag contains 'badge_' %}
    {% assign badge_text = tag | remove: 'badge_' %}
    <span class="custom-badge">{{ badge_text }}</span>
  {% endif %}
{% endfor %}

This is excellent when you want merchandisers to create new labels without editing theme code each time. They just add a new tag with the right prefix.

I have used this pattern on Shopify stores with large catalogues because it scales better than adding endless elsif statements. The trade-off is that you may want to clean up the displayed text with extra formatting.

How do I make dynamic badge text look nicer?

You can improve dynamic badge text by replacing hyphens, capitalising words, or mapping raw tags to cleaner labels. This makes tags more admin-friendly while keeping the storefront polished.

{% for tag in product.tags %}
  {% if tag contains 'badge_' %}
    {% assign badge_text = tag | remove: 'badge_' | replace: '-', ' ' | capitalize %}
    <span class="custom-badge">{{ badge_text }}</span>
  {% endif %}
{% endfor %}

With that version, badge_web-exclusive becomes Web exclusive. If you want perfect title casing or custom colours per badge, you can add more logic or switch to metafields.

What CSS should I use for Shopify custom badges?

Your badge needs CSS to look intentional and to sit in the right place on the card or product image. Without styling, the badge may appear inline and break your layout.

Add this to base.css, theme.css, or your main stylesheet:

.card__media,
.product__media,
.card-wrapper {
  position: relative;
}

.custom-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.custom-badge--sale {
  background: #d92c2c;
}

.custom-badge--new {
  background: #1f8f4e;
}

.custom-badge--final {
  background: #5a31f4;
}

.custom-badge--preorder {
  background: #d17a00;
}

Exact selectors vary by theme, so you may need to inspect the HTML in your browser. The key thing is making the image wrapper or card wrapper position: relative so the absolutely positioned badge has a proper anchor.

When I test badge implementations, I always check mobile collection pages first. That is where overlapping text, cut-off labels, and awkward spacing usually show up.

How do I add badges on collection pages and product pages?

If you want badges everywhere, you often need to edit more than one file. Collection cards and product pages are commonly rendered by different templates or snippets.

A common mistake is adding the code to the product page only, then wondering why badges do not appear in collections. If your main goal is merchandising and click-through rate, collection page badges matter more because that is where customers decide what to open.

How do I add custom badges in Dawn or other Online Store 2.0 themes?

In Dawn, the most common file for collection badges is snippets/card-product.liquid. For product page badges, check sections/main-product.liquid.

Dawn and similar OS 2.0 themes are modular, which is good news because the code is usually cleaner than older themes. The downside is that badge markup may need to be added in multiple places if cards are reused across featured collections, recommendations, and search templates.

A practical workflow for Dawn is:

1. Open snippets/card-product.liquid.
2. Find the product image or card media block.
3. Insert your Liquid badge logic just inside the card media wrapper.
4. Add CSS to assets/base.css.
5. Preview collection pages and product recommendations.

Shopify community threads ranking for this topic often point to the same pattern, especially for Dawn badge customisation. They are useful for theme-specific edge cases, but I would still rely on Shopify's own docs first for understanding file structure and Liquid syntax.

Can I use metafields instead of product tags for badges?

Yes, and in some stores metafields are the better long-term option. Metafields give you cleaner control over badge text, and they are usually better if each product needs unique wording or more structured data.

Create a metafield definition in Settings > Custom data > Products, such as custom.badge_text. Then use code like this:

{% if product.metafields.custom.badge_text != blank %}
  <span class="custom-badge">{{ product.metafields.custom.badge_text }}</span>
{% endif %}

I recommend tags for simple badge rules and metafields for richer control. If you know badges will become a bigger part of merchandising, starting with metafields can save a refactor later.

You can learn more about metafields and theme custom data in Shopify's developer docs: Shopify custom data documentation.

What if I do not want to edit Shopify theme code?

If you do not want to code, use a product badge app from the Shopify App Store. This is usually the best route for merchants who want scheduling, advanced rules, or design controls without touching Liquid.

The Shopify App Store has several badge and label apps, and the community threads ranking for this keyword mention them for good reason. They can save time if you need rule builders based on collections, stock status, discount percentage, launch dates, or customer segments.

Start here: Shopify App Store product badge apps. If you are already using a page builder or merchandising app stack, check compatibility before installing anything.

As a developer, my honest take is this: do it in code if your rules are simple, and use an app if your badge logic will keep changing. The maintenance cost matters more than the initial setup time.

How do I add custom badges in the Split theme?

In Split, the original approach still works well: update the product badge snippet and add tag checks there. The relevant file is often snippets/product_badges.liquid.

If you are using Split, this pattern is still useful:

{% unless product.available %}
  <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>
{% else %}
  {% if product.compare_at_price > product.price %}
    <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>
  {% elsif product.tags contains 'preorder' %}
    <div class="product-badge preorder"><span>Pre Order</span></div>
  {% elsif product.tags contains 'new' %}
    <div class="product-badge new"><span>New</span></div>
  {% endif %}
{% endunless %}

Change the tag names and badge text to suit your store. As always, make sure the tags in the code exactly match the tags in Shopify admin.

What common mistakes stop Shopify badges from showing?

The most common badge problems are incorrect file selection, tag mismatches, and CSS positioning issues. Most badge bugs are simple once you know where to look.

• You edited the wrong file - the product page and collection grid often use different templates.
• The tag does not match exactly - keep naming consistent.
• The badge is rendering but hidden - CSS may place it outside the image area.
• Your theme caches sections differently - preview carefully across templates.
• You used elsif but expected multiple badges - only the first match will display.
• The wrapper is not position: relative - absolute positioning will behave strangely.

When I troubleshoot this, I first inspect the page source to confirm whether the badge HTML exists. If it does, the problem is almost always CSS. If it does not, the issue is usually Liquid logic or the wrong theme file.

How can I make custom product badges look better and convert better?

The best badges are visually clear, sparing, and tied to a real buying signal. A badge should help customers decide faster, not add noise.

My practical rules are:

• Use 1 to 2 badges max on most product cards.
• Reserve bright colours for high-priority labels like Sale or Limited.
• Keep text short, ideally 1 to 3 words.
• Use consistent casing and spacing.
• Check mobile layouts carefully.
• Make sure badge meaning is genuine, not decorative fluff.

In stores I have worked on, badges usually perform best when they reinforce an existing offer or product angle, such as Best Seller, Only Online, or Final Sale. Random labels that do not mean anything to shoppers rarely help.

If your store also uses urgency elements, bundles, or product add-ons, make sure your badges support that strategy instead of competing with it. For example, a Best Seller badge can work nicely beside a related products section or add-on offer.

Should I use tags, metafields, or an app for Shopify badges?

The best option depends on how often your badge rules change. Tags are best for speed, metafields are best for control, and apps are best for no-code management.

Here is my honest rule of thumb after years in the Shopify ecosystem:

If you are a smaller merchant comfortable with minor theme edits, tag-based badges are absolutely still worth using in 2026. They remain one of the easiest customisations to implement without adding another monthly app bill.

Final practical checklist for adding Shopify product tag badges

If you want the quickest path to a working result, follow this checklist in order. It covers the setup most merchants actually need.

1. Duplicate your live theme.
2. Add a test tag like sale or badge_new to one product.
3. Edit card-product.liquid or your theme's equivalent file.
4. Paste the Liquid badge logic near the product image or title.
5. Add CSS to base.css or theme.css.
6. Preview the product on desktop and mobile.
7. Check collection pages, search results, and featured sections.
8. Bulk-apply tags to the rest of the catalogue.

If you are making several merchandising changes at once, it is also worth reviewing nearby UX tweaks like hiding purchase actions on selected products or changing product page content by condition. Related guides: How to Hide the Add to Cart Button on Specific Products in Shopify and How to Add Products to Specific Pages on Shopify in 2026.

Bottom line: if you can edit a Shopify theme safely, you can add custom badges based on product tags without much trouble. Start simple, keep your tag naming clean, and only move to metafields or apps when your badge logic becomes more complex.