Using Metafields in your Shopify Theme

Metafields can enhance the user experience in your online store, by associating with various resources and then displayed on individual pages. You can add and store additional information such as products and collections, and online store owners can expand on the core fields and open up a new content type and personalization onto a page. Metafields are created directly into the Shopify Admin and can link directly from the Theme Editor with dynamic sources.

What are Metafields

This is a step up from Shopify Custom fields, developers would be familiar with this content type, and supports objects like URLs, Images, text, and measurement values. When it is defined, store owners can select which content type is accepted before associating product collections or other resources. During Theme development, prior to developing it might be best to evaluate the metafields types and how they can apply and unlock the merchandising value within your theme. The metafields use cases can have dates assigned for sales, associating images for specific collections, listing measurements for product information, product ratings, and a variety of additional information. This can make your product template rich with product information. Metafields structure in Shopify Themes or Shopify Apps require a "namespace" and a "key". The "namespace" is the group that the metafield will associate with, where the "key" is the specific metafield name.

Metafields in Shopify Liquid

Within Shopify Themes, metafields can be accessed as Shopify Liquid objects by wrapping the full definition in "{}" like a normal Shopify Liquid object along with the value. If you add "{}" to a main product.liquid section you can output the value of the instruction for the current product, adding custom-rich content flexibility to your storefront. With this additional flexibility, you can present your product in flexible ways using usability testing or user research to show different visual designs, and value proposition layouts to feel out users and their user experience.

Dynamic Sources explained

The data store is linked as a metafield to the section input setting and performed by the Dynamic Source. This gives store owners the ability to add metafields to pages in the Theme Editor. Once a metafield is created for a specific resource in the Shopify Admin it can then be accessed as a dynamic source from the Theme Editor. When a Text Metafield created for a product or service can be accessed as a Dynamic Source from a text input field within a section of the product page. An Add Dynamic Source icon will be displayed on "settings" when Dynamic Sources are accessible. Dynamic Sources availability is only accessed on product and collection pages which are rendered in JSON page templates. With data added to the JSON template once the Dynamic Source is applied. Aside from the Product and Collection pages, Dynamic Sources can be accessed on additional pages, via sections that render products/collections such as a "Featured Product" section on the home page.

Theme Developers and Metafields

We can leverage metafields and dynamic sources by designing the sections and blocks that can contain ample input settings that store owners can apply dynamic sources to - following the Shopify order of hierarchy. Developers should create these sections, with the correct sectional blocks and have the store owners be able to enter their content/text to define their metafields accordingly.

Dynamic source placeholders can also be inserted into the section settings in order to have store owners have input on custom content that can be applied to the page components. In other words, where you can apply Dynamic sources, have them made available so that the marketing team or the store owner knows where to apply them.

Some of the store data properties such as Product Title and Product Vendor are also accessible as Dynamic sources when applied to input settings without having to create metafields from the Shopify Admin.

Conclusion

In today's Shopify data structure, Metafields is an important component for data association. It ties together content, and product and they have even been used in Enterprise Resource Planning (ERP) API exchanges - all of which drive the user experience for your target audience, and even internal management. If you would like to better understand this feature or would like to see how you can take advantage of the feature in your online store, feel free to reach out to us at wish@thegenielab.com