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

Note 🎶: This post is a work in progress and I will be adding more examples and use cases for MetaObjects over time.

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

  TBD

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 %}
  {{ testimonial.author.value }}
{% 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

  
  {{shop.metaobjects.sizing_chart_row.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

    Docs

  • metafiled_tag

    Docs