# Display specification table using metafields

<Hint type="info" title="Applies to:">
  All FoxEcom themes
</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20\(93\)_LicE2CdB.jpg)

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**](#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 type="note" title="Are you using Hyper theme?">
  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 Hyper preset](https://themes.shopify.com/themes/hyper/presets/hyper).&#x20;
</Hint>

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

<Stepper>
  <Step title="Create product metafields">
    1. In **Shopify Admin**, go to **Settings > Metafields and metaobjects > 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.

    ![image](https://docs-assets.foxecom.app/hyper-theme/image_CliqMGyh.png)

    <Hint type="success">
      **Tip:** Use a clear namespace (e.g., `custom.brand`, `custom.year`).
    </Hint>


  </Step>

  <Step title="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.

    ![image](https://docs-assets.foxecom.app/hyper-theme/image_3F1S8VNn.png)
  </Step>

  <Step title="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 the code below into the **Custom Liquid.**

    ![image](https://docs-assets.foxecom.app/hyper-theme/image_PJV73W8M.png)

    <Hint type="info">
      * Replace `custom` with the namespace you use for your metafields (for example, `specs.brand`).
      * Use the `!= blank` condition to show a row only when the metafield contains a value.

      This keeps your specification table consistent while **automatically hiding empty rows**.
    </Hint>



    ```typescript
    <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>
    ```
  </Step>
</Stepper>

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

<Stepper>
  <Step title="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, you can **Insert Table** or **use HTML** to add a table structure.![](https://docs-assets.foxecom.app/shared-documentation/1c662ab0-0dd6-4ae2-b950-4c8fa92ab583.png)

    Paste the **HTML** code below if you use **Show HTML:**

    ![](https://docs-assets.foxecom.app/shared-documentation/7c17413c-51df-48f6-b525-0962604fc9c5.png)

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

    Repeat this process for every product that requires a unique table.
  </Step>

  <Step title="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 > Metafields and metaobjects > 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. Save the changes.

    ![](https://docs-assets.foxecom.app/shared-documentation/eb7b303c-dbd3-4973-91f8-3afa2992e3ca.png)
  </Step>

  <Step title="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*). <br/>![image](https://docs-assets.foxecom.app/hyper-theme/image_FhWO8FMR.png)<br/>From the dropdown, **select** the correct Page you created earlier (e.g., "Specifications – Product A").<br/>![](https://docs-assets.foxecom.app/shared-documentation/287c716b-963f-4126-8e57-16c2822094fb.png)
    5. Click **Save**.
    6. Repeat for all products.
  </Step>

  <Step title=" 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 }}`

    ![image](https://docs-assets.foxecom.app/hyper-theme/image_noQ2ZrLz.png)

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

    1. Click the **Dynamic Source icon**.
    2. Select your metafield: **Specifications Page**.&#x20;
    3. **Save** your changes.
  </Step>
</Stepper>

<Video src="https://docs-assets.foxecom.app/hyper-theme/fffffasdas_kV1Xs69m.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

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