Skip to main content

Metafield

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

The component provides a default output depending on the metafield type. You can customize this component using passthrough props.

Example code

import {Metafield} from '@shopify/hydrogen';

export function Product({product}) {
const metafield = product.metafield;

return <Metafield data={metafield} />;
}

Props

NameTypeDescription
dataPartialDeep<<wbr>Metafield<wbr>> &#124; nullAn object with fields that correspond to the Storefront API's Metafield object.
as?TTagAn HTML tag to be rendered as the base element wrapper. The default value varies depending on metafield.type.

Default output

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

Metafield typeOutput
dateA time containing the date from toLocaleDateString with the shop's locale.
date_timeA time containing the date from toLocaleString with the shop's locale.
booleanA span containing "true" or "false" as a string.
number_integerA span containing the integer.
number_decimalA span containing the number.
jsonA span containing the JSON object as a string.
weightA span containing a string of the localized weight using Intl.NumberFormat.
dimensionA span containing a string of the localized dimension using Intl.NumberFormat.
volumeA span containing a string of the localized volume using Intl.NumberFormat.
ratingA span containing a string of the rating value.
colorA span containing the color value as a string.
single_line_text_fieldA span component with the text.
multi_line_text_fieldA div component with the lines of text separated by a <br/>.
product_referenceA span containing the product reference title. If the title doesn't exist, then the GID is displayed.
file_referenceAn Image component when the file reference is of type MediaImage, a Video component when the file reference is of type Video, an <a> linking to the file with a preview image when the file reference is of type GenericFile, or a span containing the file reference GID when the file is of another type.
page_referenceA span containing the product reference title. If the title doesn't exist, then the GID is displayed.
variant_referenceA span containing the product reference title. If the title doesn't exist, then the GID is displayed.
urlAn a tag with the href corresponding to the URL and the label corresponding to the URL.

Required fields

The Metafield component requires fields from the Storefront API's Metafield object based on the metafield type.

If the metafield type is product_reference, variant_reference, or page_reference, then the following fields are required:

{
type
reference
}

For all other metafield types, the following fields are required:

{
type
value
}

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.

Variables

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

VariableDescription
$includeReferenceMetafieldDetailsA boolean indicating if the reference type should be queried. Only applicable to file_reference, product_reference, variant_reference, and page_reference metafield types.