> ## Documentation Index
> Fetch the complete documentation index at: https://www.pagent.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Hydrogen

> Add pagent to a headless Shopify store built with Hydrogen.

Hydrogen renders your storefront with React Router, so pagent goes into the document `<head>` in `app/root.tsx`, with `data-await-hydration="true"`. How you allow it in the Content Security Policy depends on your Hydrogen version.

## Hydrogen 2026.4 and earlier

These versions set a Content Security Policy for you, so the script needs the policy's nonce, and the policy needs pagent's domains.

### Add the script

Add the tag at the top of the `<head>` in your `Layout`, with the nonce Hydrogen already gives you:

```tsx app/root.tsx theme={"dark"}
export function Layout({ children }: { children?: React.ReactNode }) {
  const nonce = useNonce();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <script
          nonce={nonce}
          src="https://cdn.pagent.ai/js/sdk.js"
          data-client-key="YOUR_CLIENT_KEY"
          data-await-hydration="true"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration nonce={nonce} />
        <Scripts nonce={nonce} />
      </body>
    </html>
  );
}
```

### Allow pagent in the Content Security Policy

In `app/entry.server.tsx`, pass pagent's domains to `createContentSecurityPolicy`:

```ts app/entry.server.tsx theme={"dark"}
const { nonce, header, NonceProvider } = createContentSecurityPolicy({
  shop: {
    checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
  },
  scriptSrc: [
    "'self'",
    "https://cdn.shopify.com",
    "https://cdn.pagent.ai",
  ],
  connectSrc: [
    "https://cdn.pagent.ai",
    "https://ingest.pagent.ai",
    "https://app.pagent.ai",
  ],
});
```

> [!WARNING]
>
> Hydrogen's default policy has no `script-src`, so scripts fall back to `default-src`. Once you pass `scriptSrc`, it contains only your list plus the nonce: keep `'self'` and `https://cdn.shopify.com` in it, and add `http://localhost:*` for local development. `connectSrc` is merged with Hydrogen's defaults.

Tests that change JavaScript also need `'unsafe-eval'` in `scriptSrc`. Without it, those JavaScript changes don't apply.

## Hydrogen 2026.10 and later

Hydrogen 2026.10 removed `useNonce` and `createContentSecurityPolicy`: your app owns its Content Security Policy now. Add the same tag without `nonce`:

```tsx app/root.tsx theme={"dark"}
<script
  src="https://cdn.pagent.ai/js/sdk.js"
  data-client-key="YOUR_CLIENT_KEY"
  data-await-hydration="true"
/>
```

If your app sets its own policy, add pagent's domains to it as listed under [Frameworks](https://www.pagent.ai/docs/install/frameworks.md#content-security-policy). If you use nonces, pass yours to the tag.

## Both versions

* **Navigation** between routes is tracked automatically.

To count orders from Shopify's checkout, add the [order-tracking pixel](https://www.pagent.ai/docs/install/shopify.md#count-orders-and-revenue) as on any Shopify store. See [Frameworks](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules.

## Check it worked

1. Deploy, then open your site in a private browser window.
2. Back in pagent, click **Check connection** in the install step.
3. Open a test's preview link and check that the variant shows and stays after the page has finished loading.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.