Add Metaobjects to Create a Custom Template in Shopify 2.0

If you’re new to custom data in Shopify, it helps to first understand how metafields work, since metaobjects rely on them for reference, this is covered in detail in our guide on how to add metafields in a Shopify store.

Difference Between Metaobjects and Metafields

Metafields are individual pieces of custom data, such as fabric type. Metaobjects are structured containers that group multiple related metafields together to create a new content type, such as a Product Details object that includes fabric type, care instructions, and size availability. Metafields are for simple, single data points, while metaobjects are for more complex data structures, such as author profiles or recipes.

How to Create a Metaobject in Shopify

To create a metaobject in Shopify, navigate to Shopify Admin >Content > Metaobjects or Settings > Metafields and metaobjects in your Shopify admin, click Add definition, give it a name, and then add fields with specific content types like single-line text or image to define the structure. Once you've saved the definition, you can add entries by selecting the definition and filling in the forms for each instance. Follow these steps to create a Metaobject definition and add the entries.

Step 1: Navigate to Shopify Admin > Content > Metaobjects.

Step 2: Click the Add definition button.

Step 3: Add the name of your metaobject definition.

Step 4: Add the label and select the type of field you want to add, such as single-line text, file, or other options.

Step 5: Click the Add field button to add more fields to your metaobject definition.

Step 6: Save the changes.

Step 7: Click the Add entry button to add the data to the metaobject definition.

Step 8: Fill the fields and click the save button.

Attach Metaobjects to Products or Pages

To attach metaobjects to products or pages, first create a metaobject definition and then create metafields that reference that definition under the product or page's custom data settings. You can then select the specific metaobject entry you want to link to that product or page in the metafield editor. Follow these steps to attach the Metaobject to your Product page.

Step 1: Navigate to Shopify Admin > Settings.

Step 2: Scroll down to the Metafields and metaobjects section.

Step 3: Open the Product Metafields tab.

Step 4: Click the Add definition button.

Step 5: Add the name of your definition and select the type of Metafield, such as Metaobject. Select the type, such as a single item or a list.

Step 6: Select the Metaobject definition from the list you created before.

Step 7: Save the changes.

Step 8: Copy this unique identifier of the Metafield.

Step 9: Navigate to Shopify Admin > Products.

Step 10: Select the product that you want to update.

Step 11: Scroll down to the Metafields section.

Step 12: Select the entries you want to add for this product.

Step 13: Save the changes.

Create a Custom Template to Display Metaobjects (Shopify 2.0)

To display Metaobjects in Shopify 2.0 using a custom template, follow these steps:

Step 1: Navigate to Online Store > Themes > Duplicate. Duplicate your theme for backup.

Step 2: Navigate to Online Store > Themes > Customize.

Step 3: Select the product template from the dropdown.

Step 4: Click the Create Template button.

Step 5: Name your template, select the base template, and click the Create Template button.

Step 6: Add sections or blocks in your Metaobject Template that support dynamic sources.

Step 7: Click the Connect Dynamic Source button.

Step 8: Connect your dynamic sources and save the changes.

Add Metaobject data using Custom Section

To display Metaobjects in Shopify 2.0 using a custom section, follow these steps:

Step 1: Navigate to Online Store > Themes > Edit Code.

Step 2: Navigate to the Sections Folder and create a section named product-spec.liquid.

Step 3: Add the following code to your file.

    
        {% if product.metafields.custom.products_specs.value != blank %}
        <div class="product-specs-wrapper">
            
            {% for spec in product.metafields.custom.products_specs.value %}
            <div class="product-spec-card">
                
                {% if spec.image != blank %}
                <div class="product-spec-image">
                    <img src="{{ spec.image | image_url: width: 800 }}" alt="{{ spec.heading | escape }}">
                </div>
                {% endif %}

                {% if spec.heading != blank %}
                <h3 class="product-spec-heading">
                    {{ spec.heading }}
                </h3>
                {% endif %}

                {% if spec.text != blank %}
                <div class="product-spec-text">
                    {{ spec.text | metafield_tag }}
                </div>
                {% endif %}

                {% if spec.button_label != blank and spec.button_link != blank %}
                <a href="{{ spec.button_link }}" class="product-spec-btn">
                    {{ spec.button_label }}
                </a>
                {% endif %}

            </div>
            {% endfor %}

        </div>
        {% endif %}
        <style>
            .product-specs-wrapper {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
                margin-top: 40px;
            }
            .product-spec-card {
                border: 1px solid #eee;
                padding: 20px;
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            }
            .product-spec-image img {
                width: 100%;
                border-radius: 10px;
                margin-bottom: 15px;
            }
            .product-spec-heading {
                font-size: 20px;
                margin-bottom: 10px;
                font-weight: 600;
            }
            .product-spec-text {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 15px;
            }
            .product-spec-btn {
                display: inline-block;
                background: #000;
                color: #fff;
                padding: 10px 18px;
                border-radius: 6px;
                text-decoration: none;
                transition: 0.2s;
            }
            .product-spec-btn:hover {
                background: #333;
            }
        </style>
        {% schema %}
            {
                "name": "Product Specifications",
                "settings": [],
                "presets": [
                    {
                        "name": "Product Specifications"
                    }
                ]
            }
        {% endschema %}
    

Step 4: Save the changes.

Step 5: Navigate to Online Store > Themes > Customize.

Step 6: Navigate to the Product page from the dropdown. Click the Add Section button and select the section you created.

Step 7: Save the changes.

Also Read: Add Estimated Delivery Date For Shopify Via Custom Code

Final Thoughts on How to Add Metaobjects to Create a Custom Template in Shopify 2.0

Metaobjects unlock a cleaner, more scalable way to manage dynamic content in Shopify 2.0. Once set up correctly, they reduce duplication, simplify updates, and give you full control over how structured data appears across your store.

If you want help implementing metaobjects, building custom templates, or optimizing your Shopify store for performance and conversions, reach out to our Shopify development team. We’ll help you do it the right way from day one.