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"

Code

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

<!-- 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
• file_reference
• volume
• 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

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

Output

<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

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

Output

<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

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

Output

<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

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

Output

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

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

Output

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!