Display Specification Table using Metafields 🔥

A step-by-step guide to display dynamic specification table for products

Shopify metafields let you add and display extra product information, such as brand, dimensions, year, seat height, or weight.

✅ You can use them to build a specifications table that keeps the same design across products but displays unique information for each.

This guide shows you two approaches:

Product metafields as table rows: Best when products share a consistent set of fields (e.g., Brand, Year, Weight).
Page metafield: Ideal for products that require unique or flexible tables with varying structures.

💡 Tip: Hyper theme already includes the table-striped style for tables. Simply add the class="table-striped to your <table> tag if you want a similar design to our main preset.

Want the same table across products?

That's way simpler! Check out our help guide for it here: Product information #Product Information blocks

Method 1: Product Metafields as Table Rows

This method is structured and scalable. You define metafields for each attribute (E.g., Brand, Year, Weight), fill them in per product, and then render them in a table.

When to use this method

You have many products with the same specification fields.
You want structured data that’s easy to update in bulk.
You don’t want to create a new Page for every product.

Step 1: Create Product Metafields

In Shopify Admin, go to Settings > Custom Data > Products.
Click Add definition.
Create metafields for each type of information you want to show, for example:
- Brand (Single line text)
- Dimensions (Single line text)
- Year (Text or number)
- Seat height (Text or number)
- Weight (Text or number)
Save your metafield definitions.

Tip: Use a clear namespace (e.g., custom.brand, custom.year).

Step 2: Fill Values for Each Product

Go to Products in Shopify Admin.
Open a product.
Scroll to the Metafields section.
Enter the values for that product (e.g., Brand = Mason, Weight = 5kg).
Save.
Repeat for each product.

Step 3: Display the Table in the Product Template

Go to Online Store > Themes > Customize.
Open your Product template.
Add a Custom Liquid block where you want the table to appear.
Insert code like this:

<table class="table-striped" style="table-layout: fixed; width: 100%;">
  <tbody>
    {% if product.metafields.custom.brand != blank %}
    <tr>
      <th>Brand</th>
      <td>{{ product.metafields.custom.brand }}</td>
    </tr>
    {% endif %}

    {% if product.metafields.custom.dimensions != blank %}
    <tr>
      <th>Dimensions</th>
      <td>{{ product.metafields.custom.dimensions }}</td>
    </tr>
    {% endif %}

    {% if product.metafields.custom.year != blank %}
    <tr>
      <th>Year</th>
      <td>{{ product.metafields.custom.year }}</td>
    </tr>
    {% endif %}

    {% if product.metafields.custom.seat_height != blank %}
    <tr>
      <th>Seat Height</th>
      <td>{{ product.metafields.custom.seat_height }}</td>
    </tr>
    {% endif %}

    {% if product.metafields.custom.weight != blank %}
    <tr>
      <th>Weight</th>
      <td>{{ product.metafields.custom.weight }}</td>
    </tr>
    {% endif %}
  </tbody>
</table>

Notes:

Replace custom with the actual namespace you used when creating your metafields (e.g., specs.brand).
The != blank condition ensures the row is only shown if the product metafield has a value.
This way, you can create a consistent table layout for all products, but rows will only appear where data is available.

Method 2: Page Metafield

The Page Metafield method is best if you want to create a complete specifications table manually for each product, and then simply link it to the product.

When to use this method

Each product requires a different or complex table.
You want full control of the table structure (e.g., extra notes, merged cells).
Your catalog is small to medium, so creating one Page per product is manageable.

Step 1: Create a Specifications Page

In Shopify Admin, go to Online Store > Pages.
Click Add Page.
Give the page a clear name, for example:
- "Specifications – Product A"
- "Specifications – Product B"
In the content editor:

Use the Insert Table option, or

Switch to HTML view and paste a table structure like this:

<table class="table-striped">
  <tr>
    <th>Brand</th>
    <td>Mason</td>
  </tr>
  <tr>
    <th>Dimensions</th>
    <td>H 767 mm × W 502 mm × D 481 mm</td>
  </tr>
  <tr>
    <th>Year</th>
    <td>2020</td>
  </tr>
  <tr>
    <th>Weight</th>
    <td>5 kg</td>
  </tr>
</table>

Save the page.
Repeat this process for every product that requires a unique table.

Step 2: Create a Page Metafield

Now you’ll create a metafield that allows you to attach one Page to each product.

Go to Shopify Admin > Settings > Custom data > Products.
Click Add definition.
Fill in the details:
- Name: Specifications Page
- Namespace and key: custom.specifications_page (you can choose your own, but this is a good convention).
- Content type: Page (One page).

Click Save.

Step 3: Link the Page to Each Product

In Shopify Admin, go to Products.
Open a product that needs specifications.
Scroll down to the Metafields section.
You’ll see the new metafield (e.g., Specifications Page).

From the dropdown, select the correct Page you created earlier (e.g., "Specifications – Product A").

Click Save.
Repeat for all products.

Step 4: Display the Page in the Product Template

Go to Online Store > Themes > Customize.
Open your Product template.
Locate the section where you want the specifications table to appear.

Add a new Custom Liquid block. Inside the Custom Liquid block, please paste the following code:

{{ product.metafields.custom.specifications_page.value.content }}

Otherwise, if your theme has a "Collapsible Row - Specifications" block or similar block, you can use that.

Click the Dynamic Source icon ().
Select your metafield: Specifications Page.
Save your changes.

✅ Each product now displays its own specifications table from the Page you linked.

Last updated 24 days ago