---
title: "metafield_tag"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/sline/tag/metafield-tag'
  md: 'https://developer.shopline.com/docs/sline/tag/metafield-tag.md'
---

# metafield_tag


    Generates an HTML string from a [metafield](https://developer.shopline.com/docs/sline/object/metafield.md) 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.

    



```sline
{{#metafield_tag metafield /}}

```





    
        ## Required params

        
             `metafield` [`metafield`](https://developer.shopline.com/docs/sline/object/metafield.md)\: 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>` |

            
```sline
{{#metafield_tag variable /}}
```
            

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#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 /}}
```
</SlineExample>
            
        
            ### 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" />` <br/> `<video playsinline="playsinline" preload="metadata" poster="//..."><source src="//..." type="video/mp4"></video>` <br/> `<a href="//..." class="metafield-file_reference"><img src="..." loading="lazy"></a>` |

            
```sline
{{#metafield_tag variable /}}
```
            

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#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 /}}

```
</SlineExample>
            
        
            ### 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>` |

            
```sline
{{#metafield_tag variable /}}


```
            

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#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 /}}
```
</SlineExample>
            
        
            ### metaobject_reference

            | Attribute | Value |
| --- | --- |
| `class` | `metafield-single_line_text_field` |

The field specified by `field` must be of type `single_line_text_field`.

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

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#var mf = product | get_metafields("my_fields") /}}

{{#metafield_tag mf.metaobject field="color_name" /}}

```
</SlineExample>
            
        
            ### 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`.

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

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#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" /}}

```
</SlineExample>
            
        
            ### 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`.

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

            
<SlineExample path={'/products/earring-ab001'} objects={ 
    ["product"] 
}>
```sline
{{#var mf = product | get_metafields("my_fields") /}}

<!-- normal -->
{{#metafield_tag mf.available_colors /}}

<!-- list_format="ordered" -->
{{#metafield_tag mf.available_colors list_format="ordered" /}}
```
</SlineExample>