Metafield

The Metafield component renders the value of a Storefront API's Metafield object.

When a render function is provided, it passes the Metafield object with a value that was parsed according to the Metafield's type field. For more information, refer to the Render props section.

When no render function is provided, it renders a smart default of the Metafield's value. For more information, refer to the Default Output section.

Example code

Props

Name Type Description
metafield ParsedMetafield A Metafield object from the Storefront API.
children? (value: ParsedMetafield) => ReactElement A render function that takes a Metafield object as an argument. Refer to Render props.

Default output

When no children prop is provided, the Metafield component renders the following defaults:

Metafield type Output
date A span containing the date from toLocaleDateString with the shop's locale.
date_time A span containing the date from toLocaleString with the shop's locale.
boolean A span containing "true" or "false" as a string.
number_integer A span containing the integer.
number_decimal A span containing the number.
json A span containing the JSON object as a string.
weight A span containing a string of the localized weight using Intl.NumberFormat.
dimension A span containing a string of the localized dimension using Intl.NumberFormat.
volume A span containing a string of the localized volume using Intl.NumberFormat.
rating A div containing filled and unfilled star characters correponding to the rating (for example, ★★★★☆).
color A span containing the color value as a string.
single_line_text_field A RawHtml component with the text.
multi_line_text_field A RawHtml component with the text.
product_reference A span containing the product reference GID.
file_reference An Image component when the file reference is of type MediaImage, or a span containing the file reference GID for other file types.
page_reference A span containing the page reference GID.
variant_reference A span containing the variant reference GID.
url An a tag with the href corresponding to the URL and the label corresponding to the URL.

Render props

The Metafield components provides the Metafield object with a value that was parsed according to the Metafield's type field. For details on the parsed value, refer to the parseMetafieldValue utility.

Component type

The Metafield component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.

GraphQL fragment

The following fragment is available as a string for your GraphQL query using MetafieldFragment or Metafield.Fragment. Using this fragment ensures that you have all the data necessary for rendering the Metafield component.

Variables

The MetafieldFragment includes variables that you will need to provide values for when performing your query.

Variable Description
$includeReferenceMetafieldDetails A boolean indicating if the reference type should be queried. Only applicable to file_reference, product_reference, variant_reference, and page_reference metafield types.