Introduction

For many Shopify stores, a standard product description is not enough to provide all the information customers need before making a purchase. This is especially true for products such as electronics, furniture, apparel, and hardware, where shoppers often look for specific details like materials, dimensions, technical specifications, or warranty information.

Adding these details into a long paragraph can make product pages difficult to scan. A Shopify product specifications table presents important product information in a structured format, allowing customers to quickly find the details they care about.

With Shopify Online Store 2.0, merchants can use Product Metafields to store and display custom product information in a flexible way. For many stores, this provides a simple alternative to installing a dedicated product specification app.

Use Case Scenario

Imagine you run a furniture store on Shopify. Every product may have different information, such as materials, dimensions, weight, color options, or warranty periods. A structured product specification table allows customers to compare key details without searching through lengthy product descriptions.

The same approach also works well for clothing brands that need to show fabric composition and care instructions, electronic products that require technical details, or hardware products that have multiple measurements and specifications.

By managing these details through Shopify Product Metafields, you can keep your product pages consistent while making updates directly from your Shopify Admin.

Solution Overview

The solution is to create a JSON Product Metafield that stores all specification table data for each product. Instead of creating a separate metafield for every specification, such as material, size, or warranty, a single JSON metafield can hold multiple rows and columns of product details.

For example, a Product Metafield with the namespace and key custom.specification can store information like materials, dimensions, product measurements, and warranty details in a structured JSON format.

Your Shopify theme can then read this JSON data and automatically display it as a clean product specifications table on the product page.

Implementation and How It Works

Step 1: Create Your Product Metafield Definition

First, you need to create a Product Metafield that will store your product specification table data.

In your Shopify Admin:

1. Go to Settings.

2. Select Custom data.

3. Click Products under the Metafields section.

4. Click Add definition.

5. Configure the metafield with the following settings:

• Name: Specification

• Namespace and key: custom.specification

• Type: JSON

Click Save to create the metafield.

Step 2: Add Product Specification Data

Now you can add specification information to each product.

1. Go to Products in your Shopify Admin.

2. Select the product you want to edit.

3. Scroll to the Metafields section at the bottom of the product page.

4. Enter your specification data in the JSON metafield.

If you want to display a four column product specifications table, use the following JSON structure:

[
  {
    "1": "Material",
    "2": "100% Organic Cotton",
    "3": "Height",
    "4": "30cm"
  },
  {
    "1": "Width",
    "2": "40cm",
    "3": "Warranty",
    "4": "1 Year"
  }
]
Copy

If you prefer a two column product specifications table, use this JSON structure:

[
  {
    "1": "Material",
    "2": "100% Organic Cotton"
  },
  {
    "1": "Dimensions",
    "2": "40cm"
  },
  {
    "1": "Warranty",
    "2": "1 Year"
  }
]
Copy

After entering the data, click Save.

If a product does not require certain specifications, simply leave those rows out of the JSON data. The Liquid code can detect empty specification values and prevent unnecessary rows from appearing in the table.

Step 3: Add the Product Specifications Table to Your Shopify Product Page

The final step is to display the metafield data on your storefront.

Create a new snippet called specification-table.liquid in your Shopify theme's Snippets folder and paste the provided Liquid code into the file.

{% if product.metafields.custom.specification.value.size > 0 %}
    <style>
        .specification-table {
            width: 100%;
            table-layout: fixed;
            background-color: #f2f2f2;
            margin-top: 10px;
        }

        .specification-table tr > *:nth-child(odd) {
            width: 24%;
            background-color: #d9d9d9;
            height: 45px;
        }

        .specification-table tr > *:nth-child(even) {
            width: 31%;
            background-color: #ffffff;
            height: 45px;
        }
    </style>

    <table class="table table-bordered specification-table">
        {% for row in product.metafields.custom.specification.value %}
            <tr>
                {% if row.size == 1 %}
                    {% for col in row %}
                        <th colspan="999">{{ col | last }}</th>
                    {% endfor %}
                {% else %}
                    {% for col in row %}
                        <td>{{ col | last }}</td>
                    {% endfor %}
                {% endif %}
            </tr>
        {% endfor %}
    </table>
{% endif %}Copy

The Liquid code reads the JSON data stored in the custom.specification Product Metafield and converts it into a structured HTML table. Once the setup is complete, you only need to update the JSON content in Shopify Admin whenever product specifications change.

This approach makes it easier to maintain consistent product specification tables across your Shopify catalog.

Step 4: Add a Collapsible Specification Block to Your Product Page

To display the product specifications in a clean and structured way, you need to add a collapsible (accordion) block inside your product information section.

This allows merchants to control where the specification table appears on the product page and keeps the product layout flexible and user friendly.

Open your Shopify theme editor and go to:

Online Store → Themes → Edit code → Sections → main-product.liquid

Then locate your product information blocks section and add the following logic:

                      {%- assign accordion_heading = block.settings.heading | downcase -%}
                      {%- if accordion_heading == "specification"-%}
                        {% render 'specification-table' %}
                      {%- endif -%}Copy

This code checks the accordion block title. When the heading is set to "Specification", the system will automatically render the product specification table inside that collapsible section.

In your theme editor, you can now:

1. Add a collapsible row block to the product information section

2. Set the heading to "Specification"

3. The specification table will automatically appear inside this accordion

This approach keeps your product page layout clean while allowing customers to expand and view detailed product information only when needed.

Result and Benefits

A Shopify product specifications table improves the readability of your product pages by presenting technical information in a clear and organized format. Customers can quickly review measurements, materials, compatibility details, and other important product information without reading a long product description.

For Shopify merchants, using Product Metafields provides a scalable way to manage custom product information. Whether your store has dozens or thousands of products, you can maintain a consistent specification format and update information directly within Shopify Admin.

When You May Need a Shopify Developer

Using Shopify Product Metafields is a powerful way to manage product specifications, especially for stores that need flexible and easy to maintain product information.

However, some businesses may have more advanced requirements, such as a fully customized specification table design, complex product data structures, migration of existing product specifications, bulk data management, or integration with external systems like ERP or PIM platforms.

In these cases, working with an experienced Shopify development team can help ensure the solution is scalable, maintainable, and aligned with your long term business needs.

Our Shopify Development Experience

At Shinetech Software, we specialize in custom Shopify development, helping merchants build tailored solutions beyond standard Shopify functionality.

Our team has experience with Shopify Product Metafields, Metaobjects, custom theme development, Shopify app development, third party integrations, and complex ecommerce workflows.

Whether you need a customized product specifications table, a unique product page experience, or a larger system integration project, we focus on creating solutions that fit your business processes and future growth.

About the Author

This article was written by Sonya Yuan, a Shopify consultant at Shinetech Software.

Our team shares practical Shopify tutorials based on real development experience, helping merchants understand not only how to use Shopify features, but also how to choose the right approach when their business requires custom functionality.