Skip to content
Since its release around one year ago, Shopify Metafields have become integral for merchants to customize their stores. It allows adding extra data to products, customers, orders, and other objects. Metafields are perfect for storing custom data that doesn't fit into the existing data models. Recently, Shopify has taken its native metafields to the next level with Metafield Lists.
In this blog post, we will show you how to create and manage metafield lists on your Shopify store.
What are Metafield lists?
A metafield is a data field that can be used to store additional information about an object. This might include extra size, color, or other details you want to add to a given product. You can use a metafield to store the product’s category or brand as well.
Basically, Metafield Lists refer to the way you can store values in a single metafield. Before its release, Shopify store owners could input only one value in a metafield. For example, you sell shoes in the US and want to expand to the UK market which has different sizing conventions. You’ll need to add an extra field for UK sizes using Shopify Metafields. Previously, you were only able to add an individual value like 4.0 for Shoes A. This wouldn't make sense since the shoes have various sizes. With the help of Lists, you can store sizes 4.0, 4.5, 5.0, and so on within the Metafield: UK Size.
How can you create Metafield Lists on your Shopify Store?
Inserting a Metafield List is just as simple as creating a normal metafield. You can read the full instructions in our in-depth blog post about Shopify Metafields. Here we'll just explain it very briefly.
Step 1: To start, go to the “Settings” tab in the Shopify Admin and click on the “Metafields” tab.
Step 2: Choose the part of the store (collections, products, variants, etc.) you want to add a new field to.
Step 3: Click on the “Add New Metafield List” button and enter your desired Name, Namespace, key, and Description (optional) for your metafield list. Tick the box Expose this metafield to Storefront API request if you want to allow custom storefronts to display your Metafields. This is necessary when you sell your Shopify products through a non-Shopify website, video game, or other custom shopping experiences.
Step 4: Select the content type for your metafield (single line text, date and time, number, etc). This is critical as Metafield lists are supported in some content types only. Metafield lists are available for the following content types:
- Text fields (single line text and multi-line text)
- Numbers (integer and decimal)
- Measurement (weight, volume, dimension)
- Reference (file, page, product, product variant)
- Date, date and time
- Others (color, URL, rating)
If the content type accepts lists of values, you’ll see a button for “List". The validation settings between the single value option and the multiple value option in each content type are the same.
Now you know how to add Metafield Lists, let's explore some of their amazing applications.
What are some of the best ways to use it?
Before we jump into some use cases for Shopify Metafield Lists, there are several things you should be aware of.
First and foremost, most of the following instructions involve a bit of coding skills. It's strange for us too that Shopify released Metafield Lists, but didn't give a simple and easy way to display them on the storefronts. If you follow the how-to article named Displaying Metafields on your online store, you won't find your Metafield Lists in the dynamic sources. At the time of writing this post, we haven't found any apps that take over the code either.
Add Related products block to product pages and blog posts
A frequently bought together block is a natural way to upsell your products. Therefore, you can come across it in most eCommerce stores.
 |
 |
Related products can be used to show items in a combo like the Complete The Look block on Camilla or display different product options as Gymshark does with Color.
Some Shopify themes offer a section called Product Recommendation on Product pages which helps you do the same job. However, it applies different criteria to generate the recommendations for different stores, there are a lot of limitations:
✖️You can't customize the recommendation algorithm as well as the recommended products unless you tweak the JavaScript code.
✖️When applying purchase history as a recommendation algorithm criterion, it doesn't take into account orders imported from outside sources (for example, another store or eCommerce platform).
✖️It won't recommend out-of-stock products, products with a price of 0, and gift cards.
|
Recommendation algorithm criteria |
When it's applied |
|
Purchase history and Product description |
Merchants with less than 7000 published products and an English storefront. |
|
Purchase history only |
Merchants with less than 7000 published products and a non-English storefront. |
|
Related collections |
Others. |
In short, the default Product Recommendation section on Shopify themes doesn't really help you with upselling and cross-selling. And of course, it isn't available on Blog posts or other pages.
As a result, you should use Shopify Metafield Lists for product recommendations.
One of Boost's friends, Eduard Fastoski (Ed) has done an extensive tutorial video on how to create “Related products” blocks using Metafield Lists. You can refer to the below video for information.
Here is the step-by-step summary:
Step 1: Create “Related products" metafield in Products and Blog posts.You can look back to our Shopify Metafields guidelines to get the full instruction. What's important in this step is:
- The Namespace and key field connect to the code, so it needs to be exactly put as product_info.related_products.
- In the content type, choose Products
- You need to choose List of products (this means using Metafield Lists) to be able to recommend more than one item
Step 2: Fill in the “Related products" metafield on your products with items that go together or products you want to upsell.
Step 3: Open Themes and locate the one you want to work on (if it's your live theme on your live store, we recommend you duplicate it and modify the copy version). Then click Actions > Edit code. To create custom related products in Product pages and Blog posts, you will need to add some pieces of code to main-product.liquid and main-article.liquid
Step 4: In this step, you will add the following code (Many thanks to Ed for writing this neat and clean piece of code)
{
"type": "related_products",
"name": "⚡️ Related Products",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Related Products"
},
{
"type": "number",
"id": "heading_font_size",
"label": "Heading font size (px)",
"default": 18
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#121212"
},
{
"type": "color",
"id": "hover_border_color",
"label": "Border color (hover)",
"default": "#121212",
"info": "Make color field blank (transparent) if you don't want a border"
}
]
},
Take a look at the images below to find where to insert the code.
|
On main-product.liquid
|
On main-article.liquid
|
This code provides basic options for changing the text, the font size, and the color of “Related Products". If you want more customization, check out this tool written by Ed too.
After this step, you should see the “Related Products" after clicking + Add block when editing product pages and blog pages on Themes > Customize.
 |
 |
This is the result you should see after Step 4
Step 5:
|
Where to add |
On main-product.liquid |
On main-article.liquid |
|
What code to add |
{%- when 'related_products' -%} {% if product.metafields.product_info.related_products %} {% assign relatedProducts = product.metafields.product_info.related_products.value %} <!-- check at least one recommended product is available --> {%- liquid assign has1product = false for prod in relatedProducts if prod.available == true assign has1product = true endif endfor -%} {% if has1product %} <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p> <div class="related-products" id="related-products-{{ block.id }}"> {% for prod in relatedProducts %} {% if prod.available == true %} <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}"> <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}"> </a> {% endif %} {% endfor %} </div> <style> #related-products-{{ block.id }} { text-align: left; display: flex; flex-wrap: wrap; } #related-products-{{ block.id }} .related-product { display: inline-block; width: calc(25% - 0.4rem); margin: 0px 0.4rem 0.8rem 0px; position: relative; border: 1px solid transparent; text-align: center; } #related-products-{{ block.id }} .related-product:last-child { margin-right: 0; } #related-products-{{ block.id }} .related-product__image { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } #related-products-{{ block.id }} .related-product:hover { border-color: {{ block.settings.hover_border_color }}; } </style> {% endif %} {% endif %} {% endif %} |
{%- when 'related_products' -%} {% if article.metafields.product_info.related_products %} {% assign relatedProducts = article.metafields.product_info.related_products.value %} <!-- check at least one recommended product is available --> {%- liquid assign has1product = false for prod in relatedProducts if prod.available == true assign has1product = true endif endfor -%} {% if has1product %} <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p> <div class="related-products" id="related-products-{{ block.id }}"> {% for prod in relatedProducts %} {% if prod.available == true %} <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}"> <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}"> </a> {% endif %} {% endfor %} </div> <style> #related-products-{{ block.id }} { text-align: left; display: flex; flex-wrap: wrap; } #related-products-{{ block.id }} .related-product { display: inline-block; width: calc(25% - 0.4rem); margin: 0px 0.4rem 0.8rem 0px; position: relative; border: 1px solid transparent; text-align: center; } #related-products-{{ block.id }} .related-product:last-child { margin-right: 0; } #related-products-{{ block.id }} .related-product__image { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } #related-products-{{ block.id }} .related-product:hover { border-color: {{ block.settings.hover_border_color }}; } </style> {% endif %} {% endif %} |
|
Results |
 |
 |
Step 6: Customize as you want in Themes > Customize
Add custom storefront filtering
Phew~ We’re over the coding part. Enabling metafield-based filters on Shopify is far easier. By saying so, it doesn't mean the process has no limitations.
✖️Filters based on a specific product/variant metafield only accept the following content types:
- Single line text
- Number (integer and decimal)
- True or False
This limits the capability to create user-friendly filters such as color swatch, image swatch, and range sliders.
✖️In total, merchants can create up to a maximum of 20 filters based on metafields and variant options. So you need to calculate carefully if you are using a great number of variant options on your storefront filtering.
✖️Another huge problem of Shopify filters, in general, is that they don’t support collections with more than 1,000 products. Therefore, this default option is definitely not suited for scalability.
✖️You can’t change the display, rearrange the values, add tooltips, or truncate lists.
All these limits can be broken with a Shopify product filter and search app like Boost. Besides, you have powerful Analytics to understand your audience and an intuitive Merchandising tool for upselling and cross-selling.
Still, if you are managing a small store and think that Shopify Filter by Matefields is sufficient, here is how you can do it:
Step 1: Create product metafields or variant metafields that are helpful to shoppers when refining the product lists. Remember to choose from the content types listed above and select List of values
Step 2: Fill in the metafield on your products and variants.
Step 3: Go to Online Stores > Navigation > Add filters. Tick the checkbox of the metafields you want to show on your storefront.
A few last words
After all, Metafields Lists is a big improvement to Shopify. However, there are a bunch of obstacles when it comes to displaying Metafield Lists on the storefront. We believe Shopify will continue to upgrade its offerings, making it a piece of cake for non-tech merchants. In the meantime, it's a great choice to hire a Shopify Expert, or install a third-party app as your customers, your sales, and your revenue won't be waiting.
