Metafield filters

Metafield filters can output metafield data from a metafield object within a relevant HTML element, or as a plain string.

metafield_tag

Generates an HTML element depending on the type of metafield.

The output differs depending on the metafield type:

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

multi_line_text_field metafields output the text inside a <span> element with an attribute of class="metafield-mutli_line_text_field".

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

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

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

file_reference metafields have a different output depending on the file type:

Images

Images in the format of JPEG, PNG, and GIF 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

Other files

Other 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

number_integer metafields output the number inside a <span> element with an attribute of class="metafield-number_integer".

number_decimal

number_decimal metafields output the number inside a <span> element with an attribute of class="metafield-number_decimal".

date

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

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

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

json metafields output the JSON inside a <script> tag with the following attributes:

Attribute Value
type application/json
class metafield-json

boolean

boolean metafields output the value inside a <span> element with an attribute of class="metafield-boolean".

color

color metafields output the value inside a <span> element with an attribute of class="metafield-color".

weight

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

The weight value is output in a <span> element with an attribute of class="metafield-weight_value".

Weight unit

The weight unit is output in a <span> element with an attribute of class="metafield-weight_unit".

volume

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

The volume value is output in a <span> element with an attribute of class="metafield-volume-value".

Volume unit

The volume unit is output in a <span> element with an attribute of class="metafield-volume_unit":

dimension

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

The dimension value is output in a <span> element with an attribute of class="metafield-dimension_value".

Dimension unit

The dimension unit is output in a <span> element with an attribute of class="metafield-dimension_unit":

rating

rating metafields output the rating value in a <span> element with an attribute of class="metafield-rating":

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