export async function loadCriticalData({ context }: LoaderFunctionArgs) {
  const { storefront, env } = context;
  const storefrontId = env.PUBLIC_STOREFRONT_ID || "";

  return {
    // ... other data
    shopifyScripts: {
      shop: {
        shopId: env.SHOP_ID, // or the Shop GID from a Storefront API query
        storefrontId,
        myshopifyDomain: env.PUBLIC_STORE_DOMAIN,
      },
      // Localizes the banner based on the visitor's market
      i18n: {
        country: storefront.i18n.country,
        language: storefront.i18n.language,
        pathPrefix: storefront.i18n.pathPrefix,
        currency: storefront.i18n.currency,
      },
      channel: storefrontId ? "hydrogen" : "headless",
      shopifyAnalytics: storefrontId !== "",
    },
    consent: {
      // Shopify's hosted privacy banner (classic `withPrivacyBanner: true`)
      mode: "default-banner",
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
    },
  };
}

import { ShopifyScripts } from "@shopify/hydrogen/react";
import { useNavigate, useRouteLoaderData } from "react-router";
import { useNonce } from "~/utils/csp";
import { routeTemplates } from "~/utils/route-templates";

export function Layout({ children }: { children: React.ReactNode }) {
  const nonce = useNonce();
  const navigate = useNavigate();
  const data = useRouteLoaderData<RootLoader>("root");

  return (
    <html>
      <head>
        {/* Step 3 */}
        {data ? (
          <ShopifyScripts
            nonce={nonce}
            shop={data.shopifyScripts.shop}
            i18n={data.shopifyScripts.i18n}
            analytics={{ channel: data.shopifyScripts.channel }}
            shopifyAnalytics={data.shopifyScripts.shopifyAnalytics}
            consent={{ mode: data.consent.mode }}
            routes={routeTemplates}
            navigate={navigate}
          />
        ) : null}
      </head>
      <body>{children}</body>
    </html>
  );
}

<head>
  {/* storefront-banner.js reads the public token from this tag */}
  <script
    id="shopify-features"
    type="application/json"
    suppressHydrationWarning
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        accessToken: data?.consent?.storefrontAccessToken ?? "",
      }),
    }}
  />
  {/* <ShopifyScripts ... /> from Step 2 */}
</head>

PUBLIC_STORE_DOMAIN=your-store.myshopify.com
PUBLIC_STOREFRONT_API_TOKEN=your-32-character-public-token
PUBLIC_CHECKOUT_DOMAIN=checkout.your-domain.com

https://your-store.com/?preview_privacy_banner=1

// Should return an object with consent methods
window.Shopify.customerPrivacy

// Should return a boolean
window.Shopify.customerPrivacy.shouldShowBanner()

// Should return the current consent state
window.Shopify.customerPrivacy.currentVisitorConsent()

1. Server renders HTML with:
   <script id="shopify-features">{"accessToken":"abc123..."}</script>
   <ShopifyScripts consent={{ mode: "default-banner" }} ... />

2. Browser loads storefront-banner.js (from Shopify CDN)
   → Finds the public access token ✓
   → Calls Storefront API to get consent cookies
   → Calls Storefront API to get banner configuration
   → Sets window.Shopify.customerPrivacy
   → Sets window.privacyBanner

3. ShopifyScripts loads the banner for the market in its i18n prop
   → Banner renders with correct localization
   → The analytics bus (window.Shopify.analytics) follows consent

4. Visitor interacts with banner
   → Consent collected → _tracking_consent cookie set
   → Analytics events fire based on consent