Introduced in Shopify's Summer 23 Edition, metaobject templates allow merchants to create unique pages that display custom content based on metaobject entries. These new page types make it easier for merchants to surface metaobject data on their online store, and quickly build landing pages for metaobjects, like store location pages, brand profiles, and more, that follow a consistent structure.
Once these templates are set up to reference dynamic sources and metafields, merchants can add the pages to their navigation or reference them in promotions. To make it easier for customers to access these pages, merchants might also want to list links to metaobject-powered pages on a specific index page on their store.
In this blog post we'll explore how you can create these index pages using Liquid to generate dynamic links for each entry of a metaobject. This approach will enable you to create robust index pages for metaobject templates, and help you understand how to access different types of metaobject data with Liquid.
Benefits of using Liquid to display dynamic content
Once a metaobject template is created, each entry is assigned a unique URL for its iteration of the metaobject template. While you could create an index page by hardcoding these URLs as targets for links, any change to the entry handle would break the link, and when more entries are added to the metaobject, you'd need to manually update the index page.
A much more reliable approach to displaying links to metaobject-powered pages is to use Liquid to generate relative URLs and structure links with the data that Liquid outputs. You can also loop over metaobjects, so all URLs can be generated within one for loop.
Liquid has a range of objects and filters that allow you to construct URLs based on store data, which you can combine with HTML elements to output functional links. By leveraging Liquid's features to display content you can ensure a dynamic and updated displayand also set up a future-proofed developer workflow.
Building metaobject link URLs with Liquid
The very first step in this process is to create an alternative page template in our theme that will only be used for an index list for a specific metaobject. You can replicate the existing structure of your page template; for example if the template includes a main page section, you can follow this structure.
For this scenario, I've set up a metaobject definition of “chef” that has entries of chefs that cook products on my store. So I will call this new page template "page.chef-index.json", but you can give it a title that makes most sense for your use case.
Next you'll create a new static section, which is where we'll add the Liquid and HTML that will output the list of pages associated with a metaobject. I'll name this section "chef-index.liquid." Once the section is created, you can add the following for loop, replacing the metaobject definition of "chef" with your own definition:
This for loop iterates over all the values of the chef metaobject (note that "chef" is just an example name, and should be replaced with your own metaobject definition), and provides access to the entry data as set up in the admin.
An important Liquid object in the above snippet is metaobject.system which allows you to access various properties of a metaobject, including its URL path (as long as that metaobject has online_store capability). You can learn more about this object and other use cases in our developer documentation.
In the above snippet, the metaobject.name serves as the link text, while metaobject.system.url provides the relative URL. These objects can be combined with the link_to Liquid filter to generate a full link element with HTML link tags for each metaobject entry.
By default Liquid loops will return the first 50 items, so if you anticipate that a merchant will have more than 50 metaobject pages, you can implement pagination. This also gives you more control over how many items are returned, if you want to organize the index with a specific number of links on each page.
You can use the paginate tag to define how many items will appear on each page, and the paginate object can be included with the default_pagination filter to generate the necessary HTML elements for pagination links. Once implemented, your code will look like this:
Now, when there are over 25 links to metaobject pages, the pagination will be triggered and the additional links will be accessible on the next page. In this example I've used 25, but you can use any number up to 50.
Now that you've populated this section with this Liquid for loop you can assign the section to the custom page template created earlier. An example of how this could look:
Finally we can test if it's working correctly by navigating to your store's Admin > Online Store > Pages, to create a new page and apply the new page template:
Now, when you view the page, you should see links to each metaobject page appearing:
Once you've confirmed that the links are working correctly, you can improve the appearance of the section by adding layout elements and applying CSS. To keep the look and feel consistent with your storefront, you can leverage the existing style rules for containers and text.
Expanding possibilities with metaobjects
This tutorial is just one example of how custom data and metaobject templates can open up new opportunities for developers to add value to clients with customisations. To learn more on how Liquid and metaobjects can unlock functionality for your online store be sure to check out our developer documentation.
