Custom data
Storefront Web Components can be used to display custom data stored in metafields and metaobjects from your Shopify store. This guide covers some of the most common ways to use custom data, and includes ready-to-use examples that you can adapt to your own storefront.
Although Storefront Web Components don't require an access token for most use cases, you need to provide a Storefront API access token to fetch metafields and metaobjects.
To set up a Storefront API access token:
- Install either the Hydrogen or Headless sales channel in your Shopify admin.
- Create a new storefront within the sales channel.
- Copy your public access token from your storefront settings:
- Hydrogen: Navigate to Storefront settings and find the public access token in the Storefront API section.
- Headless: Inside the Manage API access section of your storefront, click on the Manage button for the Storefront API to find the public access token.
- Make sure that access is enabled for metaobjects in the Permissions section.
- In your Storefront Web Components code, add the public access token to the
public-access-token
attribute of yourshopify-store
component.
Add a store component
Anchor to render-metafieldRender a metafield
To display a product's metafield data on your storefront:
- Create a
shopify-context
component that targets your specific product. - Inside the product context, add another
shopify-context
component that targets the metafield. Specify the metafield's namespace and key as attributes. You can find the namespace and key in the Metafields and metaobjects settings in your Shopify admin. - Within the metafield context, use a
shopify-data
component to display the metafield's value on the page.
Anchor to render-a-metafield-render-a-product-metafieldRender a product metafield
This example shows how to render a product's metafield data on your storefront.
Anchor to render-a-metafield-render-a-currency-metafieldRender a currency metafield
This example shows how to render a currency metafield.
Render a product metafield
Anchor to metafield-referencesMetafield references
You can use a metafield to reference other objects in your store. For example, you can use a metafield on a product to reference another product. To render a metafield reference:
- Create a
shopify-context
component that targets your specific product. - Inside the product context, add another
shopify-context
component that targets the metafield. Specify the metafield's namespace and key as attributes. You can find the namespace and key in the Metafields and metaobjects settings in your Shopify admin. - Within the metafield context, add another
shopify-context
component that targets the reference. - Within the reference context, use a
shopify-data
component to display the reference's value on the page.
Anchor to metafield-references-render-a-metafield-referenceRender a metafield reference
This example shows how to render a metafield that references another product.
Anchor to metafield-references-render-a-list-of-metafield-referencesRender a list of metafield references
This example shows how to render a metafield that references a list of products.
Anchor to metafield-references-render-an-image-from-a-metafield-referenceRender an image from a metafield reference
This example shows how to render an image from a metafield reference.
Render a metafield reference
Anchor to metaobjectsRender a metaobject
Metaobjects are dynamic objects that store custom data in your Shopify store. You can render metaobjects using Storefront Web Components with a shopify-context component:
- Create a
shopify-context
component withtype="metaobject"
andhandle
attributes. Thehandle
attribute specifies which metaobject to render. You can find the handle values for each metaobject on the Entries page in your Shopify admin. - Add a
metaobject-definition-type
attribute to the sameshopify-context
component to specify the metaobject definition type. - To access metafields within the metaobject, add a nested
shopify-context
component withtype="field"
andkey
attributes. Thekey
attribute identifies which metafield to target. You can find the key values for each metafield in the Metafields and metaobjects settings in your Shopify admin. - Inside the metafield context, add your template and components to display the metafield data.
Anchor to render-a-metaobject-render-a-metaobjectRender a metaobject
This example shows how to render metafields within a metaobject.
Anchor to render-a-metaobject-render-a-list-of-metaobjectsRender a list of metaobjects
This example shows how to render a list of metaobjects with a shopify-list-context component.
Anchor to render-a-metaobject-render-a-metaobject-referenceRender a metaobject reference
This example shows how to render a product and image reference from a metaobject.
Render a metaobject
Anchor to custom-componentsCustom components
Metafields support various data types, including rich text, links, numbers, dates, JSON, and file references. The shopify-data
component displays the raw metafield value as-is. For more sophisticated presentations of complex data types like JSON objects or structured content, you can build custom components that receive the metafield value as an attribute with the shopify-attr
attribute.