[{"value":"Required params","id":"required-params","hLevel":2,"level":1},{"value":"Optional params","id":"optional-params","hLevel":2,"level":1},{"value":"Examples","id":"examples","hLevel":2,"level":1,"children":[{"value":"Basic types","id":"basic-types","hLevel":3,"level":2},{"value":"Complex types","id":"complex-types","hLevel":3,"level":2},{"value":"Measurement types","id":"measurement-types","hLevel":3,"level":2},{"value":"metaobject_reference","id":"metaobject_reference","hLevel":3,"level":2},{"value":"list.metaobject_reference","id":"listmetaobject_reference","hLevel":3,"level":2},{"value":"list.single_line_text_field","id":"listsingle_line_text_field","hLevel":3,"level":2}]}]

metafield_tag

Generates an HTML string from a metafield object. This tag is suitable for directly rendering content in themes. It automatically generates standard HTML elements, styled with class attributes, based on the data type.

For list types, only list.single_line_text_field and list.metaobject_reference are supported.

{{#metafield_tag metafield /}}

Required params

metafield metafield: The object to be converted into an HTML string.

Optional params

field string: The field name. Required when the metafield type is metaobject_reference or list.metaobject_reference; used to specify the field to output from the metaobject (only single_line_text_field field type is supported).
list_format string: The list format. Only valid for list.single_line_text_field and list.metaobject_reference types. Outputs an unordered list <ul> by default, or an ordered list <ol> if set to ordered.

Examples

HTML string conversion rules vary by metafield type. Below are specific usage examples for different types:

Basic types

Type	HTML output
`boolean`	`<span class="metafield-boolean">...</span>`
`single_line_text_field`	`<span class="metafield-single_line_text_field">...</span>`
`multi_line_text_field`	`<span class="metafield-multi_line_text_field">...</span>`
`rich_text_field`	`<div class="metafield-rich_text_field">...</div>`
`color`	`<span class="metafield-color">...</span>`
`rating`	`<span class="metafield-rating">...</span>`
`number_integer`	`<span class="metafield-number_integer">...</span>`
`number_decimal`	`<span class="metafield-number_decimal">...</span>`
`money`	`<span class="metafield-money">...</span>`
`date`	`<time datetime="..." class="metafield-date">...</time>`
`date_time`	`<time datetime="..." class="metafield-date_time">...</time>`
`url`	`<a href="..." class="metafield-url">...</a>`
`link`	`<a href="..." class="metafield-url">...</a>`
`json`	`<script type="application/json" class="metafield-json">...</script>`

{{#metafield_tag variable /}}

{{#var mf = product | get_metafields("my_fields") /}}
<!-- boolean -->
{{#metafield_tag mf.is_new_arrival /}}
<!-- single_line_text_field -->
{{#metafield_tag mf.short_description /}}
<!-- multi_line_text_field -->
{{#metafield_tag mf.material_note /}}
<!-- rich_text_field -->
{{#metafield_tag mf.detail_description /}}
<!-- color -->
{{#metafield_tag mf.color_code /}}
<!-- rating -->
{{#metafield_tag mf.customer_rating /}}
<!-- number_integer -->
{{#metafield_tag mf.inventory_limit /}}
<!-- number_decimal -->
{{#metafield_tag mf.fabric_weight /}}
<!-- money -->
{{#metafield_tag mf.member_price /}}
<!-- date -->
{{#metafield_tag mf.release_date /}}
<!-- date_time -->
{{#metafield_tag mf.release_time /}}
<!-- url -->
{{#metafield_tag mf.size_guide_url /}}
<!-- link -->
{{#metafield_tag mf.brand_link /}}
<!-- json -->
{{#metafield_tag mf.spec_json /}}

Complex types

Type	HTML output
`collection_reference`	`<a href="..." class="metafield-collection_reference">...</a>`
`page_reference`	`<a href="..." class="metafield-page_reference">...</a>`
`product_reference`	`<a href="..." class="metafield-product_reference">...</a>`
`variant_reference`	`<a href="..." class="metafield-variant_reference">...</a>`
`file_reference`	`<img src="//..." loading="lazy" class="metafield-file_reference" />` `<video playsinline="playsinline" preload="metadata" poster="//..."><source src="//..." type="video/mp4"></video>` `<a href="//..." class="metafield-file_reference"><img src="..." loading="lazy"></a>`

{{#metafield_tag variable /}}

{{#var mf = product | get_metafields("my_fields") /}}
<!-- collection_reference -->
{{#metafield_tag mf.related_collection /}}
<!-- page_reference -->
{{#metafield_tag mf.size_guide_page /}}
<!-- product_reference -->
{{#metafield_tag mf.related_product /}}
<!-- variant_reference -->
{{#metafield_tag mf.recommended_variant /}}
<!-- file_reference image -->
{{#metafield_tag mf.product_image /}}
<!-- file_reference video -->
{{#metafield_tag mf.product_video /}}
<!-- file_reference generic_file -->
{{#metafield_tag mf.manual_file /}}

Measurement types

Type	HTML output
`weight`	`<span class="metafield-weight"><span class="metafield-weight_value">...</span><span class="metafield-weight_unit">...</span></span>`
`volume`	`<span class="metafield-volume"><span class="metafield-volume_value">... </span><span class="metafield-volume_unit">...</span></span>`
`dimension`	`<span class="metafield-dimension"><span class="metafield-dimension_value">...</span><span class="metafield-dimension_unit">...</span></span>`

{{#metafield_tag variable /}}

{{#var mf = product | get_metafields("my_fields") /}}
<!-- weight -->
{{#metafield_tag mf.package_weight /}}
<!-- volume -->
{{#metafield_tag mf.package_volume /}}
<!-- dimension -->
{{#metafield_tag mf.package_width /}}

metaobject_reference

Attribute	Value
`class`	`metafield-single_line_text_field`

The field specified by field must be of type single_line_text_field.

{{#metafield_tag variable field="field_name" /}}

{{#var mf = product | get_metafields("my_fields") /}}
{{#metafield_tag mf.metaobject field="color_name" /}}

list.metaobject_reference

Attribute	Value
`class`	`metafield-single_line_text_field-array`

The field specified by field must be of type single_line_text_field.

By default, an unordered list <ul> is output. To output an ordered list <ol>, set the list_format parameter to ordered.

{{#metafield_tag variable field="field_name" list_format="ordered" /}}

{{#var mf = product | get_metafields("my_fields") /}}
<!-- normal -->
{{#metafield_tag mf.metaobjects field="color_name" /}}
<!-- list_format="ordered" -->
{{#metafield_tag mf.metaobjects field="color_name" list_format="ordered" /}}

list.single_line_text_field

Attribute	Value
`class`	`metafield-single_line_text_field-array`

By default, an unordered list <ul> is output. To output an ordered list <ol>, set the list_format parameter to ordered.

{{#metafield_tag variable list_format="ordered" /}}

{{#var mf = product | get_metafields("my_fields") /}}
<!-- normal -->
{{#metafield_tag mf.available_colors /}}
<!-- list_format="ordered" -->
{{#metafield_tag mf.available_colors list_format="ordered" /}}