Display Specification Table using Metafields 🔥

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:

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

#Method 1: Product Metafields as Table Rows

#Step 1: Create Product Metafields

1. In Shopify Admin, go to Settings > Custom Data > Products.
2. Click Add definition.
3. 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)
4. Save your metafield definitions.

#Step 2: Fill Values for Each Product

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

#Step 3: Display the Table in the Product Template

1. Go to Online Store > Themes > Customize.
2. Open your Product template.
3. Add a Custom Liquid block where you want the table to appear.
4. 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>

#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.

#Step 1: Create a Specifications Page

1. In Shopify Admin, go to Online Store > Pages.
2. Click Add Page.
3. Give the page a clear name, for example:
   • "Specifications – Product A"
   • "Specifications – Product B"
4. 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>

5. Save the page.
6. 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.

1. Go to Shopify Admin > Settings > Custom data > Products.
2. Click Add definition.
3. 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).

4. Click Save.

#Step 3: Link the Page to Each Product

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

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

6. Click Save.
7. Repeat for all products.

#Step 4: Display the Page in the Product Template

1. Go to Online Store > Themes > Customize.
2. Open your Product template.
3. 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.

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

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