ShopifyProvider
The ShopifyProvider component wraps your entire app and provides functionality for many components, hooks, and utilities. The ShopifyProvider component also provides localization data for the app. You should place it in your app's entry point component.
ShopifyProvider in the Hydrogen framework
Anchor link to section titled "ShopifyProvider in the Hydrogen framework"If you're using the Hydrogen framework, then you need to import ShopifyProvider from the @shopify/hydrogen package and use it in App.server.jsx.
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.
Considerations
Anchor link to section titled "Considerations"- This version of
ShopifyProvideris specific to Hydrogen and currently doesn't work in Next.js or other frameworks. Learn how to useShopifyProviderwith 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.
ShopifyProvider in alternate frameworks
Anchor link to section titled "ShopifyProvider in alternate frameworks"If you're using a third-party framework, such as Next.js, you should import ShopifyProvider from React Storefront Kit using the @shopify/storefront-kit-react package.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| storefrontId? | string |
The globally unique identifier for the Shop |
| storeDomain | string |
The host name of the domain (eg: {shop}.myshopify.com). If a URL with a scheme (for example https://) is passed in, then the scheme is removed. |
| storefrontToken | string |
The Storefront API public access token. Refer to the authentication documentation for more details. |
| storefrontApiVersion | string |
The Storefront API version. This should almost always be the same as the version React Storefront Kit was built for. Learn more about Shopify API versioning for more details. |
| country? | {isoCode: CountryCode} |
The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the CountryCode enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code ES, and the territories associated with the United States of America are represented by the country code US. |
| language? | {isoCode: LanguageCode} |
ISO 369 language codes supported by Shopify. |
| locale? | string |
The locale string based on country and language. |
Considerations
Anchor link to section titled "Considerations"- This version of
ShopifyProvideris meant to only be used on the client. To make API calls from the server, check out thecreateShopifyClient()helper.