[Includes a Ready-to-Use Shopify Template] How to Create a Dynamic Value Table Using Metafields

May 21, 2025

Introduction

Have you implemented the necessary measures to increase your store's conversion rate?

Accurately providing the information customers are looking for can significantly impact your EC site's sales.

In particular, clearly communicating detailed product specifications and features can lead to more repeat purchases.

Organizing information that varies by product, such as size and specifications, in a table format makes it much easier to understand.

In this article, as a strategy to boost your store's sales, we'll introduce—complete with a template—how to use Shopify's metafields to efficiently display variable values in tables!

Table of Contents

Introduction What are metafields? Displaying tables using metafields Step 1: Define metafields Step 2: Add a custom liquid section to the theme Step 3: Enter code into the custom Liquid Step 4: Enter custom CSS Summary

What is a metafield?

A metafield in Shopify is a custom field feature that allows you to store “additional unique information” for products, collections, customers, and more.

If you’d like to learn more about metafields, be sure to check out the detailed article we’ve linked!

[Related Article]

What are Shopify metafields? A comprehensive guide to implementation!

Displaying a table using metafields

Let’s walk through the steps to quickly create a table.

↑ This is a sample image of the table we’ll be creating this time.

Try creating it together with us while looking at the screenshots!

Step ① Defining metafields

First, set up the metafields for the items you want to display in the table. This time, assuming the table will list detailed information about apparel products, add the following items.

・Size ・Material ・Country of Origin ・Color ・Cautions ・Other As an example, here’s a screenshot of defining a metafield for size.

From the "Settings" in the Shopify admin, navigate to "Custom Data".

> Move to the "Product" page for defining metafields

From the "Add definition" button in the upper right, add a product metafield definition

On the destination page, set the following items:

Name: Enter an easy-to-understand name that will be used as the display name for the metafield and for staff to identify this metafield within the Shopify admin.

Name space and key: Enter the string that the system will use to programmatically identify this metafield as a unique identifier within the metafield.

Description: Enter additional information regarding the purpose or usage of the metafield.
Select type: Choose "Single line text" (allows you to enter short text, such as product names, author names, or brief descriptions).

Please create all the required metafield entries.

Step ② Add a custom Liquid section to the theme.

For the table you are creating this time, you will need to enter code into a custom Liquid section.

As preparation, first place a section in your preferred location in the theme where you can enter Liquid.

Step ③ Enter code into the custom Liquid.

The actual code to use is as follows.

You can also use this as a template.
*Please note: While the screen capture uses Dawn, the display may differ depending on the theme you use. Thank you for your understanding in advance.

[Liquid Code]

Size	{{ product.metafields.custom.product_size}}	Material	{{ product.metafields.custom.product_materials}
Country of Origin	{{ product.metafields.custom.product_country_of_origin}	Color	{{ product.metafields.custom.product_color}}
Notes	{{ product.metafields.custom.product_attentions}	Other	{{ product.metafields.custom.product_other}

Details of the code are as follows:

Tags:

<table class="specs-table">: This is the opening tag for the HTML table element.
class="specs-table" specifies the class name used to apply CSS styles to this table.
Using this class name, you can adjust the table's design (borders, fonts, layout, etc.) with CSS.

Tags:

<tbody>: This tag defines the body (content) section of the HTML table.
The actual data rows (product specifications) are described within this section.

Tags:

<tr>: This is the tag that represents a row in an HTML table.
It groups information within the table horizontally.
Any information placed between the <tr> opening tag and the

closing tag will be arranged in a row.

Tags:

<th>: This is the tag that represents a table header in HTML.
In this code, it is used for the names of the specification items to be displayed (e.g., "Size," "Material," "Country of Origin," "Color," "Precautions," "Other").

Tags:

<td>: This is where the values for the product specifications in an HTML table are described.
In this code, the <td> immediately following each <th>, as well as the fourth <td> in each row, will display the product attribute values fetched from Shopify's metafields using the Liquid syntax {{ product.metafields.custom.[attribute_name] }}.

Liquid syntax {{ product.metafields.custom.属性名 }}:

{{ ... }}: This is the output tag for Liquid, Shopify's template language.
The content enclosed within this tag is dynamically output based on Shopify's data.
product: This refers to the Product object in Shopify.
It is used to access information about the currently displayed product.
metafields: This is a property of the Product object, and it contains a collection of metafields associated with the product.
custom: This is the namespace for metafields.
.property name: This indicates the key of a specific metafield.

Example: .product_size: Gets the value of the metafield with the key product_size within the custom namespace (the product size).

Please enter the above code into the custom liquid you placed in step ②.

At this point, it hasn't taken the form of a table yet, so you'll need to enter CSS.

Step ③ Enter the custom CSS

The table design will likely vary depending on the store.

Therefore, the following CSS is for reference.

【Custom CSS】

.specs-table {
width: 90%;
border-collapse: collapse;
border: 2px solid #ccc;
font-size: 14px;
color: #191919;
margin-top: 1em;
margin: 0 auto;
}

.specs-table th,
.specs-table td {
border: 1px solid #ccc;
padding: 14px 14px;
text-align: left;
vertical-align: top;
font-weight: bold;
}

.specs-table th {
background-color: #f7f7f7;
font-weight: normal;
white-space: nowrap; width: 20%;
}

.specs-table :

border: 2px solid #ccc; : Sets a 2-pixel thick solid border in color #ccc (light gray) around the entire table.

.specs-table th, .specs-table td :

This CSS applies to both <th> and <td> elements within tables that have the .specs-table class.

border: 1px solid #ccc; : Sets a 1-pixel thick solid border in color #ccc (light gray) around each cell (headers and data).

.specs-table th :

This CSS applies only to <th> elements (table headers) within tables that have the .specs-table class.

background-color: #f7f7f7; : Sets the header background color to #f7f7f7 (light gray). This makes it easier to distinguish the header row from the data rows.

Once you've entered the CSS, you've now created a table of variable values for your product page!