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:
- Go to Settings > Custom data in your Shopify admin.
- Choose the resource type: Products, Variants, Collections, Pages, Blog posts, etc.
- Click Add definition.
- Name your metafield (e.g., “Size Guide”).
- Choose the correct content type (text, file, number, date, etc.).
- 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:
- Go to Online Store > Themes > Customize.
- Open the template (e.g., Product page).
- Add a text or image block where you want to display the content.
- Click the dynamic source icon next to the field.
- 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
- Create a File metafield called
size_guide
. - Upload a PDF for each product.
- 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 istrue
, 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!
Leave a Reply
You must be logged in to post a comment.