James Leah avatar
Categories:

Subscribe:
RSS
Email

How to Use Shopify Metafields to Display Custom Content on Your Store (2025 Guide)

If you’ve ever wanted to add extra content to your Shopify store that doesn’t fit into the default fields, Shopify metafields are your solution. Metafields let you store and display custom information anywhere on your store, making your product pages more engaging and informative.

In this guide, we’ll cover:

  • What Shopify metafields are
  • How to create metafields in Shopify
  • How to display metafields on product pages and other templates
  • Examples of Shopify metafield use cases

What Are Shopify Metafields?

Shopify metafields are custom fields that let you add additional content to your store beyond the standard options like title, description, and price. They’re ideal for adding structured data such as:

  • Size guides and care instructions
  • Ingredients or technical specifications
  • Downloadable files and manuals
  • Additional images or marketing badges

Using metafields improves SEO and helps you create more detailed and unique content on your product pages.


How to Create Shopify Metafields

Follow these steps to create metafields directly in the Shopify admin:

  1. Go to Settings > Custom data in your Shopify admin.
  2. Choose the resource type: Products, Variants, Collections, Pages, Blog posts, etc.
  3. Click Add definition.
  4. Name your metafield (e.g., “Size Guide”).
  5. Choose the correct content type (text, file, number, date, etc.).
  6. Save your definition.

Once created, the metafield will appear at the bottom of your resource editing page.


How to Display Shopify Metafields on Your Store

There are two main ways to display metafield content on your Shopify storefront:


1. Use Shopify 2.0 Themes with Dynamic Sources (No Code)

If your theme supports Online Store 2.0:

  1. Go to Online Store > Themes > Customize.
  2. Open the template (e.g., Product page).
  3. Add a text or image block where you want to display the content.
  4. Click the dynamic source icon next to the field.
  5. Select your metafield.

This no-code option is ideal for store owners and marketers.

2. Use Liquid Code (Advanced)

For more control, you can use Liquid to output metafield values:

{{ product.metafields.custom.size_guide }}

Replace custom with your namespace and size_guide with your key.

You can place this snippet in main-product.liquid, product.json, or other theme files.

Shopify Metafields Examples

Here are three practical ways to enhance your product pages with metafields:

Example 1: Display a Size Guide PDF

  1. Create a File metafield called size_guide.
  2. Upload a PDF for each product.
  3. Add this code:
{% if product.metafields.custom.size_guide %}
  <a href="{{ product.metafields.custom.size_guide | file_url }}" target="_blank">
    View Size Guide
  </a>
{% endif %}

Example 2: Show Care Instructions

  • Create a multi-line text metafield.
  • Display it under a “Care Instructions” heading in your product template.

Great! You can handle that scenario in Shopify using Liquid and a boolean metafield.

Here’s an example of how you can conditionally show a “Click to Call” button instead of the “Add to Cart” button if a metafield called NotSold is set to true.

Example: Use a NotSold Metafield to Change the Call to Action

Step 1: Create the Metafield

In Shopify Admin > Settings > Custom data > Products, create a boolean metafield:

  • Name: Not Sold
  • Namespace and key: custom.notsold
  • Type: Boolean

Set it to true for products that should not be sold online.

Step 2: Update Your Product Template with Liquid

In your main-product.liquid (or equivalent template), replace your Add to Cart button section with something like this:

{% if product.metafields.custom.notsold == true %}
  <a href="tel:+1234567890" class="btn btn-primary">
    Call to Order
  </a>
{% else %}
  <button type="submit" name="add" class="btn btn-primary">
    Add to Cart
  </button>
{% endif %}

How This Works

  • If the custom.notsold metafield is true, the template displays a phone call link instead of the Add to Cart button.
  • Otherwise, it shows the normal Add to Cart button.

Optional: Make the Phone Number a Dynamic Metafield

You could even create another metafield called custom.phone_number and output that dynamically:

{% if product.metafields.custom.notsold == true %}
  <a href="tel:{{ product.metafields.custom.phone_number }}" class="btn btn-primary">
    Call to Order
  </a>
{% else %}
  <button type="submit" name="add" class="btn btn-primary">
    Add to Cart
  </button>
{% endif %}

This way, different products could have different contact numbers.

Why Shopify Metafields Are Important

  • Boost SEO: Add unique, keyword-rich content.
  • Improve User Experience: Provide detailed, relevant product information.
  • Flexible: Customize product, collection, and page layouts without installing extra apps.

Conclusion

Shopify metafields give you powerful tools to customize your store’s content and enhance SEO. Whether you use the drag-and-drop editor or Liquid code, metafields can transform your store into a more dynamic, content-rich experience.

Start small: add a size guide or care instructions, then expand as your store grows.

Have you started using Shopify metafields yet? Share your favorite use case in the comments!

Last modified:

Join in and subscribe

Follow my blog via RSS, or get the inside scoop by joining my email newsletter.

Comments

Leave a Reply

Web Mentions

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again.

Search the website



Popular Categories