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

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"`

<!-- 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  element with the following attribute:

Attribute	Value
`class`	`metafield-dimension`

The  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"`

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.

class="metafield-dimension_value"

The dimension unit.

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 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`

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

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

volume

Outputs a  element with the following attribute:

Attribute	Value
`class`	`metafield-volume`

The  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"`

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.

class="metafield-volume_value"

The volume unit.

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  element with the following attribute:

Attribute	Value
`class`	`metafield-weight`

The  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"`

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.

class="metafield-weight_value"

The weight unit.

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 type	Output
`single_line_text_field`	The metafield text.
`multi_line_text_field`	The metafield text.
`page_referenceThe`	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.

{{ 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!