ShopifyProvider
The 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 App.server.jsx.
The 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 countryCode and languageCode props.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| shopifyConfig? | ShopifyConfig | ShopifyConfigFetcher |
Shopify connection information. Defaults to the shopify property in the hydrogen.config.js file. |
| countryCode? | string |
The code designating a country or region, which generally follows ISO 3166-1 alpha-2 guidelines. |
| languageCode? | string |
The ISO 639-1 language codes supported by Shopify. |
| children? | React |
Any ReactNode elements. |
Component type
Anchor link to section titled "Component type"The 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 topics
Anchor link to section titled "Related framework topics"Considerations
Anchor 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 usingContext(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.