Shopify · fredericoo · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026
@@ -0,0 +1,5 @@
+---
+"@shopify/hydrogen": patch
+---
+
+Re-export `ShopifyProvider`, `useShop`, and `SFAPI_VERSION` from `@shopify/hydrogen` so these can be imported without reaching into `@shopify/hydrogen-react` directly. Add `apiVersion` to the `storefront` object returned by `createStorefrontClient`, giving loaders access to the resolved Storefront API version.
@@ -0,0 +1,7 @@
+---
+"skeleton": patch
+"@shopify/cli-hydrogen": patch
+"@shopify/create-hydrogen": patch
+---
+
+Add `ShopifyProvider` to the skeleton template so that `Money` and other locale-aware components format values using your store's configured locale instead of defaulting to `en-US`. Also sets the `<html lang>` attribute dynamically based on the store's language setting.
@@ -1,7 +1,7 @@
-index df87425c..5a0fef09 100644
+index b7eb81513..c2ae52c9b 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -16,9 +16,39 @@ import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+@@ -21,9 +21,39 @@ import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
  import resetStyles from '~/styles/reset.css?url';
  import appStyles from '~/styles/app.css?url';
  import {PageLayout} from './components/PageLayout';
@@ -41,20 +41,20 @@ index df87425c..5a0fef09 100644
  /**
   * This is important to avoid re-fetching root queries on sub-navigations
   */
-@@ -176,9 +206,13 @@ export default function App() {
-       shop={data.shop}
-       consent={data.consent}
-     >
--      <PageLayout {...data}>
--        <Outlet />
--      </PageLayout>
-+      {/* @description Wrap PageLayout with B2B location provider for company location management */}
-+      <B2BLocationProvider>
-+        <PageLayout {...data}>
-+          <Outlet />
-+        </PageLayout>
-+        <B2BLocationSelector />
-+      </B2BLocationProvider>
-     </Analytics.Provider>
+@@ -193,9 +223,13 @@ export default function App() {
+         shop={data.shop}
+         consent={data.consent}
+       >
+-        <PageLayout {...data}>
+-          <Outlet />
+-        </PageLayout>
++        {/* @description Wrap PageLayout with B2B location provider for company location management */}
++        <B2BLocationProvider>
++          <PageLayout {...data}>
++            <Outlet />
++          </PageLayout>
++          <B2BLocationSelector />
++        </B2BLocationProvider>
+       </Analytics.Provider>
+     </ShopifyProvider>
    );
- }
@@ -1,7 +1,7 @@
-index df87425c..1ba9888f 100644
+index b7eb81513..859bccb7e 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -11,46 +11,20 @@ import {
+@@ -16,46 +16,20 @@ import {
    useRouteLoaderData,
  } from 'react-router';
  import type {Route} from './+types/root';
@@ -49,7 +49,7 @@ index df87425c..1ba9888f 100644
  export function links() {
    return [
      {
-@@ -61,18 +35,19 @@ export function links() {
+@@ -66,18 +40,19 @@ export function links() {
        rel: 'preconnect',
        href: 'https://shop.app',
      },
@@ -76,7 +76,7 @@ index df87425c..1ba9888f 100644
 
    return {
      ...deferredData,
-@@ -86,59 +61,29 @@ export async function loader(args: Route.LoaderArgs) {
+@@ -94,59 +69,29 @@ export async function loader(args: Route.LoaderArgs) {
        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
        withPrivacyBanner: false,
@@ -149,7 +149,7 @@ index df87425c..1ba9888f 100644
  }
 
  export function Layout({children}: {children?: React.ReactNode}) {
-@@ -149,8 +94,7 @@ export function Layout({children}: {children?: React.ReactNode}) {
+@@ -159,8 +104,7 @@ export function Layout({children}: {children?: React.ReactNode}) {
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -159,21 +159,21 @@ index df87425c..1ba9888f 100644
          <Meta />
          <Links />
        </head>
-@@ -176,9 +120,11 @@ export default function App() {
-       shop={data.shop}
-       consent={data.consent}
-     >
--      <PageLayout {...data}>
-+      <div className="PageLayout">
-+        <h1>{data.layout?.shop?.name} (Express example)</h1>
-+        <h2>{data.layout?.shop?.description}</h2>
-         <Outlet />
--      </PageLayout>
-+      </div>
-     </Analytics.Provider>
+@@ -193,9 +137,11 @@ export default function App() {
+         shop={data.shop}
+         consent={data.consent}
+       >
+-        <PageLayout {...data}>
++        <div className="PageLayout">
++          <h1>{data.layout?.shop?.name} (Express example)</h1>
++          <h2>{data.layout?.shop?.description}</h2>
+           <Outlet />
+-        </PageLayout>
++        </div>
+       </Analytics.Provider>
+     </ShopifyProvider>
    );
- }
-@@ -207,3 +153,19 @@ export function ErrorBoundary() {
+@@ -225,3 +171,19 @@ export function ErrorBoundary() {
      </div>
    );
  }

@@ -1,21 +1,23 @@
-index df87425c..aa25c6d7 100644
+index b7eb81513..65cf4e992 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -1,4 +1,4 @@
--import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
-+import {Analytics, getShopAnalytics, useNonce, Script} from '@shopify/hydrogen';
+@@ -3,6 +3,7 @@ import {
+   getShopAnalytics,
+   ShopifyProvider,
+   useNonce,
++  Script,
+ } from '@shopify/hydrogen';
  import {
    Outlet,
-   useRouteError,
-@@ -16,6 +16,7 @@ import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+@@ -21,6 +22,7 @@ import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
  import resetStyles from '~/styles/reset.css?url';
  import appStyles from '~/styles/app.css?url';
  import {PageLayout} from './components/PageLayout';
 +import {GoogleTagManager} from '~/components/GoogleTagManager';
 
  export type RootLoader = typeof loader;
 
-@@ -153,8 +154,32 @@ export function Layout({children}: {children?: React.ReactNode}) {
+@@ -163,8 +165,32 @@ export function Layout({children}: {children?: React.ReactNode}) {
          <link rel="stylesheet" href={appStyles}></link>
          <Meta />
          <Links />
@@ -48,12 +50,12 @@ index df87425c..aa25c6d7 100644
          {children}
          <ScrollRestoration nonce={nonce} />
          <Scripts nonce={nonce} />
-@@ -179,6 +204,8 @@ export default function App() {
-       <PageLayout {...data}>
-         <Outlet />
-       </PageLayout>
-+      {/* @description Initialize Google Tag Manager analytics integration */}
-+      <GoogleTagManager />
-     </Analytics.Provider>
+@@ -196,6 +222,8 @@ export default function App() {
+         <PageLayout {...data}>
+           <Outlet />
+         </PageLayout>
++        {/* @description Initialize Google Tag Manager analytics integration */}
++        <GoogleTagManager />
+       </Analytics.Provider>
+     </ShopifyProvider>
    );
- }
@@ -1,22 +1,23 @@
-index df87425c..aa6f5166 100644
+index b7eb81513..7205a0143 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -1,5 +1,6 @@
- import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
+@@ -5,6 +5,7 @@ import {
+   useNonce,
+ } from '@shopify/hydrogen';
  import {
 +  data,
    Outlet,
    useRouteError,
    isRouteErrorResponse,
-@@ -11,6 +12,7 @@ import {
+@@ -16,6 +17,7 @@ import {
    useRouteLoaderData,
  } from 'react-router';
  import type {Route} from './+types/root';
 +import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
  import favicon from '~/assets/favicon.svg';
  import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
  import resetStyles from '~/styles/reset.css?url';
-@@ -65,6 +67,9 @@ export function links() {
+@@ -70,6 +72,9 @@ export function links() {
    ];
  }
 
@@ -26,14 +27,17 @@ index df87425c..aa6f5166 100644
  export async function loader(args: Route.LoaderArgs) {
    // Start fetching non-critical data without blocking time to first byte
    const deferredData = loadDeferredData(args);
-@@ -74,23 +79,38 @@ export async function loader(args: Route.LoaderArgs) {
+@@ -79,26 +84,41 @@ export async function loader(args: Route.LoaderArgs) {
 
    const {storefront, env} = args.context;
 
 -  return {
 -    ...deferredData,
 -    ...criticalData,
 -    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+-    publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+-    storefrontApiVersion: storefront.apiVersion,
+-    i18n: storefront.i18n,
 -    shop: getShopAnalytics({
 -      storefront,
 -      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
@@ -61,6 +65,9 @@ index df87425c..aa6f5166 100644
 +      // @description Include isLoggedIn status for legacy authentication
 +      isLoggedIn,
 +      publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
++      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
++      storefrontApiVersion: storefront.apiVersion,
++      i18n: storefront.i18n,
 +      shop: getShopAnalytics({
 +        storefront,
 +        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
@@ -81,7 +88,7 @@ index df87425c..aa6f5166 100644
  }
 
  /**
-@@ -207,3 +227,39 @@ export function ErrorBoundary() {
+@@ -225,3 +245,39 @@ export function ErrorBoundary() {
      </div>
    );
  }

@@ -1,23 +1,23 @@
-index df87425c..97ca8174 100644
+index b7eb81513..7a64b33e8 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -77,6 +77,7 @@ export async function loader(args: Route.LoaderArgs) {
+@@ -82,6 +82,7 @@ export async function loader(args: Route.LoaderArgs) {
    return {
      ...deferredData,
      ...criticalData,
 +    selectedLocale: args.context.storefront.i18n,
      publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
-     shop: getShopAnalytics({
-       storefront,
-@@ -176,7 +177,10 @@ export default function App() {
-       shop={data.shop}
-       consent={data.consent}
-     >
--      <PageLayout {...data}>
-+      <PageLayout
-+        key={`${data.selectedLocale.language}-${data.selectedLocale.country}`}
-+        {...data}
-+      >
-         <Outlet />
-       </PageLayout>
-     </Analytics.Provider>
+     publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+     storefrontApiVersion: storefront.apiVersion,
+@@ -193,7 +194,10 @@ export default function App() {
+         shop={data.shop}
+         consent={data.consent}
+       >
+-        <PageLayout {...data}>
++        <PageLayout
++          key={`${data.selectedLocale.language}-${data.selectedLocale.country}`}
++          {...data}
++        >
+           <Outlet />
+         </PageLayout>
+       </Analytics.Provider>
@@ -1,7 +1,7 @@
-index df87425c..12434050 100644
+index b7eb81513..c265a7e69 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -90,6 +90,8 @@ export async function loader(args: Route.LoaderArgs) {
+@@ -98,6 +98,8 @@ export async function loader(args: Route.LoaderArgs) {
        country: args.context.storefront.i18n.country,
        language: args.context.storefront.i18n.language,
      },

@@ -1,14 +1,12 @@
-index df87425c..a2c2acc8 100644
+index b7eb81513..aeefab1a5 100644
 --- a/templates/skeleton/app/root.tsx
 +++ b/templates/skeleton/app/root.tsx
-@@ -1,4 +1,15 @@
--import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
-+import {
-+  Analytics,
-+  getShopAnalytics,
-+  useNonce,
+@@ -3,7 +3,14 @@ import {
+   getShopAnalytics,
+   ShopifyProvider,
+   useNonce,
 +  type HydrogenSession,
-+} from '@shopify/hydrogen';
+ } from '@shopify/hydrogen';
 +
 +// @description Define CustomerAccessToken type for multipass
 +type CustomerAccessToken = {
@@ -18,7 +16,7 @@ index df87425c..a2c2acc8 100644
  import {
    Outlet,
    useRouteError,
-@@ -110,7 +121,14 @@ async function loadCriticalData({context}: Route.LoaderArgs) {
+@@ -118,7 +125,14 @@ async function loadCriticalData({context}: Route.LoaderArgs) {
      // Add other queries here, so that they are loaded in parallel
    ]);
 
@@ -34,7 +32,7 @@ index df87425c..a2c2acc8 100644
  }
 
  /**
-@@ -207,3 +225,24 @@ export function ErrorBoundary() {
+@@ -225,3 +239,24 @@ export function ErrorBoundary() {
      </div>
    );
  }