Code Shopify About

Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Sign up for Shopify

Complete Guide to using MetaObjects in Shopify (WIP)

Thursday, Nov 09, 2023

What is a MetaObject

MetaObjects are in essence a group of Metafields. Metafields are different kinds of extra content that can be added to a shop. For example metafields could be a string or a product or an image. The MetaObject could be those 3 Metafields grouped together.

Why would we want to group our Metafields into Metaobject?

  • Organization

    Have a couple of Metafields on a product isn't too bad, but when you get into having 30 or 40 it can get chaotic (and I have clients with that many for sure). Being able to combine the metafields into meaningful group will definitely make it easier to manage over time.

  • Reusability

    Instances of MetaObjects can be reused around the shop on different objects such as a product or a blog post or a page. If strategized properly, this can really save a lot of data input over time.

How do MetaObjects interact with Metafields

  • MetaObjects are made up of Metafields

    MetaObjects consist of multiple different fields that pretty much line up with what is available in Metafields (ie product, image, color etc).

  • Metafields connect MetaObects to other Objects

    MetaObjects are objects in their own right. Metafields are always connected to a different object (ie product, page, blog post). In order for a MetaObject to connect to another object (like a product or collection), you need to create a Metafield that references the specific MetaObject instance. This also means you can reference that MetaObject instance via multiple different Metafields on different kinds of other objects.

MetaObject use cases

  • Product Page

    The product page is my favourite place to use MetaObjects. There's so many ways to use them. An extra product lifestyle image gallery, icons that show unique features of each product.

    For the case of icons for unique features, you can use a MetaObject to store each feature icon, title and text. Then reuse those if the feature is the same on multiple products. If you create a metafield that is a list of metaobjects, you can add varying number of features for each product as well!

  • Blog Posts

    A quick way to increase sales on Blog Posts is to list products related to that blog post. Creating a MetaObject that hooks up to a carousel of products for each post is a great way to do this.

  • Reusable components

    You may have a sales banner that you'd like on multiple pages of your shop. Create a MetaObject with all the info and connect it to different pages, products, collections. If you need to make an update, you now only need to change the info in 1 place 🎉.

  • MetaObject Templates


MetaObject Anatomy

MetaObject System

I would describe this as the metadata from the MetaObject, but this seems too confusing - which is why I think they called it system 🤣.

Check out the Docs

Access the info in liquid:

{{ shop.metaobjects[metaojbect][instance].system.url }}

Information available:

  • Handle
  • Id
  • Type
  • Url

MetaObject Definition

This is the structure of the MetaObject. The information you can get here is the Values with an 's'. These values are the MetaObject instances and you can loop through them.

Check out the Docs

{% for testimonial in shop.metaobjects.testimonials.values %}
  {{ }}
{% endfor %}

MetaObject Instance

This is the individual specific MetaObject.

How to access MetaObjects

Access the actual metaobject from the shop by type and handle. Likely this won't be the way you're actually access it, but it's here if need be.

{{ shop.metaobjects.type.handle }}
  • Value

    When in doubt, probably try putting value on the end of things haha 😂.

    {% assign prod_ref = product.metafields.custom.product_ref.value %}

    The above code returns a MetaObjectDropMetaObjectDrop. You can then use this MetaObjectDrop to access the fields on the MetaObject. You can do it all in shot, but it gets long and confusing to look at.

    {{ prod_ref.product.value.title }}
  • Values


    The above code returns MetaobjectValuesDrop, which is a list of the metaobjects associated with that MetaObject definition. From there you could use a for in loop to loop over each object and get the values.

    However, it seems that if you have a list of MetaObjects coming from a Metafield, you'd still use Value singular

    {{ product.metafields.custom.size_chart.value }}

    This returns a MetaobjectListDrop and then you'd loop over that.

  • Filters

    The Metafield filters help when displaying metafield info in a user friendly way (especially when it comes to Richtext). Each type of Metafield returns a specific type of info so I've link the docs.

    As an example the image below show how each system returns a single line text list.

    • metafiled_text

    • metafiled_tag

more posts