Lauren Woodrick |
This will be blog series dedicated to “recipes” our team has developed using Shopify’s metaobjects and metafields to make the process of expanding and powering up your stores that much more delightful.
Metaobjects are the best thing to come to Shopify theme-crafting since sections everywhere, and our team is very much stoked on them. Shopify gives a lot to merchants out of the box where it comes to setting up a shop, but it’s difficult to be all things to all merchants and serve their unique marketing and customer service needs on the platform. As a Shopify Partner, Known Decimal is always down to help our clients retool their stores and processes to make their lives easier and move more product, and metaobjects (and their updated metafield cousins) help get the job done by allowing users to customize the core store elements they deal in most and create new ones that Shopify doesn’t directly address themselves.
So now, we present to you The Joy of Metaobjects — a series of recipes for Shopify custom data that our team has cooked up to inspire you on your own ecommerce journey.
We have some context around how metaobjects solved one particular Shopify issue for us and no childhood anecdotes or slices-of-life to dish out to you in this recipe blog (though I am taken back to those balmy summer days rolling out PHP templates in Nana’s kitchen…), but if you want to get right to the recipe…
Here at Known Decimal, we like to put our money where our mouth is and have used Shopify to host our website for a few years now. However, as an ecommerce vendor site and not an ecommerce site, we needed to set up content pages that had a reusable custom layout, but also allowed for someone who wasn’t Liquid-savvy to input text and imagery themselves. The setup methods Shopify provided out-of-the-box for setting up page templates were manageable… but not entirely palatable.
There was a tedious obligatory one template to page-with-complex-content ratio. A page would need to be created through Shopify Admin, pointing to a template file in the theme. Related schema sections would have to be watched carefully to prevent overwrite in source control.
Some of the pain had been removed further by allowing for uniting a unique page template with its JSON schema, but navigating in the customizer and making sure that no template toes were crushed in the process of setting up a new page was still a little daunting.
Rather than relying on the customizer to input specific types of content or burdening pages in general with overly-specific metafields, we create a purpose-made metaobject that encompasses all of the content that would have been inputted in the theme customizer and only need to be pointed to by its page in the Shopify admin.
Using this newfound flexibility, I made some updates to our case study template to streamline the process of creation and make it much easier to get other team members up to speed on setting up case studies on their own.
1 metaobject definition
Under the Custom data tab in the Shopify Admin settings, scroll to the Metaobject section and Add definition.
With our design already established, we identify what points of data we want to keep variable and create fields of the appropriate type for them.
Within the context of the case study design, most of our elements were covered by Single line text (both in One value and List of values), Rich text, and File (which we used to handle our case study images).
TIP: When creating your metaobject definition, Shopify will warn you about losing your changes if you navigate away from the page. This pertains to the entire metaobject definition, not to the most recently modified field, so save frequently when making your first iteration of your metaobject.
Once your definition is complete, Create entry within the Metaobjects section of the Content tab in the sidebar and set up your first metaobject entry.
While the single line text list isn’t easy to skim after creation, interacting with it will give you the option to view/add additional items (and even use drag-and-drop reordering)
1 page metafield
This metafield is what will link our case study pages with all of the data contained in their respective metaobject. Add definition to the Page metafield definitions within the Custom data settings in your store, and set the metafield type to “Metaobject” with the reference being your newly-minted metaobject
1 page
Navigate to the Pages section of the Online Store tab in the sidebar, and Add page. Once you add a title and save the page, you’ll have access to a Metaobjects section at the base of the page that will allow you to assign your metaobject entry to the page.
1 template file
In the templates directory of your theme, create a page template JSON file — which for us, will be templates/page.case-study.json. With us keeping all of the data that would otherwise be contained in our schema in our metaobject instead, the page template file is short, but sweet:
{
"sections": {
"main": {
"type": "case-study-content",
"settings": {
}
}
},
"order": [
"main"
]
}1 section file
In the section directory of your theme, create a Liquid file to contain your actual markup, which for us, will be sections/case-study-content.liquid. The section file is where most of the magic happens and where we reference all of the metaobject fields we previously created.
To access the content from our metaobject, we prepare a simple assign using the metafield associating it with its page. I use the meta object’s namespace for the sake of clarity:
{% assign case_study = page.metafields.custom.case_study.value %}Here, the final product comes together fairly quickly. Simple text elements require only their reference key and no filtering:
<h1 class="sectioned">Case Study. <span>{{ case_study.title }}</span>
</h1>If you’re using a list of values versus single value for your field, you can loop through the field’s contents accessing its value:
{% for deliverable in case_study.deliverables.value %}
<li>{{ deliverable }}</li>
{% endfor %}Rich text blocks can be displayed by using the metafield_tag filter
<p>{{ case_study.opening | metafield_tag }}</p>To use images, the field’s image value needs to be accessed first, then you can refer to the image’s properties like you would a standard image object:
<img class="large-image"
src="{{ case_study.primary_image.value.src | img_url:'485x'}}"
alt="{{ case_study.primary_image.value.alt }}"
width="485"
height="485"
loading="lazy">Return to the page you created earlier in Shopify Admin and assign it the template page.case_study. Now, when previewing the page, all of the content we set up in our metaobject entry is flowed into its respective home in the template! Making additional portions is simple enough, one only needs to prepare a new entry of the case study metaobject and refer to it using a new page’s metaobject-linking metafield.
Wondering what else is possible with metaobjects? Stay tuned for future recipes or reach out to us here or on social media.