# Display Specification Table using Metafields 🔥

<figure><img src="/files/LicE2CdBXy2Vqeg4uKxV" alt=""><figcaption></figcaption></figure>

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

:white\_check\_mark: 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**](#method-1-product-metafields-as-table-rows)**:** Best when products share a consistent set of fields (e.g., Brand, Year, Weight).
2. [**Page metafield**](#method-2-page-metafield)**:** Ideal for products that require unique or flexible tables with varying structures.

{% hint style="success" %}
💡 **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](https://themes.shopify.com/themes/hyper/presets/hyper).&#x20;
{% endhint %}

{% hint style="info" %}
*Want the same table across products?*

That's way simpler! Check out our help guide for it here: [Product information](/hyper-theme/collections-and-products/product-page/product-information.md#product-information-blocks)
{% endhint %}

***

## Method 1: Product Metafields as Table Rows

{% hint style="info" %}
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.
{% endhint %}

{% hint style="success" %}

### 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.
  {% endhint %}

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

<figure><img src="/files/CliqMGyhQ1XFZJ5RykJb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tip**: Use a clear namespace (e.g., `custom.brand`, `custom.year`).
{% endhint %}

***

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

<figure><img src="/files/3F1S8VNnexp2d3UPSUv7" alt=""><figcaption></figcaption></figure>

***

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

```liquid
<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>
```

<figure><img src="/files/PJV73W8MHaar5D0ILC1v" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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.
  {% endhint %}

***

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

{% hint style="success" %}

### 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.
  {% endhint %}

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

<figure><img src="/files/XvXrdNzyuwP28WDIrXVr" alt=""><figcaption></figcaption></figure>

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

```html
<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>

```

<figure><img src="/files/4dnA1NzGuwOySuktqTWr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/yKdSiiiOSonef8tYgyRk" alt="" width="563"><figcaption></figcaption></figure>

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*).

<figure><img src="/files/FhWO8FMRdARQF1FV4MxQ" alt="" width="549"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/mYxMAfbXowC8oUxZaimY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/FNEKqvMgSp1lQq4JpbVP" alt=""><figcaption></figcaption></figure></div>

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:

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

<figure><img src="/files/noQ2ZrLzQYwquyIUtr6X" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/kV1Xs69mH9L8luA6ofRO" alt=""><figcaption></figcaption></figure>

4. Click the **Dynamic Source icon** (<i class="fa-database">:database:</i>).
5. Select your metafield: **Specifications Page**.&#x20;
6. Save your changes.

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

***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdhkYDvbE_kCCfQzojV1PnwEhPcPisv1Op7qsMVPrPt1dKntEzZkpFgjDpeZizbh1Hgtj3vJj5QJA1F8M84SyiFKkq5T7IhoUINIgSOPnX4AukbM_cwJQAECT05FGGg24Vj5JgMbfAwyflycK_yBh587-Dp?key=abvPa_ihod6jQdlYgZiCdg" alt=""><figcaption><p><a href="https://foxecom.com/products/foxify-shopify-app?utm_source=HelpCenter&#x26;utm_medium=banner&#x26;utm_campaign=customer+success">Try Foxify free now</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/faqs/display-specification-table-using-metafields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.