# Metafield

Metafield filters output metafield data from a metafield object within a relevant HTML element, or as a plain string.

## metafield\_tag

`metafield | metafield_tag`

returns  [string](../basics/liquid-types#string)

Generates an HTML element to host the metafield data. The type of element that's generated differs depending on the type of metafield.

### Basic types

Most metafield types return a simple HTML element:

|
Type

 |

Element

 |

Attributes

 |
| --- | --- | --- |
|

`boolean`

 |

`<span>`

 |

`class="metafield-boolean"`

 |
|

`collection_reference`

 |

`<a>`

 |

`class="metafield-collection_reference"`

 |
|

`color`

 |

`<span>`

 |

`class="metafield-color"`

 |
|

`date`

 |

`<time>`

 |

`datetime="<the metafield value>"`

`class="metafield-date"`

 |
|

`date_time`

 |

`<time>`

 |

`datetime="<the metafield value>"`

`class="metafield-date"`

Value is localized to the customer.

 |
|

`json`

 |

`script`

 |

`type="application/json"`

`class="metafield-json"`

 |
|

`money`

 |

`<span>`

 |

`class="metafield-money"`

 |
|

`multi_line_text_field`

 |

`<span>`

 |

`class="metafield-multi_line_text_field"`

 |
|

`number_decimal`

 |

`<span>`

 |

`class="metafield-number_decimal"`

 |
|

`number_integer`

 |

`<span>`

 |

`class="metafield-number_integer"`

 |
|

`page_reference`

 |

`<a>`

 |

`class="metafield-page_reference"`

 |
|

`product_reference`

 |

`<a>`

 |

`class="metafield-product_reference"`

 |
|

`rating`

 |

`<span>`

 |

`class="metafield-rating"`

 |
|

`single_line_text_field`

 |

`<span>`

 |

`class="metafield-single_line_text_field"`

 |
|

`url`

 |

`<a>`

 |

`class="metafield-url"`

 |
|

`variant_reference`

 |

`<a>`

 |

`class="metafield-variant_reference"`

 |

**Code**

```liquid
<!-- boolean -->
{{ product.metafields.custom.seasonal | metafield_tag }}

<!-- color -->
{{ product.metafields.custom.potion_color | metafield_tag }}

<!-- date -->
{{ product.metafields.custom.expiry | metafield_tag }}

<!-- date_time -->
{{ product.metafields.custom.brew_date | metafield_tag }}

<!-- json -->
{{ product.metafields.custom.burn_temperature | metafield_tag }}

<!-- multi_line_text_field -->
{{ product.metafields.custom.shipping | metafield_tag }}

<!-- number_decimal -->
{{ product.metafields.custom.salinity | metafield_tag }}

<!-- number_integer -->
{{ product.metafields.custom.doses_per_day | metafield_tag }}

<!-- rating -->
{{ product.metafields.custom.rating | metafield_tag }}

<!-- single_line_text_field -->
{{ product.metafields.custom.directions | metafield_tag }}

<!-- url -->
{{ product.metafields.custom.health | metafield_tag }}
```

**Output**

```html
<!-- boolean -->
<span class="metafield-boolean">1</span>

<!-- color -->
<span class="metafield-color">#ffa500</span>

<!-- date -->
<time datetime="2030-12-31" class="metafield-date">2030-12-31</time>

<!-- date_time -->
<time datetime="2023-07-31T12:20:20+08:00" class="metafield-date">2023-07-31 12:20:20+08:00</time>

<!-- json -->
<script type="application/json" class="metafield-json">{
  "temperature": 700,
  "unit": "degrees",
  "scale": "Fahrenheit"
}</script>

<!-- multi_line_text_field -->
<span class="metafield-multi_line_text_field"><span class="metafield-multi_line_text_field">All health potions are made to order, so it might take up to 2 weeks before your order can be shipped.<br><br>Thanks for your patience!</span></span>

<!-- number_decimal -->
<span class="metafield-number_decimal">8.4</span>

<!-- number_integer -->
<span class="metafield-number_integer">3</span>

<!-- rating -->
<span class="metafield-rating">4.5</span>

<!-- single_line_text_field -->
<span class="metafield-single_line_text_field">Take with a meal.</span>

<!-- url -->
<a href="https://www.canada.ca/en/health-canada/services/food-nutrition/legislation-guidelines/acts-regulations/canada-food-drugs.html" class="metafield-url">https://www.canada.ca/en/health-canada/services/food-nutrition/legislation-guidelines/acts-regulations/canada-food-drugs.html</a>
```

### Complex types

The following metafield types return nested elements, or different elements depending on the metafield contents:

*   [dimension](/docs/theme/references/liquid/filters/metafield#dimension)
*   [file\_reference](/docs/theme/references/liquid/filters/metafield#file_reference)
*   [volume](/docs/theme/references/liquid/filters/metafield#volume)
*   [weight](/docs/theme/references/liquid/filters/metafield#weight)

### dimension

Outputs a `<span>` element with the following attribute:

| Attribute | Value |
| --- | --- |
| `class` | `metafield-dimension` |

The `<span>` element contains the following child elements:

|
Child element

 |

HTML element

 |

Attributes

 |
| --- | --- | --- |
|

The dimension value.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |

`<span>`

 |

`class="metafield-dimension_value"`

 |
|

The dimension unit.

 |

`<span>`

 |

`class="metafield-dimension_unit"`

 |

**Code**

```liquid
{{ product.metafields.custom.scale_width | metafield_tag }}
```

**Output**

```html
<span class="metafield-dimension"><span class="metafield-dimension_value">98.1</span><span class="metafield-dimension_unit">MILLIMETERS</span></span>
```

### file\_reference

The output varies depending on the type of file. There are the following categories of file types:

| File type | Description |
| --- | --- |
| Image | Images in the format of `jpg`, `png`, `gif`, and `webp`. |

#### Image

Outputs an `<img>` element with the following attributes:

| Attribute | Value |
| --- | --- |
| `src` | The image's URL. |
| `loading` | `lazy` |
| `class` | `metafield-file_reference` |

**Code**

```liquid
{{ product.metafields.custom.promo_image | metafield_tag }}
```

**Output**

```html
<img src="https://img.staticdj.com/68fcdc4c8b38e14ee60251475c0b8bd4.webp" loading="lazy" class="metafield-file_reference">
```

### volume

Outputs a `<span>` element with the following attribute:

| Attribute | Value |
| --- | --- |
| `class` | `metafield-volume` |

The `<span>` element contains the following child elements:

|
Child element

 |

HTML element

 |

Attributes

 |
| --- | --- | --- |
|

The volume value.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |

`<span>`

 |

`class="metafield-volume_value"`

 |
|

The volume unit.

 |

`<span>`

 |

`class="metafield-volume_unit"`

 |

**Code**

```liquid
{{ product.metafields.custom.milk_container_volume | metafield_tag }}
```

**Output**

```html
<span class="metafield-volume"><span class="metafield-volume_value">250</span><span class="metafield-volume_unit">MILLILITERS</span></span>
```

### weight

Outputs a `<span>` element with the following attribute:

| Attribute | Value |
| --- | --- |
| `class` | `metafield-weight` |

The `<span>` element contains the following child elements:

|
Child element

 |

HTML element

 |

Attributes

 |
| --- | --- | --- |
|

The weight value.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |

`<span>`

 |

`class="metafield-weight_value"`

 |
|

The weight unit.

 |

`<span>`

 |

`class="metafield-weight_unit"`

 |

**Code**

```liquid
{{ product.metafields.custom.chamomile_base_weight | metafield_tag }}
```

**Output**

```html
<span class="metafield-weight"><span class="metafield-weight_value">50</span><span class="metafield-weight_unit">GRAMS</span></span>
```

## metafield\_text

`metafield | metafield_text`

returns  [string](../basics/liquid-types#string)

Generates a text version of the metafield data.

The following outlines the output for each metafield type:

|
Metafield type

 |

Output

 |
| --- | --- |
|

`single_line_text_field`

 |

The metafield text.

 |
|

`multi_line_text_field`

 |

The metafield text.

 |
|

`page_reference`

 |

The page title.

 |
|

`product_reference`

 |

The product title.

 |
|

`collection_reference`

 |

The collection title.

 |
|

`variant_reference`

 |

The variant title.

 |
|

`file_reference`

 |

The file URL.

 |
|

`number_integer`

 |

The number.

 |
|

`number_decimal`

 |

The number.

 |
|

`date`

 |

The date.

 |
|

`date-time`

 |

The date and time.

 |
|

`url`

 |

The URL.

 |
|

`json`

 |

The JSON.

 |
|

`boolean`

 |

The boolean value

 |
|

`color`

 |

The color value.

 |
|

`weight`

 |

The weight value and unit.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |
|

`volume`

 |

The volume value and unit.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |
|

`dimension`

 |

The dimension value and unit.

If it's a decimal with more than one place, then it'll be formatted to have a precision of one with trailing zeros removed.

 |
|

`rating`

 |

The rating value.

 |
|

`money`

 |

The money value.

 |

**Code**

```liquid
{{ product.metafields.custom.shipping | metafield_text }}
```

**Output**

```html
All health potions are made to order, so it might take up to 2 weeks before your order can be shipped.
Thanks for your patience!
```