shopify-contextcomponent
The context component defines which Shopify data should be available in different parts of your page.
Each <shopify-context> component requires two attributes:
type: Specifies what kind of data you want (for example,product).handleorgid: Identifies the specific item. For example, the handle for the URLismen-t-shirt. Thegidattribute can be used to identify the item by its unique id, e.g..
If you're working with a single storefront, then you can add the <shopify-context> component anywhere on your page (it doesn't need to be inside the <shopify-store> component). If you're working with multiple storefronts, then nest the context inside its corresponding store component.
Every <shopify-context> component also requires a <template> component, which contains the data you want to display. That template won't be rendered until the context is loaded. Render placeholder content outside the template with an attribute shopify-loading-placeholder. This content will be displayed until the context is loaded.
See the playground for complete examples.
Anchor to attributesAttributes
The type of the context. This needs to match the GraphQL Storefront API type you are querying. For example, if you are querying a product, the type should be type="product".
The unique id for the context. Required on some objects, like products, collections, and blogs, if the handle attribute isn't used.
The handle for the context. Required on some objects, like products, collections, and blogs. The handle is required unless the wait-for-update attribute is included or the gid attribute is used instead.
The key for the metafield. Required when the context type is metafield.
The metaobject definition type for the context. Required when the context type is metaobject.
The namespace for the metafield. Required when the context type is metafield.
The query path for accessing nested data within a parent context.
Required when this context is nested inside another context. The query should specify the path to access the desired data from the parent.
Example: If the parent context is a product, and you want to access its first available variant: query="product.selectedOrFirstAvailableVariant"
Updates this context to match the data from another context of the same type.
Common use case: When displaying a list of products, you might want to show a detailed view of a single product in a modal. This method allows you to update the modal's context to display the selected product's data.
How it works:
The event target must be inside the source context you want to copy from
This context will update its handle to match the source context
The data will be automatically refreshed to show the new content
Wait to render the context until the update method is called. This is useful for dynamically rendering a context.
Example
HTML
Anchor to examplesExamples
Examples of various ways to use the <shopify-context> component.
Anchor to example-updating-a-context-with-a-dialogUpdating a context with a dialog
Show a list of products, and clicking each product opens a dialog with product details
Anchor to example-paginated-list-of-productsPaginated list of products
Show a list of products, and clicking the next and previous buttons loads the next and previous pages of products
Anchor to example-metafield-valueMetafield value
Show a metafield value
Anchor to example-metafield-referenceMetafield reference
Use a metafield to reference a single product
Anchor to example-metafield-list-referencesMetafield list references
Use a metafield to references a list of products
Anchor to example-metaobjectMetaobject
Render a metaobject context with a text field and a reference media field
