---
title: ShopifyProvider
description: >-
  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. When `sameDomainForStorefrontApi` is
  enabled, Storefront API requests use the current origin, which requires a
  proxy setup.
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/shopifyprovider
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/shopifyprovider.md
---

# Shopify​Provider

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. When `sameDomainForStorefrontApi` is enabled, Storefront API requests use the current origin, which requires a proxy setup.

## Props

* **countryIsoCode**

  **CountryCode**

  **required**

  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`.

* **languageIsoCode**

  **LanguageCode**

  **required**

  `ISO 369` language codes supported by Shopify.

* **storeDomain**

  **string**

  **required**

  The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`).

* **storefrontApiVersion**

  **string**

  **required**

  The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.

* **storefrontToken**

  **string**

  **required**

  The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.

* **children**

  **ReactNode**

  React children to render.

* **sameDomainForStorefrontApi**

  **boolean**

  Uses the current window\.location.origin for Storefront API requests. This requires setting up a proxy for Storefront API requests in your domain.

* **storefrontId**

  **string**

  The globally-unique identifier for the Shop

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {ShopifyProvider, useShop} from '@shopify/hydrogen-react';

  export default function App() {
    return (
      <ShopifyProvider
        storeDomain="my-store"
        storefrontToken="abc123"
        storefrontApiVersion="2022-10"
        countryIsoCode="CA"
        languageIsoCode="EN"
      >
        <UsingUseShop />
      </ShopifyProvider>
    );
  }

  export function UsingUseShop() {
    const shop = useShop();

    return (
      <>
        <div>{shop.storeDomain}</div>
        <div>{shop.storefrontToken}</div>
        <div>{shop.storefrontApiVersion}</div>
      </>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {ShopifyProvider, useShop} from '@shopify/hydrogen-react';

  export default function App() {
    return (
      <ShopifyProvider
        storeDomain="my-store"
        storefrontToken="abc123"
        storefrontApiVersion="2022-10"
        countryIsoCode="CA"
        languageIsoCode="EN"
      >
        <UsingUseShop />
      </ShopifyProvider>
    );
  }

  export function UsingUseShop() {
    const shop = useShop();

    return (
      <>
        <div>{shop.storeDomain}</div>
        <div>{shop.storefrontToken}</div>
        <div>{shop.storefrontApiVersion}</div>
      </>
    );
  }
  ```

## Related

[- useShop](https://shopify.dev/api/hydrogen-react/hooks/useshop)