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 <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" |
{{ 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 <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" |
{{ 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:
| 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" |
{{ 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!
Updated 10 months ago