The ProductProvider component sets up a context with product details. Descendents of this component can use the useProduct hook and the related ProductX or SelectedVariantX hooks.

Example code


Name Required Description
value Yes A Product object.


The ProductProvider component is aliased by the Product component. You can use whichever component you prefer.

Component type

The ProductProvider 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 GraphQL fragment is available for your GraphQL queries using ProductProviderFragment or ProductProvider.Fragment. Using this fragment in your queries ensures that you have all the data necessary for using the ProductProvider.


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

Variable Description
$numProductMedia The number of Media objects to query for in a MediaConnection.
$numProductMetafields The number of Metafields objects to query for in a MetafieldConnection.
$numProductVariants The number of ProductVariant objects to query for in a ProductVariantConnection.
$numProductVariantMetafields The number of Metafield objects to query for in a variant's MetafieldConnection.
$numProductVariantSellingPlanAllocations The number of SellingPlanAllocations to query for in a variant's SellingPlanAllocationConnection.
$numProductSellingPlanGroups The number of SellingPlanGroups objects to query for in a SellingPlanGroupConnection.
$$numProductSellingPlans The number of SellingPlan objects to query for in a SellingPlanConnection.

Example query