HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

Metafield Filters

❮ Previous Next ❯

Metafield filters display metafield information from a metafield object within an appropriate HTML element, or as plain text.

metafield_tag

syntax
metafield | metafield_tag

Generates an HTML element to display metafield information. The specific type of element created varies based on the type of metafield.

Note: The metafield_tag filter only supports the list.single_line_text_field and list.metaobject_reference metafields.

Basic types

Most metafield types output a basic 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"
Value is localized to the customer
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"
Value is formatted using the store's HTML with currency setting
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-page_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"
rich_text_field <div> class="metafield-rich_text_field"

Complex types

Here are the types of metafields that return nested elements or different elements based on their contents:

  • dimension
  • file_reference
  • list.metaobject_reference
  • list.single_line_text_field
  • metaobject_reference
  • volume
  • weight

dimension

Outputs a element with the specified attribute:

Attribute Value
class metafield-dimension

Outputs a element with the specified attribute:

Child Element HTML Element Attributes
The dimension value.
If it's a decimal with more than two places, then it'll be formatted to have a precision of two with trailing zeros removed.		 <span> class="metafield-dimension_value"
The dimension unit. <span> class="metafield-dimension_unit"

file_reference

The result changes based on the file type. There are these groups of file type:

File Type Description
Image Images in the format of jpg, png, gif, heic, and webp.
Video Videos in the format of mov and mp4.
Other Any other file type.

IMAGE

Generates an <img> element with specified attributes:

Attribute Value
src The image's URL.
alt The image's alt text.
class metafield-file_reference

VIDEO

Creates a <video> element with specified attributes:

Attribute Value
src The video's URL.
poster The video's preview image (poster) URL.
playsinline N/A - Indicates the video will be played "inline" within the element's playback area.
preload metadata - Only metadata is pre-fetched before the video is played.

The <video> element includes these child elements:

Child Element HTML Element Attributes
The video's multimedia playlist source, for HTTP live streaming (HLS) <source> src=""
type="application/x-mpegURL"
The video's original source <source> src=""
type=""
The video's preview (poster) image <img> src=""

OTHER

Outputs an <a> element with a link to the file and the following attribute:

Attribute Value
class metafield-file_reference

The <a> tag includes an <img> tag for the file's preview image with these attributes:

Attribute Value
src The file's preview image URL.
loading lazy - The image isn't loaded until it's almost in view.

list.metaobject_reference

metafield | metafield_tag: field: string

Generates a <ul> element by default with these attributes:

Attribute Value
class metafield-single_line_text_field-array

The <ul> element has an <li> element for each metaobject in the array with a class of pptfield-single_line_text_field. The required field parameter indicates which field should be shown for each metaobject. The field parameter can only reference metafields of the type single_line_text_field.

To output an <ol> element, use the list_format parameter with a value of ordered.

list.single_line_text_field

Creates a <ul> element with these attributes:

Attribute Value
class metafield-single_line_text_field-array

The <ul> element includes an <li> element for each item in the list with a class of metafield-single_line_text_field-array.

To display an ordered list, use the list_format parameter with a value of ordered.

metaobject_reference

metafield | metafield_tag: field: string

Outputs an HTML element for the metaobject field specified by the required field parameter. The field parameter can reference only metafields of type single_line_text_field.

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 two places, then it'll be formatted to have a precision of two with trailing zeros removed. <span> class="metafield-volume_value"
The volume unit. <span> class="metafield-volume_unit"

weight

Outputs a <span> element with the given attribute:

Attribute Value
class metafield-weight

The <span> element has these child elements:

Child Element HTML Element Attributes
The weight value. If it's a decimal with more than two places, then it'll be formatted to have a precision of two with trailing zeros removed. <span> class="metafield-weight_value"
The weight unit. <span> class="metafield-weight_unit"

metafield_text

syntax
metafield | metafield_text

Creates a text version of the metafield data.

Note: The metafield_text filter only supports the metafields list.single_line_text_field and list.metaobject_reference.

Basic types

The following shows 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 two places, then it'll be formatted to have a precision of two with trailing zeros removed.
volume The volume value and unit.
If it's a decimal with more than two places, then it'll be formatted to have a precision of two with trailing zeros removed.
dimension The dimension value and unit.
If it's a decimal with more than two places, then it'll be formatted to have a precision of two with trailing zeros removed.
rating The rating value.
list.single_line_text_field The metafield values in sentence format.
For example, if you had the values Toronto, Ottawa, and Vancouver, then the output would be: Toronto, Ottawa, and Vancouver
money The money value, formatted using the store's HTML with currency setting.
rich_text_field The rich text value as simple text.

Complex types

The following metafield types generate varied output based on the field parameter provided:

  • list.metaobject_reference
  • metaobject_reference

list.metaobject_reference

syntax
metafield | metafield_text: field: string

Outputs the list of metaobjects in sentence format. The required field parameter specifies which field should be rendered for each metaobject. The field parameter can reference only metafields of type single_line_text_field.

metaobject_reference

syntax
metafield | metafield_text: field: string

Outputs the text stored in a metafield that corresponds to the specified metaobject field. The field parameter must specifically point to metafields classified as single-line text fields.
❮ Previous Next ❯