How to Display Product-Specific Icons Using Metafields in Shopify

How to Display Product-Specific Icons Using Metafields in Shopify

Want to display custom icons on each product page — like Free Shipping, Eco-Friendly Materials, or 30-Day Guarantee? In this tutorial, you’ll learn how to create metafields to store icon data and dynamically display them on your product pages.

✨ What We’re Building

You’ll create a metafield where store owners can:

  • Add an icon (image)
  • Add an icon label (e.g., “Free Shipping”)
  • Add a description (optional)

Then we’ll output them on the product page like this:

  • 🚚 Free Shipping
  • ♻️ Eco-Friendly
  • ⭐ 30-Day Guarantee

🧱 Step 1 — Create the Metafield Definition

Go to:

Shopify Admin → Settings → Custom data → Products → Add definition

Create a metafield:

  • Name: Product Icons
  • Namespace & key: custom.icons
  • Type: List of Objects

Add object fields:

  1. Icon Image → Type: File
  2. Label → Type: Single line text
  3. Description → Type: Multi-line text (optional)

Save the metafield.

🧩 Step 2 — Fill In Icons at Product Level

Go to any product in your admin, scroll to Metafields and add items:

  • Upload an SVG or PNG icon
  • Write the label (e.g., “Free Shipping”)
  • Optional: Add short description

You can add as many icons as you want.

💻 Step 3 — Display Icons in Your Product Template

Open:

Online Store → Themes → Edit Code

Find and open:

sections/main-product.liquid

Paste this code wherever you want the icons to show:

<!-- Product Icons Output -->
{% if product.metafields.custom.icons != blank %}
  <div class="product-icons">
    {% for icon in product.metafields.custom.icons %}
      <div class="product-icon-item">

        {% if icon.icon_image != blank %}
          <img 
            src="{{ icon.icon_image | image_url: width: 64 }}" 
            alt="{{ icon.label }}" 
            class="product-icon-image"
          >
        {% endif %}

        <h4 class="product-icon-label">
          {{ icon.label }}
        </h4>

        {% if icon.description %}
          <p class="product-icon-description">
            {{ icon.description }}
          </p>
        {% endif %}
        
      </div>
    {% endfor %}
  </div>
{% endif %}

🎨 Step 4 — Add Optional Styling (CSS)

Open:

assets/base.css (or theme.css)

Paste:

.product-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.product-icon-item {
  text-align: center;
}

.product-icon-image {
  width: 48px;
  height: auto;
  margin-bottom: 10px;
}

.product-icon-label {
  font-weight: 600;
  margin: 5px 0;
}

.product-icon-description {
  font-size: 14px;
  opacity: 0.8;
}

🎉 You're Done!

Your product page now supports dynamic icons powered by metafields — perfect for:

  • Guarantees
  • Product benefits
  • Shipping perks
  • Material badges
  • Eco-friendly attributes

This gives store owners a powerful, visual way to highlight key product features without editing code ever again.

🚀 Want More Tutorials?

I can generate more HTML tutorials like this for metafields, Shopify sections, Liquid, CSS, and more. Just tell me the topic!

Back to blog

Leave a comment