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

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:

TypeElementAttributes
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.
jsonscripttype="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"
<!-- 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 }}
<!-- 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

Outputs a <span> element with the following attribute:

AttributeValue
classmetafield-dimension

The <span> element contains the following child elements:

Child elementHTML elementAttributes
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"
{{ product.metafields.custom.scale_width | metafield_tag }}
<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 typeDescription
ImageImages in the format of jpg, png, gif, and webp.

Image

Outputs an <img> element with the following attributes:

AttributeValue
srcThe image's URL.
loadinglazy
classmetafield-file_reference
{{ product.metafields.custom.promo_image | metafield_tag }}
<img src="https://img.staticdj.com/68fcdc4c8b38e14ee60251475c0b8bd4.webp" loading="lazy" class="metafield-file_reference">

volume

Outputs a <span> element with the following attribute:

AttributeValue
classmetafield-volume

The <span> element contains the following child elements:

Child elementHTML elementAttributes
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"
{{ product.metafields.custom.milk_container_volume | metafield_tag }}
<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:

AttributeValue
classmetafield-weight

The <span> element contains the following child elements:

Child elementHTML elementAttributes
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"
{{ product.metafields.custom.chamomile_base_weight | metafield_tag }}
<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

Generates a text version of the metafield data.

The following outlines the output for each metafield type:

Metafield typeOutput
single_line_text_fieldThe metafield text.
multi_line_text_fieldThe metafield text.
page_referenceTheThe page title.
product_referenceThe product title.
collection_referenceThe collection title.
variant_referenceThe variant title.
file_referenceThe file URL.
number_integerThe number.
number_decimalThe number.
dateThe date.
date-timeThe date and time.
urlThe URL.
jsonThe JSON.
booleanThe boolean value
colorThe color value.
weightThe 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.
volumeThe 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.
dimensionThe 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.
ratingThe rating value.
moneyThe money value.
{{ product.metafields.custom.shipping | metafield_text }}
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!