Skip to main content

Add Product Badges with Metafields

Display custom badges like "New", "Bestseller", "Limited Edition", or "Sale" on product cards and product pages using metafields.

Advanced Tutorial

This tutorial requires knowledge of HTML, CSS, and Shopify Liquid. May require adjustments depending on your theme.

Why Use Metafields for Badges?​

Unlike hardcoded badges or tag-based approaches, metafield badges give you:

  • Full control per product choose exactly which products get which badges
  • Easy updates change or remove badges by editing the metafield value, no theme code changes
  • Campaign flexibility add "BFCM Deal" badges before a sale, clear them after

Step 1: Create the Metafield​

In Metafield Studio, create a metafield on your product:

  • Namespace: custom
  • Key: badge_text
  • Type: Single line text
  • Value: The badge label (e.g., "New", "Bestseller", "Limited Edition", "Save 20%")

Step 2: Display on Product Cards (Collection Pages)​

In your theme code, find the product card snippet, typically snippets/product-card.liquid, snippets/card-product.liquid, or similar. Add this code inside the product card's image container:

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

Step 3: Display on the Product Page​

In your product template (sections/main-product.liquid or sections/product-template.liquid), add near the product title:

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

Step 4: Add CSS​

Add to your theme's stylesheet (assets/base.css or assets/theme.scss.liquid):

.product-badge {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 1;
}

.product-badge--large {
  position: relative;
  top: auto;
  left: auto;
  font-size: 13px;
  padding: 5px 12px;
  margin-bottom: 8px;
}

Make sure the product card image container has position: relative so the badge positions correctly.

Step 5: Populate in Bulk​

Use the Bulk Editor to add badges across many products at once:

  1. Open the Bulk Editor for Products
  2. Select the custom.badge_text metafield
  3. Set values like "New" for recent arrivals, "Bestseller" for top sellers, etc.

To remove badges after a campaign ends, bulk-clear the values using the Bulk Editor or a CSV import with empty values.

Advanced: Multiple Badge Colors​

For different badge colors per type, use a second metafield for the color:

  • Namespace: custom
  • Key: badge_color
  • Type: Single line text or Color
  • Value: A hex color code (e.g., #27ae60 for green, #e74c3c for red)

Then update the Liquid:

{% if product.metafields.custom.badge_text %}
  <span class="product-badge"
    {% if product.metafields.custom.badge_color %}
      style="background-color: {{ product.metafields.custom.badge_color }}"
    {% endif %}
  >
    {{ product.metafields.custom.badge_text }}
  </span>
{% endif %}

This lets you use green for "New", red for "Sale", gold for "Bestseller", and so on, all controlled from metafield values.