How To Use Metafields When Designing Shopify Themes

Becoming a Shopify developer means getting used to a lot of new tools and terms in your day-to-day career. While some concepts are unique to Shopify, like the Liquid programming language and Shopify “Theme Gem”, others are common in virtually all elements of web design.

Metafields are a component of the Shopify landscape which allow developers to customize the functionality and appearance of stores on a deeper level. Essentially, they allow you to save specialized information into the store structure not usually captured by the Shopify admin. 

Developers can use metafields for internal tracking purposes, or as a way of displaying specialized information. For instance, you could use a metafield to tell your audience where each product on a food store was originally produced. 

Let’s take a closer look at the elements involved in using metafields within Shopify themes.

What are Metafields in Shopify Themes?

The goal of any Shopify developer should always be to empower clients to showcase their brand as effectively as possible, without compromising on ease of use for end customers. 

No matter which development trends you embrace during your career, you should always be working to balance exceptional flexibility with simplicity. Part of achieving the best results on Shopify is knowing which features to leverage when you’re customizing and building themes. 

Metafields are tools within the Shopify ecosystem you can edit using your Shopify theme editor (provided you have an online store 2.0 theme). They represent data associated with specific resources, and can be displayed on individual pages. 

Essentially, metafields allow you to add extra information about Shopify resources on a store like collections and products, to make the shopping experience more engaging for end users. 

Metafields can be created directly within the Shopify admin, and can be linked to from the theme editor using dynamic sources. 

Exploring the Types of Metafields

With Shopify metafields, you can go beyond the basic custom fields most developers would be familiar with, and support everything from URLs and text, to images, and measurement values. When you create a new metafield definition, you can also select what content type will be accepted, before setting values for each resource. 

Notably, when you’re building a Shopify theme, it’s worth taking some time to explore all of the different types of metafields offered by Shopify, so you know what kind of functionality is available. For instance, you can add date and time metafields, colors with hexadecimal codes, JSON values and file references. There’s a full guide to metafield types available here. 

As you dive a little deeper into the capabilities of metafields, the use cases for these tools quickly begin to present themselves. For instance, you could display specific images for different collections, or assign date for upcoming sales. 

You can also implement list metafields into your online store using sections and blocks. For instance, you could add a list of product references as a dynamic source to a custom block, so you can suggest different items to customers based on the products they’re already viewing.

Unlocking Metafields in Liquid 

If you have an Online Store 2.0 theme already, then you can connect most of the standard metafields available for your theme to your store using the theme editor. All you really need to do is add metafield definitions to your Shopify admin, add metafield values to parts of your stores, and connect metafields to your theme for displaying custom information. 

Metafield definitions are the main component you’ll need to get used to when you’re using metafields in themes. These simply act as templates to specify which part of the store the metafield applies to, as well as what kind of values the metafield might have. Before you can add metafield values to specific products or orders, you’ll need to add a definition. 

Wherever possible, it’s a good idea to use a standard definition already configured by Shopify. Standard definitions are universally compatible across Shopify so they’re less likely to encounter problems. You can also create custom definitions when necessary. 

Metafields are also available in Shopify as “Liquid objects”. By wrapping the “definition” of your metafield in curly brackets, like you would with a standard Liquid object, along with adding value. To a main-product.liquid element, you can implement new instructions. 

Developers can also apply liquid filters to metafields, which is helpful when the metafield type you’re adding to a page is an image or an URL. For instance, if you have an image metafield you’d need to apply image filters to ensure the visual renders properly. 

Access to metafields within liquid simply gives you a little more freedom to what you can control about each type of metafield within your theme. 

Dynamic Sources and Metafields

Another factor you’ll need to be familiar with as a developer using metafields, is Dynamic Sources. These link the data stored as a metafield to your section input settings, so you can add metafields to pages from the theme editor directly. Once you’ve created a metafield for a specific resource in the Shopify admin, you can access it as a “dynamic source” within your editor. 

When you’re in the theme editor, the “add dynamic source” icon will be visible wherever dynamic sources can be implemented. Notably, dynamic sources will only be available on collection and product pages rendered with JSON templates. Alongside product and collection pages, dynamic sources can also be accessed on other pages through sections used to render products or collections. 

For instance, if you had a featured product slider on a homepage, you could use this to access dynamic sources too. As a theme developer, you can leverage all kinds of dynamic sources and metafields by designing blocks and sections for your website which include plenty of input settings for adding dynamic sources. Creating sections with optional text blocks and designing segments merchants can add their own metafields to is often helpful.

You’ll also be able to create dynamic source placeholders to section settings, which is helpful if you want to give merchants suggestions on the kind of custom content they can apply to pages. By creating dynamic sources as preloaded settings within text blocks, you can provide a selection of possible “default content” options for your merchants can use or replace. This adds a little more flexibility to standard page layouts. 

Showcasing Metafields in Sections and Blocks

Because metafields are accessible in the Liquid programming language, you can also use them as values for liquid input settings. For instance, you could create a single line text metafield for products to showcase where the item was made. The definition for such a metafield might be something like: product.metafields.my_fields.country.

As soon as the metafield is defined, the merchant will be able to assign values for their products. As a developer, you can simply place the value on a product page through a custom liquid section or block. The input setting also supports HTML, so you can add extra paragraph elements to give more context to the information you’re sharing on a page. 

Developers can also ensure metafield information is only displayed on product pages where it’s relevant. For instance, you can use the metafield.value liquid to create a condition where no content is shown on a page where a metafield value for a country is left blank. 

Creating More Powerful Shopify Pages

Metafields are just one example of the unique tools Shopify developers can use to add extra information and context to pages across a website. 

By creating flexible pages and metafields within a website theme, you can also empower your customers to connect with their end-users on a deeper level. If you’re looking for a way to bring more value to your merchants, working with metafields could be a great way to get started. 

Want to attract more Shopify clients? Find out how to become a Shopify Expert with Storetasker!