Recently our developers at HikeBranding came across an interesting requirement from one of our Shopify client. They planned to show some technical documents at different spots (like, same document would show up on single “Product page”, as well as on other “Static page” too). But they wanted to avoid multiple versions of file from existing within the website. So our developers initially faced some issues in getting different document for each product and to show those documents altogether on static page.
Finally, we were able to fulfill bit complicated but quite interesting requirement by Referencing Metaobjects which is one of the powerful features of Shopify that allow to add custom data to our store’s products, variants, customers and other entities. One of the key benefits of referencing metaobjects is the ability to create flexible and reusable code. In simple words, we just need to fill metaobject’s fields for once and it can be used repeatedly on different templates for different purposes. That’s what we did.
Our HikeBranding Developers will guide you step-by-step on how to create, manage and reference metaobjects with products.
Steps:
1) First log in to the Shopify admin panel with your Shopify account. Once you have logged in to your Shopify store, click on content -> metaobjects option from left panel.
2) Then click on “Add Definition”
3) Give a “Descriptive Name” for your Metaobject definition which will make it easier to identify in future. Here we have created metaobject named “Technical Document”. Then select the appropriate data type for the Metafield from the “Value type” dropdown menu and save it.
4) Now next, go back to home screen -> Content -> Metaobjects -> select metaobject name: “Technical Document” and click on “Add Entry”.
5) Fill up all created fields and save it.
6) First entry is created inside “technical Document” named metaobject. Here we can create number of entries as per need. We have created entry but not referenced it anywhere. In other words, not used for any product.
7) Now next important thing is how to connect created entry with reference product? Let’s see, how it’s possible.
- Go to Settings -> Custom data
- Then click on “Products”. We are going to create metafield for products to reference metaobject.
- Click on “Add Definition”
- Enter name of definition and select type “metaobjects”
- Must select metaobject name (here selected: “Technical Document”) before saving.
- Go to the Products -> Open any one product where you need to show “Technical Document” -> Select reference metaobject’s entry -> click on save.
- Now metaobject entry is connected with reference product, we can check it on Content -> Metaobjects -> open selected entry. Here we can see our metaobject entry is connected with which product.
8) Now if we open referenced product on store front, will it show metaobjects entry fields(technical documents) on fronted? The answer is NO. So for that we need to write liquid code by creating custom section. Then add custom-section on product template.
{%comment%}
Metaobjcet’s fields accessing via product metafield.
Here “select_entry” is product metafield and “product_name” & “data_sheet” are metaobject’s field
{% endcomment%}
{{product.metafields.custom.select_entry.value.product_name}}
{{product.metafields.custom.select_entry.value.data_sheet}}
- Copy your product metafield from Settings -> Custom data -> Product metafield
- Copy your metaobjcet’s field from Settings -> Custom data -> Metaobject Definition
Conclusion:
Referencing metaobjects offers developers a powerful tool for building flexible, reusable, and maintainable code. By leveraging this functionality, developers can implement complex design patterns, simplify code maintenance, and create more robust and extensible software systems. Hope this brief information by our HikeBranding developers was useful.
