# 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.

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FE78E6ktHUKITareyEUTq%2FBildschirmfoto%202025-11-23%20um%2023.04.46.png?alt=media&#x26;token=05152170-472a-4cbb-82ea-1b90a9f8b154" alt=""><figcaption></figcaption></figure>

### Metafields

There are no special attributes for metafields in <code class="expression">space.vars.Company</code>, 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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.metafields.custom.size
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

Or from a collection like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = collection.metafields.custom.info
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

#### 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 <code class="expression">space.vars.Company</code>.

**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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

**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.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### 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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}