Choose a version:

useShopifyCookies

Sets Shopify user and session cookies and refreshes the expiry time. Returns true when cookies are ready.

Anchor to useShopifyCookies
useShopifyCookies(
options
)

Optionally refreshes backend-managed cookies for standalone integrations. The Customer Privacy API owns tracking values and legacy cookie expiration.

If fetchTrackingValues is true, this sends a consent request through the Storefront API proxy, retrying against checkoutDomain if provided. Hydrogen's built-in analytics already delegates consent initialization to the Customer Privacy API and does not use this hook.

Anchor to useShopifyCookies-parametersParameters

Anchor to options options

Anchor to useShopifyCookies-returnsReturns
boolean

true when the consent request has settled and cookies are ready.

UseShopifyCookiesOptions

checkoutDomain
The checkout domain used if the same-origin consent request fails.
```
string
```
domain
```
string
```
fetchTrackingValues
```
boolean
```
hasUserConsent
```
boolean
```
ignoreDeprecatedCookies
```
boolean
```
storefrontAccessToken
```
string
```

Examples

import * as React from 'react';

import {useShopifyCookies} from '@shopify/hydrogen-react';

export default function App({Component, pageProps}) {

// Returns true when cookies are ready

const cookiesReady = useShopifyCookies({hasUserConsent: true});

if (!cookiesReady) {

return null;

}

return <Component {...pageProps} />;

}

Examples

Example code

Description

I am the default example

JavaScript

import * as React from 'react';
import {useShopifyCookies} from '@shopify/hydrogen-react';

export default function App({Component, pageProps}) {
  // Returns true when cookies are ready
  const cookiesReady = useShopifyCookies({hasUserConsent: true});

  if (!cookiesReady) {
    return null;
  }

  return <Component {...pageProps} />;
}

TypeScript

import * as React from 'react';
import {useShopifyCookies} from '@shopify/hydrogen-react';

export default function App({
  Component,
  pageProps,
}: {
  Component: React.ComponentType;
  pageProps: object;
}) {
  // Returns true when cookies are ready
  const cookiesReady = useShopifyCookies({hasUserConsent: true});

  if (!cookiesReady) {
    return null;
  }

  return <Component {...pageProps} />;
}