How to Use Shopify Metaobjects in Shopify Themes and Liquid

Hey everyone! Today, we'll be diving deep into Shopify's Metaobjects—what they are, how they differ from Metafields, and when to use each. Plus, I’ll walk you through two real-world examples, one where you’ll only use the Shopify Theme customizer and another using Liquid in your theme files. Trust me, this one's gonna be fun, so let’s get started!

‍

What Are Metaobjects?

Metaobjects were introduced in Shopify’s Winter Editions 2023, and they offer a powerful way to store and manage custom data models across your store. Sounds fancy, right? But let’s break it down.

Say you run a fashion store, and you want to create a directory of designers you work with. Each designer has a name, bio, profile image, and website link. But here’s the problem—Shopify doesn’t have a default data model for designers! They’re not products, blog posts, or pages, so where do you store this info?

This is where Metaobjects come in. They let you create custom objects with custom fields to store structured data. In our case, we can create a Designer Metaobject with fields for the name, description, image, and URL. Once set up, we can add as many designers as we want and use this data dynamically throughout our store!

‍

Metaobjects vs. Metafields: What’s the Difference?

If you’ve been around Shopify for a while, you’ve probably used Metafields to add extra data to products, orders, or customers. So how do Metaobjects compare?

Here’s where things get really cool: You can combine Metaobjects with Metafields by referencing a Metaobject inside a Metafield. Let’s see this in action with our fashion store example.

‍

Example 1: Linking Designers to Products (No Code Needed)

Let’s say we want to show the designer info on our product pages, like:

🛍️ "This product was designed by [Designer Name]"

Instead of adding separate Metafields for the designer’s name, bio, image, and URL on every product (which would be a nightmare to manage), we can do this:

1. Create a Designer Metaobject
   
   • Head to Content → Metaobjects
     
   • Click Add Definition and name it "Designer"
     
   • Add these fields: Name (text), Bio (multi-line text), Image (file), Website (URL)
     
   • Save it 🎉
     
2. Add Designer Entries
   
   • Go back to Metaobjects and click Add Entry
     
   • Fill in details for a few designers
     
   • Save ✅
     
3. Create a Metafield on Products
   
   • Go to Settings → Custom Data → Products
     
   • Click Add Definition → Name it "Designer"
     
   • Set the type to Reference → Metaobject and choose "Designer"
     
   • Save it ✅
     
4. Assign Designers to Products
   
   • Go to a Product Page in your admin
     
   • Scroll down to Metafields and assign a designer from your Metaobject
     
   • Save & done! 🎉
     
5. Display the Designer in Shopify Customizer
   
   • Open the Customizer (Online Store → Customize)
     
   • If you’re using Dawn, add a new "Image with Text" section
     
   • Use Dynamic Sources to pull the designer’s photo, name, bio, and website
     
   • Save & publish 🚀
     

Now, every time you update a designer’s Metaobject, it updates across all linked products automatically! How cool is that?

‍

Example 2: Creating a Designer Directory Page (Using Liquid Code)

Now let’s take it a step further. We’ll create an overview page that lists all our designers.

1. Create a New Page
   
   • Go to Online Store → Pages → Add Page
     
   • Name it "Designers" and save
     
2. Add a New Section in Theme Code
   
   • Go to Online Store → Themes → Edit Code
     
   • In Sections, click Add New Section, name it "designers", and paste this:
     

{% for designer in shop.metaobjects.designer.values %}
  <div class="designer-card">
    <img src="{{ designer.photo | image_url: width: 500 }}" alt="{{ designer.name }}">
    <h3>{{ designer.name }}</h3>
    <p>{{ designer.description }}</p>
    <a href="{{ designer.website }}">See More</a>
  </div>
{% endfor %}‍

{% schema %}
  {  
  "name": "Designers List",
  "tag": "section",
  "class": "designers-section",
  "presets": [
    {
    "name": "Designers List"
    }
  ]
  }‍
{% endschema %}

3. Link the Section to Your Page
   
   • Open Customize in Shopify
     
   • Add the new Designer Section to the "Designers" page
     
   • Save & Publish 🎉
     

And just like that, we’ve built a dynamic directory that updates automatically whenever we add new designers!

‍

Final Thoughts

We covered a lot, but I hope you now have a solid grasp of just how powerful Shopify’s Metaobjects can be! We've covered:

• Metaobjects
• How metaobjects differ from metafields
• Creating custom data models with Metaobjects
• Using Metafields to link products to designers metaobjects
• Built a no-code designer section with Dynamic Sources and
• Built a Liquid-powered directory page for all designers

I hope this guide gave you a solid understanding of Shopify Metaobjects and how to use them effectively. Whether you're linking custom data to products or building dynamic pages, Metaobjects open up a whole new level of flexibility for your Shopify store.

That is all from me! Happy coding, be sure to check out the resources in the blog for more tutorials, and I'll see you in the next one! 🚀