Metafields and Metaobjects

Metafields and Metaobjects are powerful tools to enrich your store with extra information. You can think of them like CMS lists or collection fields in Webflow.

Metafields

There are no special attributes for metafields in Liquiflow, but you can still use them with li-object, li-if, li-unless, li-for, and li-attribute. Basically with any attribute that can work directly with Shopify objects.

Metafields can be created for many resources in your store, such as products, collections, articles, and more. You can set them up in your Shopify admin under Metafields and Metaobjects. The actual content of each metafield is edited on the resource’s detail page in the Shopify backend.

They are attached to a resource object and identified by a namespace (usually custom by default) and a key (the unique name of the field).

Here’s the Shopify metafield documentation if you need more details: https://shopify.dev/docs/api/liquid/objects/metafield

For example, you can access a product metafield like this:

Webflow

li-object = product.metafields.custom.size

Shopify

<p>{{ product.metafields.custom.size }}</p>

Or from a collection like this:

Webflow

li-object = collection.metafields.custom.info

Shopify

<p>{{ collection.metafields.custom.info }}</p>

Metafield Types

There are different metafield types you can define in the Shopify settings — such as text, numbers, files, or even references to other products, articles, or metaobjects. All of them work almost the same when you access their data in Liquiflow.

Files

When using a metafield of type file, you need to apply the correct filter for that file type. For example, an image requires the image_url filter, like this:

Webflow

li-object:src="product.metafields.custom.instructions | image_url: width: 1000

Shopify

<img src="product.metafields.custom.instructions | image_url: width: 1000">

Accessing metafields of type list

Metafields of type list return an array in their value property. You can loop through this array using li-for to access each item.

Webflow

<div li-for:inside="item in product.metafields.custom.ingredients.value">
    <div li-object="item"></div>
</div>

Shopify

<div> 
    {% for item in product.metafields.custom.ingredients.value %}
        <div>{{ item }}</div>
    {% endfor %}
</div>

Metaobjects

Metaobjects are always arrays. You can create different property types for a metaobject, such as title or description. When you iterate over a metaobject, you can access these properties for each item in the array. For example:

Webflow

<div li-for:inside="faq in shop.metaobjects.fa_qs.values">
    <div li-object="faq.title"></div>
</div>

Shopify

<div> 
    {% for faq in shop.metaobjects.fa_qs.values %}
        <div>{{ faq.title }}</div>
    {% endfor %}
</div>