How to Display Product Metafields in Shopify Without an App

Shopify metafields make it possible to add extra information to products beyond the standard fields available in your Shopify Admin. Whether you want to display product specifications, material details, care instructions, size guides, or additional product information, metafields give you more flexibility when customizing your store.

The good news is that you don’t need to install a third-party app to display this information on your product pages.

Shopify already provides built-in metafield functionality, and with a little Liquid code, you can display custom product information directly inside your theme.

In this guide, we’ll explain how to create product metafields, display them using Shopify Liquid, and customize their appearance without relying on additional apps.

What Are Shopify Product Metafields?

Product metafields allow you to store additional information about your products that isn’t included in Shopify’s standard product fields.

For example, imagine you run a fashion store. Your products might need additional information such as:

• Material: 100% Organic Cotton
• Care instructions: Machine wash at 30°C
• Fit: Regular fit
• Fabric weight: 240 GSM
• Origin: Portugal

Instead of adding all this information directly to your product descriptions, you can create dedicated metafields for each piece of information.

This makes product data easier to manage and allows you to display information in different sections of your product pages.

1. Create Product Metafields in Shopify Admin

Before displaying metafields on your storefront, you need to define them in Shopify Admin.

Follow these steps:

1. Open your Shopify Admin.
2. Go to Settings → Custom data.
3. Select Products.
4. Click Add definition.
5. Enter a name for your metafield.
6. Choose a namespace and key.
7. Select the appropriate content type.
8. Save your metafield definition.

For example, let’s create a metafield for product material.

Your metafield will have the following namespace and key:

custom.material

You can repeat this process to create additional metafields for product specifications, dimensions, care instructions, and other information.

2. Add Values to Your Product Metafields

Creating a metafield definition doesn’t automatically populate your products with information. You need to add values individually.

To do this:

1. Go to Products in your Shopify Admin.
2. Open the product you want to edit.
3. Scroll down to the Metafields section.
4. Find the metafield you created.
5. Enter the corresponding value.
6. Save the product.

For example:

You can now use these values inside your Shopify theme.

3. Display Product Metafields Using Shopify Liquid

Now comes the interesting part. Shopify Liquid allows you to access product metafields directly through the product.metafields object.

For example, if you created a metafield with the namespace custom and key material, you can retrieve its value using:

{{ product.metafields.custom.material.value }}

The .value property returns the actual metafield value. You can add this code to the appropriate Liquid section or snippet in your Shopify theme.

Display a Single Product Metafield

If you want to display the product material on your product page, you can use:

{% if product.metafields.custom.material != blank %}
  <div class="product-material">
    <strong>Material:</strong>
    {{ product.metafields.custom.material.value }}
  </div>
{% endif %}

The conditional statement checks whether the metafield contains a value before displaying it. This is important because not every product will necessarily have the same information.

Display Multiple Product Metafields

You can also display several metafields together:

<div class="product-details">
  {% if product.metafields.custom.material != blank %}
    <p>
      <strong>Material:</strong>
      {{ product.metafields.custom.material.value }}
    </p>
  {% endif %}

  {% if product.metafields.custom.fit != blank %}
    <p>
      <strong>Fit:</strong>
      {{ product.metafields.custom.fit.value }}
    </p>
  {% endif %}

  {% if product.metafields.custom.origin != blank %}
    <p>
      <strong>Made in:</strong>
      {{ product.metafields.custom.origin.value }}
    </p>
  {% endif %}
</div>

This example displays product material, fit, and origin in one section. You can extend this approach with any additional product metafields you’ve created.

4. Style Your Product Metafields With CSS

Displaying metafields is only part of the process. You also want them to match your store’s design.

For example, you can turn your product information into a clean specification list. Add the following CSS to your theme stylesheet:

.product-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-details p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.product-details strong {
  font-weight: 600;
}

.product-details p:last-child {
  border-bottom: 0;
}

This creates a simple layout with labels on one side and metafield values on the other. You can customize the spacing, typography, borders, and colors to match your Shopify theme.

5. Display Metafields Using Shopify’s Theme Editor

If you don’t want to edit Liquid code, there’s another option. Many Shopify themes support dynamic sources, allowing you to connect product metafields directly to supported theme settings through the Shopify Theme Editor.

Here’s how:

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Open a product template.
4. Add a supported section or block, such as a text block.
5. Find the dynamic source icon next to the relevant setting.
6. Select the metafield you want to display.
7. Save your changes.

The metafield will now populate dynamically based on the product being viewed. For example, you can connect a text block to your product’s material metafield.

This is particularly useful if you want to make simple product page customizations without touching theme code.

6. Display Different Metafield Types

Shopify metafields support several content types, and the way you display them depends on the type of information you’re storing.

Here are some common examples.

Single-Line Text

Useful for product materials, brands, colors, and short specifications.

{{ product.metafields.custom.material.value }}

Multi-Line Text

Useful for longer descriptions, product instructions, and additional information.

{{ product.metafields.custom.care_instructions.value | newline_to_br }}

Boolean

Useful for displaying product features such as water resistance or handmade status.

{% if product.metafields.custom.waterproof.value %}
  <p>Waterproof: Yes</p>
{% endif %}

Number

Useful for product specifications such as weight or dimensions.

{{ product.metafields.custom.weight.value }}

Rich Text

Useful when you want to store formatted content with paragraphs, lists, and links.

{% if product.metafields.custom.additional_info != blank %}
  <div class="product-additional-info">
    {{ product.metafields.custom.additional_info | metafield_tag }}
  </div>
{% endif %}

For rich text metafields, metafield_tag is useful because it renders the formatted content using the appropriate HTML elements.

7. Common Problems When Displaying Shopify Metafields

If your metafields aren’t appearing on your product pages, there are a few things worth checking.

The metafield isn’t displaying anything

Make sure you’ve added a value to the metafield for the specific product you’re viewing. Creating a definition alone doesn’t populate product data.

The namespace or key is incorrect

Check the metafield definition in Shopify Admin. The namespace and key in your Liquid code must match the definition exactly.

You’re displaying the wrong value format

Some metafield types require special handling. For example, rich text metafields should generally use metafield_tag, while reference metafields require accessing their referenced resources.

The changes aren’t visible on your storefront

Make sure you’re editing the correct theme and product template. Also check whether your theme has cached or conditionally rendered content.

Final Thoughts

Shopify product metafields are a powerful way to extend your product pages without installing additional apps.

By creating custom metafield definitions and accessing their values through Liquid, you can display product specifications, materials, care instructions, and other useful information directly inside your theme.

For simple customizations, Shopify’s dynamic sources can also help you connect metafields through the Theme Editor without writing code.

Whether you’re running a fashion store, electronics business, furniture shop, or beauty brand, metafields give you more control over how product information is organized and displayed.

The best part? You can build all of this using Shopify’s built-in functionality, keeping your store flexible without adding unnecessary apps.

Frequently Asked Questions

Can I display Shopify product metafields without an app?

Yes. Shopify supports metafields natively. You can display them using Liquid code in your theme or connect them to compatible theme settings through dynamic sources.

How do I access product metafields in Shopify Liquid?

You can access product metafields through the product.metafields object. For example, product.metafields.custom.material.value retrieves the value of a metafield with the namespace custom and key material.

Can I display metafields on specific products only?

Yes. You can use Liquid conditional statements to check whether a metafield has a value before displaying it. This allows you to show additional information only on products that have the relevant data.

Do Shopify metafields affect website performance?

Metafields are part of Shopify’s native platform functionality. Displaying a few metafield values through Liquid generally doesn’t require additional JavaScript or third-party app requests.

Can I use metafields to create custom product tabs?

Yes. You can create metafields for product descriptions, materials, specifications, and other content, then use Liquid to display them inside custom product tabs or collapsible sections.

Can I display metafields on collection pages?

Yes. Inside a product loop on a collection template, you can access each product’s metafields using the product.metafields object for that product.