ShopifyProvider component wraps your entire app and provides functionality for many components, hooks, and utilities. You should place it in your app's entry point component. If you're using the Hydrogen framework, then it should be within
ShopifyProvider component also provides localization data for the app. The default localization data is defined within your Hydrogen configuration file. You can change the active country and language at runtime by passing in the
Example codeAnchor link to section titled "Example code"
||Shopify connection information. Defaults to the
||The code designating a country or region, which generally follows ISO 3166-1 alpha-2 guidelines.|
||The ISO 639-1 language codes supported by Shopify.|
Component typeAnchor link to section titled "Component type"
ShopifyProvider component is a server component that renders inside
App.server.jsx. For more information about component types, refer to React Server Components.
Related framework topicsAnchor link to section titled "Related framework topics"
ConsiderationsAnchor link to section titled "Considerations"
ShopifyProvideris specific to Hydrogen and currently doesn't work in Next.js or other frameworks.
- You can't have multiple instances of
ShopifyProviderwithin your app. Because it's not using
Context(which isn't currently supported in server components), all
<ShopifyProvider>instances share the same configuration for each request.
- You can dynamically define the Shopify connection information for each request to the server by providing a function in the Hydrogen configuration file. This is useful for aggregating multiple storefronts with a single Hydrogen app.