Shopify Editions Winter ‘23 revealed over 200 product updates on Shopify, one of which being Metaobjects. A year prior, Shopify released Metafields which was one of the most valuable updates to store merchants.
What are Shopify Metafields?
Metafields allow you to add custom data to products, variants, collections, customers, blogs, blog posts and more. By default, when viewing to the product editor, there are set fields to input information into. Metafields allow us to create additional, custom fields to input more information that can then be used and displayed on the product page inside of sections. For example, if you wanted to add a product's ingredients, materials or washing instructions, you could create a metafield to hold this information. Metafields can hold text, images, files, colors, or any other type of file. The possibilities are endless and metafields have been instrumental in leveling up Shopify stores in the past year.
Previously, to include custom information like this, you could use a metafields app to manage this information and then custom code sections to include metafield values. Metafields were inaccessible to non-technical store owners and designers who were unable to code with Liquid. If you have yet to explore metafields, they can be accessed in the Shopify Admin under Settings > Custom data. To learn more about Metafields before diving into Metaobjects, read our blog post, What are Shopify Metafields (and how to use them).
What are Shopify Metaobjects?
A metaobject is a group of metafields that can be reused in multiple places across the site, with one central place to make updates. They are reusable blocks of custom content.
Problem:
Imagine that you have a store selling art prints from different artists. On the product page, you want to have a section that showcases the artist. Previously, you’ve set up metafields to populate this section with the artist’s name, bio, photo and website. You had to enter information for these four fields for each individual product. When making an update to the artist’s bio, you had to make this edit several times, going through each product that needed the update. It was time consuming to input the data and to make changes to it.
Solution:
In come metaobjects to save you from this tedious process. You can now create a metaobject called “Artist”. Inside this metaobject, you create the four fields of information that you want to display (artist’s name, bio, photo and website). Now your metaobject definition has been created. It’s time to create your entries. You create an entry for each artist that will be featured on the site, filling out their name, bio, photo and website, in only one place. This metaobject entry will become a reusable piece of content that is a centralized place to change details only once, rather than needing to edit four fields on each product. Soon enough you have added 20 entries, or 20 artists that you can use across your products.
We're going to stick with imagining this store that sells art prints for the rest of the article, so keep it in mind.
How to Create Metaobjects
In the Shopify Admin in the left sidebar, go to Content > Metaobjects. Click Add definition.
Set up the details and fields for the metaobject by giving the object a name that describes what you'll use the content for, and adding all the fields that should collect the information you want displayed. Each of these fields become form fields that collect the details you need to populate a page section, and all these fields and definitions are what make up the metaobject. Click save.
Once you have saved the metaobject, and go back to the Metaobjects page, you’re prompted to add an entry. Click Add entry and select the definition that you'd like to add an entry to.
This will create your first piece of reusable content. Fill out the details and data for different fields and save the entry. Do this for each entry (or each Artist in the example above) that you’d like to save. When you click Add entry again, it will prompt you to select which metaobject you’d like to create an entry for. You can also filter your entries by metaobject. Now you have created reusable content that can be displayed on the front end.
The final step is to attach the metaobject entries to products. To do this, we need to use metafields and metaobjects together to attach the information. Go to Settings > Custom data. In the case of the artists, I’ll create Product metafield called “Artist Bio”. I’ll go to Products > Add definition > fill the details, and Select Type. Scroll down to the Reference heading, select Metaobject and choose the Artist Feature Metaobject definition, and Save. This tells the metafield to use the data from the "Artist Feature" metaobject.
Finally, go into the product editor, scroll down to the metafields and edit the metafield you’ve just created. Since you've already linked the specific Metaobject definition, it will prompt you to Select entry. Select the entry that you’d like to attach to that product. Now you’ve attached the four pieces of Artist information with one selection. Repeat this for all products, assigning a specific entry to each product.
How to Use Metaobjects in Your Theme
You can use metaobject information in your theme sections the same way you use metafield information. Add the desired section to a page, and you need to assign the metaobject entry data to each different part of the section. Click on the “heading” setting for example. Delete the default data, and click the “Connect dynamic source” button.
Select Product > Metaobject > the field you want. Note that the available fields shown to you depend on the input type. It will only show you the field types that match the setting input type. When you’ve made your selection, Shopify will use your first entry to preview the section, but after saving, this information will be dynamic so that each product is displaying the correct information. Now you’ve connected the dynamic source to the section content.
Metaobjects are accessible from theme sections globally on the store, or from the theme code using Liquid when creating logic-based content that displays when different conditions are met.
To summarize, there are 4 steps to using metaobjects:
- Create the metaobject & entries.
- Create metafield that links the metaobject definition.
- Populate products with metaobject entries.
- Populate page section with metaobject data.
How to Use Metaobjects with Liquid Code
If you want to take your designs a step further and need to hard code metafields into your theme rather than using the dynamic source button, you can do that too!
Loop through metaobjects
Let's say you want to create a page that lists all the Artist entries that you've created:
1. In the theme code, create a new section file called "artist-list.liquid". Inside this file, start with the schema code so that you're able to add this section to a page template:
2. Above the schema, add the following Liquid code. This code loops through the artist_feature metaobject, and displays the information from each entry:
3. From the Theme Editor, create a page template called "Artist List", and add the "Artist List" section to the page. Click save. Now the information from all the Artist entries should be showing.
4. Add HTML and CSS to create the layout
Access metaobjects on a page
Once that's done, let's say you want to create an entire page for each artist, and display the same information on each page.
Update as of July 26, 2023: Now you can create Metaobject page templates. These resuable page layouts allow you to easily build out a related set of pages. For example, a page for each ingredient or product artist. To create a metaobject template, go to the theme editor and from the top dropdown menu click "Create metaobject template", confirm the search engine listing details, customize the page with the needed sections and link the metafield content to each field. Like this you'll automatically have pages created populated with your metaobject content.
If you prefer to do this in the code instead for some reason, there are a few steps to be taken:
1. Create a Page Metafield. Go to Settings > Custom data > Products > Add definition. Name the metafield "Artist Entry", under Type select Metaobject, and under Reference select the Artist Feature metaobject.
2. Create a page for each artist that you want a showcase page for, scroll to the bottom to the "Metafields" section, click "Show all" and connect the corresponding metafield entry to each page.
3. In the theme code, create a new section called "artist-feature.liquid". Start with the schema code so that you're able to add the section to a page:
Above the schema, add Liquid code that references the metaobject entry that is assigned to the page:
4. From the Theme Editor, create a page template called "Artist Feature", and add the "Artist Feature" section to the page and save.
5. Return to your list of pages, and connect each page to the "artist feature" page template. Click Save, then click "view page" and you'll be able to see the page displaying the information from the matching Artist entry.
Your new page template will now display information for the Artist (or metaobject entry) that the page metafield has assigned to the page.
Benefits of Metaobjects
Metaobjects were created to solve real problems that stores were facing, so let’s look at the main benefits:
- Avoid entering repetitive information into different metafields. Reuse the same information across items.
- Make changes or update information in one place, and display changes across all instances automatically.
- Effortlessly make site-wide changes quickly across the site
- Increased efficiency allows for saved time, faster launches and more frequent site updates
- No custom code required to group content together.
Metaobjects open up a new world of custom content. So, what are some things we can do with this new tool?
Ideas for how to use Metaobjects
With the Artist example we've been working through, the next thing I'd do is create collection page banners for each artist's collection using metaobjects. Here are some other ideas of what metaobjects can be used for:
- Information about vendor / designer / collaborator
- FAQs for different products
- Size charts for different types of products
- Product bundles
- Cart upsells
- Feature testimonials
- Feature product highlights, materials or key ingredients
- Collection banners
- Influencer-created content
- Product information depending on the collection
- Display blog author bio
- Shoppable gallery
With each of these examples, you can craft new ideas, populate the assets needed for launch, and seamlessly launch new sections without needing to create new theme versions.
Conclusion
Metaobjects allow us to capture content in one centralized place so that we no longer need to repetitively make changes across products. While metafields are attached to a single product, variant, collection, etc., a metaobject can can store more complex groups of data.
Now that the full span of metafields have been released (functionality extended to collections, blogs, articles and more), it will be very exciting to see how brands make use of this new feature to streamline their store building.
While Shopify is still lacking some documentation and examples of how to use Metaobjects, I hope this article has given you enough information to implement metaobjects, and inspired to you see how they can be used in your store. Let me know in the comments below, how do you plan on using metaobjects in your store design?
*Note, if you are a Partner accessing a client’s store and seeing that you cannot click on the Metaobjects page, you need to ask your client to give you permission to access this area under Settings > Users and permissions.
Hana Drdla
