How to Render Shopify Metafield in Shopify Theme

Metafields in Shopify allow merchants to store and display additional custom data in their themes. Here’s how you can retrieve and render metafield values using Shopify Liquid.

1. Adding a Metafield to a Product

Before displaying a metafield, ensure it exists. You can create a metafield using Shopify Admin or the Shopify API.

Using Shopify Admin:

Navigate to Settings → Custom data → Products.
Click Add definition and enter:
- Namespace: custom
- Key: extra_info
- Type: Single line text
Save and add a value to a product.

2. Rendering Metafields in a Shopify Theme

Insert the following Liquid code where you want to display the metafield:

{% if product.metafields.custom.extra_info %}
  <p>{{ product.metafields.custom.extra_info }}</p>
{% else %}
  <p>No extra information available.</p>
{% endif %}

3. Displaying Metafields in Other Resources

For collections:

{{ collection.metafields.custom.extra_info }}

For pages:

{{ page.metafields.custom.extra_info }}

4. Using Metafields in JSON Templates

In a product.json template, define a dynamic source:

{
  "type": "text",
  "id": "extra_info",
  "label": "Extra Info",
  "default": ""
}

Then reference it in Liquid:

{{ section.settings.extra_info }}

Conclusion

Shopify metafields offer a powerful way to extend theme customization. Use them to store and display additional product, collection, or page information dynamically.