Choose a version:

getShopAnalytics

A function that queries for shop required analytics data to be used in the Analytics.Provider component.

Anchor to getShopAnalytics
getShopAnalytics(
input1
)

Anchor to getShopAnalytics-parametersParameters

Anchor to input1 input1 required

Anchor to getShopAnalytics-returnsReturns

Promise< | null>

ShopAnalyticsProps

publicStorefrontId
The `PUBLIC_STOREFRONT_ID` generated by Oxygen in the environment variable.
```
string
```
storefront
The storefront client instance created by [`createStorefrontClient`](docs/api/hydrogen/utilities/createstorefrontclient).
```
Storefront
```

Storefront

Interface to interact with the Storefront API.

cache
The **`Cache`** interface provides a persistent storage mechanism for Request / Response object pairs that are cached in long lived memory. Available only in secure contexts. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Cache)
```
Cache
```

CacheCustom

(overrideOptions: AllCacheOptions) => AllCacheOptions

CacheLong

(overrideOptions?: AllCacheOptions) => AllCacheOptions

CacheNone
```
() => NoStoreStrategy
```

CacheShort

(overrideOptions?: AllCacheOptions) => AllCacheOptions

forward

Forwards the request to the Storefront API. It reads the API version from the request URL.

(request: Request, options?: Pick<StorefrontCommonExtraParams, "storefrontApiVersion">) => Promise<Response>

forwardMcp
Forwards the request to the Storefront MCP endpoint.
```
(request: Request) => Promise<Response>
```

generateCacheControlHeader

(cacheOptions: AllCacheOptions) => string

getApiUrl

(props?: Partial<Pick<StorefrontClientProps, "storefrontApiVersion" | "storeDomain">>) => string

getHeaders
```
() => Record<string, string>
```

getPrivateTokenHeaders

(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "privateStorefrontToken"> & { buyerIp?: string; }) => Record<string, string>

getPublicTokenHeaders

(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "publicStorefrontToken">) => Record<string, string>

getShopifyDomain

(props?: Partial<Pick<StorefrontClientProps, "storeDomain">>) => string

i18n
```
TI18n
```
isMcpUrl
Checks if the request URL matches the Storefront MCP endpoint.
```
(request: { url?: string; }) => boolean
```
isStorefrontApiUrl
Checks if the request URL matches the Storefront API GraphQL endpoint.
```
(request: { url?: string; }) => boolean
```

mutate

<
    OverrideReturnType extends any = never,
    RawGqlString extends string = string,
  >(
    mutation: RawGqlString,
    ...options: ClientVariablesInRestParams<
      StorefrontMutations,
      RawGqlString,
      StorefrontCommonExtraParams,
      AutoAddedVariableNames
    >
  ) => Promise<
    ClientReturn<StorefrontMutations, RawGqlString, OverrideReturnType> &
      StorefrontError
  >

query

<
    OverrideReturnType extends any = never,
    RawGqlString extends string = string,
  >(
    query: RawGqlString,
    ...options: ClientVariablesInRestParams<
      StorefrontQueries,
      RawGqlString,
      StorefrontCommonExtraParams & Pick<StorefrontQueryOptions, 'cache'>,
      AutoAddedVariableNames
    >
  ) => Promise<
    ClientReturn<StorefrontQueries, RawGqlString, OverrideReturnType> &
      StorefrontError
  >

setCollectedSubrequestHeaders
Sets the collected subrequest headers in the response. Useful to forward the cookies and server-timing headers from server subrequests to the browser.
```
(response: { headers: Headers; }) => void
```

AllCacheOptions

Override options for a cache strategy.

maxAge
The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
```
number
```
mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
sMaxAge
Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
```
number
```
staleIfError
Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
```
number
```
staleWhileRevalidate
Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).
```
number
```

NoStoreStrategy

mode
```
string
```

StorefrontCommonExtraParams

displayName
```
string
```
headers
```
HeadersInit
```
storefrontApiVersion
```
string
```

StorefrontClientProps

contentType
Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"` Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`
```
'json' | 'graphql'
```
privateStorefrontToken
The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details.
```
string
```
publicStorefrontToken
The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.
```
string
```
storeDomain
The host name of the domain (eg: `{shop}.myshopify.com`).
```
string
```
storefrontApiVersion
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.
```
string
```

StorefrontMutations

Maps all the mutations found in the project to variables and return types.

AutoAddedVariableNames

'country' | 'language'

StorefrontError

errors
```
StorefrontApiErrors
```

StorefrontApiErrors

JsonGraphQLError[] | undefined

JsonGraphQLError

extensions
Reserved for implementors to extend the protocol however they see fit, and hence there are no additional restrictions on its contents.
```
{ [key: string]: unknown; }
```
locations
If an error can be associated to a particular point in the requested GraphQL document, it should contain a list of locations.
```
{ line: number; column: number; }[]
```
message
```
string
```
name
```
string
```
path
If an error can be associated to a particular field in the GraphQL result, it _must_ contain an entry with the key `path` that details the path of the response field which experienced the error. This allows clients to identify whether a null result is intentional or caused by a runtime error.
```
(string | number)[]
```
stack
```
string
```

StorefrontQueries

Maps all the queries found in the project to variables and return types.

StorefrontQueryOptions

StorefrontCommonExtraParams & {
  query: string;
  mutation?: never;
  cache?: CachingStrategy;
}

CachingStrategy

Use the `CachingStrategy` to define a custom caching mechanism for your data. Or use one of the pre-defined caching strategies: CacheNone, CacheShort, CacheLong.

maxAge
The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
```
number
```
mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
sMaxAge
Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
```
number
```
staleIfError
Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
```
number
```
staleWhileRevalidate
Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).
```
number
```

Headers

ShopAnalytics

acceptedLanguage
The language code that is being displayed to user.
```
LanguageCode
```
currency
The currency code that is being displayed to user.
```
CurrencyCode
```
hydrogenSubchannelId
The Hydrogen subchannel ID generated by Oxygen in the environment variable.
```
string | '0'
```
shopId
The shop ID.
```
string
```

CurrencyCode

Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10). This union type ensures useMoney works with data from either API.

StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode

Examples

import {Analytics, getShopAnalytics} from '@shopify/hydrogen';

import {Outlet, useLoaderData} from 'react-router';

export async function loader({context}) {

const {cart, env} = context;

const cartPromise = cart.get();

return {

cart: cartPromise,

shop: getShopAnalytics({

storefront: context.storefront,

publicStorefrontId: env.PUBLIC_STOREFRONT_ID,

}),

consent: {

checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,

storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,

withPrivacyBanner: true, // false stops the privacy banner from being displayed

// localize the privacy banner

country: context.storefront.i18n.country,

language: context.storefront.i18n.language,

};

}

export default function App() {

const data = useLoaderData();

return (

<head>

</head>

<body>

<Analytics.Provider

cart={data.cart}

shop={data.shop}

consent={data.consent}

</Analytics.Provider>

</body>

</html>

);

}