How to Add Extra Product Specifications Using Metafields (Size Charts, Ingredients, Dimensions)

How to Add Extra Product Specifications Using Metafields (Size Charts, Ingredients, Dimensions)

Many Shopify themes don’t provide enough room for detailed product specs such as dimensions, materials, ingredients, warranty details, or size charts. In this tutorial, you’ll learn how to add structured specifications using Shopify metafields—fully customizable per product.

📌 Step 1 — Create Product Specification Metafields

You can create one metafield for each specification OR create a “list of entries” metafield. Here, we’ll create a simple structured list for flexibility.

Go to:

Settings → Custom data → Products → Add definition

🟦 Metafield: Product Specifications

  • Name: Product Specifications
  • Namespace & key: custom.specs
  • Content type: List of entries

Inside the “Entry fields” area, add:

Field A — Specification Label

  • Type: Text (single line)
  • Key: label

Field B — Specification Value

  • Type: Text (single line)
  • Key: value

Click Save.

You now have a structured system to add specs such as:

  • Dimensions → 12 x 9 x 4 in
  • Material → Stainless Steel
  • Ingredients → Organic cotton, bamboo fiber
  • Warranty → 2 years

📌 Step 2 — Add Specs to Any Product

Go to any product page in the Shopify admin:

Products → Select Product → Scroll to Metafields

Under Product Specifications click:

Add entry → Fill label + value

Add as many as you want—this list will auto-display on the product page.

📌 Step 3 — Add Specification Display Code to Product Template

Open your product section:

Online Store → Themes → Edit Code  
sections → main-product.liquid  
(or product-template.liquid)

Add the following code where you want the specs to appear:

{% if product.metafields.custom.specs.size > 0 %}
  <div class="product-specs-section">
    <h2 class="specs-title">Product Specifications</h2>

    <table class="specs-table">
      {% for spec in product.metafields.custom.specs %}
        <tr>
          <td class="spec-label">{{ spec.label }}</td>
          <td class="spec-value">{{ spec.value }}</td>
        </tr>
      {% endfor %}
    </table>
  </div>
{% endif %}

📌 Step 4 — Add Styling for a Clean Table Layout

<style>
.product-specs-section {
  margin-top: 35px;
  padding: 25px;
  background: #f8f8f8;
  border-radius: 12px;
}

.specs-title {
  font-size: 24px;
  margin-bottom: 18px;
  font-weight: bold;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table tr {
  border-bottom: 1px solid #ddd;
}

.specs-table td {
  padding: 12px 0;
}

.spec-label {
  width: 35%;
  font-weight: 600;
}

.spec-value {
  width: 65%;
}
</style>

This produces a clean specification block that fits all Shopify themes.

📌 Optional Upgrade — Add Icons for Each Specification

You can also extend the metafield to include icon selectors for specs such as:

  • Material → 🧵
  • Weight → ⚖️
  • Warranty → 🛡️

Want me to provide this version? Just ask!

🎉 You're Done!

You now have a fully dynamic, metafield-driven product specification system that supports:

  • Size charts
  • Ingredients
  • Dimensions
  • Materials
  • Warranty details
  • Technical data

Merchants can update product specs anytime—no developer needed!

Back to blog

Leave a comment