Badges like “Sale”, “New”, or “Best Seller” are a great way to grab a shopper’s attention and highlight key product information. If you’re using the Shopify Horizon theme, adding badges is simple and can be done dynamically using product tags.

In this tutorial, I’ll walk you through how to display custom badges on your product cards using product tags — no app required!

Why Use Badges?

Badges help improve:

• Visual appeal
• Product discoverability
• Click-through rates
• Conversion (especially for promotions)

Step 1: Add Tags to Your Products

We’ll use product tags to control which badge appears on which product.

1. Go to your Shopify Admin → Products
2. Click any product you want to highlight
3. In the Tags section, add any of the following:
   • badge-new
   • badge-sale
   • badge-best

You can create more badges later by following the same format.

Step 2: Update the Horizon Theme Code

Now, we’ll update the product card component to display these badges.

File to edit:

sections/card-product.liquid

Code snippet to insert:

Place the following snippet inside your product card, usually near the image or title:

{% if product.tags contains 'badge-new' %}
  <div class="badge badge--new">New</div>
{% endif %}
{% if product.tags contains 'badge-sale' %}
  <div class="badge badge--sale">Sale</div>
{% endif %}
{% if product.tags contains 'badge-best' %}
  <div class="badge badge--best">Best Seller</div>
{% endif %}

Tip: Wrap the product card or image container in a position: relative block so the badge overlays nicely.

Step 3: Add Styling for Badges

Open your theme’s CSS file. This is usually located at:

assets/base.css

or:

assets/component-card.css

Paste this CSS:

.badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: #000;
  color: #fff;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 3px;
  z-index: 2;
}

.badge--new {
  background-color: #3bb77e;
}

.badge--sale {
  background-color: #f44336;
}

.badge--best {
  background-color: #ff9800;
}

You can customize the colors to match your brand.

Step 4: Test It Out

1. Go to your storefront
2. Check a product you tagged with badge-new, badge-sale, or badge-best
3. You should see the label appear!

Bonus: Use Metafields for More Flexibility

If you want your clients or team to manage badges via the Shopify Admin without touching tags, you can use product metafields.

Here’s an example if you’ve created a metafield called custom.badge:

{% assign badge = product.metafields.custom.badge.value %}
{% if badge %}
  <div class="badge badge--{{ badge | handleize }}">{{ badge }}</div>
{% endif %}

This lets you add custom badges like “Limited Edition” or “Hot Deal” right from the product editor.

Conclusion

Adding badges to the Horizon theme using product tags is an easy way to boost product visibility and create a sense of urgency. Whether you’re showing off new arrivals or running limited-time deals, badges are a proven way to drive conversions.

Let me know in the comments if you’d like a version using Shopify’s new data attributes, app blocks, or dynamic metafields — or if you want this working on collection pages too!