Metafield filters
Metafield filters can output metafield data from a metafield object within a relevant HTML element, or as a plain string.
metafield_tag
Anchor link to section titled "metafield_tag"Generates an HTML element depending on the type of metafield.
The output differs depending on the metafield type:
single_line_text_field
Anchor link to section titled "single_line_text_field"single_line_text_field metafields output the text inside a <span> element with an attribute of class="metafield-single_line_text_field".
multi_line_text_field
Anchor link to section titled "multi_line_text_field"multi_line_text_field metafields output the text inside a <span> element with an attribute of class="metafield-mutli_line_text_field".
page_reference
Anchor link to section titled "page_reference"page_reference metafields output the page title of the associated page inside an <a> element with a link to the page and an attribute of class="metafield-page_reference".
product_reference
Anchor link to section titled "product_reference"product_reference metafields output the product title of the associated product inside an <a> element with a link to the product and an attribute of class="metafield-product_reference".
variant_reference
Anchor link to section titled "variant_reference"variant_reference metafields output the variant title of the associated product inside an <a> element with a link to the variant and an attribute of class="metafield-variant_reference".
file_reference
Anchor link to section titled "file_reference"file_reference metafields have a different output depending on the file type:
Images in the format of JPEG, PNG, GIF, HEIC, and WEBP output an <img> element with the following attributes:
| Attribute | Value |
|---|---|
src |
[image_url] - The image's URL. |
alt |
[image_alt] - The image's alt text. |
class |
metafield-file_reference |
Videos in the format of MOV, and MP4 output a <video> element with the following attributes:
| Attribute | Value |
|---|---|
src |
[video_url] - The video's URL. |
poster |
[video_poster_url] - The video's poster image URL. |
playsinline |
N/A - Indicates the video will be played "inline" within the element's playback area |
preload |
metadata - Indicates only metadata is pre-fetched before the video is played |
The <video> element also contains the following child elements
| Element | Description |
|---|---|
source |
The video's multimedia playlist. |
source |
The video's original source. |
img |
The video's thumbnail (poster) image. |
Other files
Anchor link to section titled "Other files"If a file doesn't match any of the above image or video types, then it's a generic_file. Generic files output the file's preview image inside an <a> element with a link to the file and an attribute of class="metafield-file_reference"
number_integer
Anchor link to section titled "number_integer"number_integer metafields output the number inside a <span> element with an attribute of class="metafield-number_integer".
number_decimal
Anchor link to section titled "number_decimal"number_decimal metafields output the number inside a <span> element with an attribute of class="metafield-number_decimal".
date metafields output the date, in a localized format for the customer, inside a <time> element with the following attributes:
| Attribute | Value |
|---|---|
datetime |
[date] - The date. |
class |
metafield-date |
date_time metafields output the date and time, in a localized format for the customer, inside a <time> element with the following attributes:
| Attribute | Value |
|---|---|
datetime |
[date_time] - The date and time. |
class |
metafield-date_time |
url metafields output the URL, with the protocol removed, inside an <a> element with a link to the URL and an attribute of class="metafield-url".
json metafields output the JSON inside a <script> tag with the following attributes:
| Attribute | Value |
|---|---|
type |
application/json |
class |
metafield-json |
boolean metafields output the value inside a <span> element with an attribute of class="metafield-boolean".
color metafields output the value inside a <span> element with an attribute of class="metafield-color".
weight metafields output a <span> element, with an attribute of class="metafield-weight", that contains a <span> element for each of the following:
Weight value
Anchor link to section titled "Weight value"The weight value is output in a <span> element with an attribute of class="metafield-weight_value".
Weight unit
Anchor link to section titled "Weight unit"The weight unit is output in a <span> element with an attribute of class="metafield-weight_unit".
volume metafields output a <span> element, with an attribute of class="metafield-volume", that contains a <span> element for each of the following:
Volume value
Anchor link to section titled "Volume value"The volume value is output in a <span> element with an attribute of class="metafield-volume-value".
Volume unit
Anchor link to section titled "Volume unit"The volume unit is output in a <span> element with an attribute of class="metafield-volume_unit":
dimension metafields output a <span> element, with an attribute of class="metafield-dimension", that contains a <span> element for each of the following:
Dimension value
Anchor link to section titled "Dimension value"The dimension value is output in a <span> element with an attribute of class="metafield-dimension_value".
Dimension unit
Anchor link to section titled "Dimension unit"The dimension unit is output in a <span> element with an attribute of class="metafield-dimension_unit":
rating metafields output the rating value in a <span> element with an attribute of class="metafield-rating":
list.single_line_text_field
Anchor link to section titled "list.single_line_text_field"list.single_line_text_field metafields output the value in a <ul> element with an attribute of class="metafield-single_line_text_field-array" and an <li> element for each item with an attribute of class="metafield-single_line_text_field":
metafield_text
Anchor link to section titled "metafield_text"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 |
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 |
volume |
The volume value and unit |
dimension |
The dimension value and unit |
rating |
The rating value |
list.single_line_text_field |
The values converted to a sentence (for example: "Toronto, Ottawa, and Vancouver") |