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