How to Loop Through Text Metafield List in Shopify Liquid

Metafields in Shopify have been around for many years. They allow you to extend native objects like products and orders by storing custom information that is relevant to these resources.

Shopify has recently made a significant investment in making it easy for site administrators to manage (add/edit/delete) metafields directly in the shop Admin without the need to install and use a third-party app.

In addition, the company has also rebuilt metafields from the ground up. It introduced new metafield types among a number of other improvements. Some metafield types like “Single line text” now allow us to store multiple values within a single metafield. This can be particularly helpful for metafields like “ingredients” for example where you would normally want to store at least a few values.

In the past, hacky workarounds existed where you could store your custom data following a particular pattern like “flour_milk_butter” and then split the string at “_” to get the individual ingredients. While this approach worked fine, it was very painful for site administrators to enter the information and this setup was prone to error.

This is where metafield lists come in. With the recent updates, it is now possible to add multiple values to a metafield directly in the Admin:

How do you access these values in your theme code though? Before, you would expect a metafield to return a single value but with lists, we need a way to:

• Loop through all entries and get their value
• Access particular entry in the list

The Liquid language has evolved accordingly to allow us to achieve just that. We can loop through the list entries like so:

{% for key in product.metafields.custom.ingredients.value %}
  {{ key }} <br>
{% endfor %}

and this will return:

• Flour
• Milk
• Butter

If, for any reason, we wanted to get the value of the second entry specifically, we could do it by using:

{{ product.metafields.custom.ingredients.value[1] }}

which will return:

Milk

Please keep in mind that metafield lists use a 0-based index, so [1] will return the second entry.

Now that we know how to access the metafield list values, we can go ahead and start building.