# Display Specification Table using Metafields 🔥

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 `` tag if you want a similar design to [our main preset](https://themes.shopify.com/themes/hyper/presets/hyper). {% endhint %} {% hint style="info" %} *Want the same table across products?* That's way simpler! Check out our help guide for it here: [#product-information-blocks](https://docs.foxecom.com/hyper-theme/collections-and-products/product-page/product-information#product-information-blocks "mention") {% 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.

{% 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.

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

{% if product.metafields.custom.brand != blank %} {% endif %} {% if product.metafields.custom.dimensions != blank %} {% endif %} {% if product.metafields.custom.year != blank %} {% endif %} {% if product.metafields.custom.seat_height != blank %} {% endif %} {% if product.metafields.custom.weight != blank %} {% endif %}

Brand	{{ product.metafields.custom.brand }}
Dimensions	{{ product.metafields.custom.dimensions }}
Year	{{ product.metafields.custom.year }}
Seat Height	{{ product.metafields.custom.seat_height }}
Weight	{{ product.metafields.custom.weight }}

```

{% 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

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

Brand	Mason
Dimensions	H 767 mm × W 502 mm × D 481 mm
Year	2020
Weight	5 kg

```

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: ```liquid {{ 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. ***