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
)

Manages Shopify cookies. If hasUserConsent option is false, deprecated cookies will be removed. Returns true when cookies are ready.

Anchor to useShopifyCookies-parametersParameters

Anchor to options options

Anchor to useShopifyCookies-returnsReturns
boolean

true when cookies are set and ready.

UseShopifyCookiesOptions

CoreShopifyCookiesOptions & {
  /**
   * If set to `false`, Shopify cookies will be removed.
   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
   * Defaults to false.
   **/
  hasUserConsent?: boolean;
  /**
   * The domain scope of the cookie. Defaults to empty string.
   **/
  domain?: string;
  /**
   * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.
   */
  checkoutDomain?: string;
  /**
   * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
   */
  ignoreDeprecatedCookies?: boolean;
}

CoreShopifyCookiesOptions

checkoutDomain
```
string
```
fetchTrackingValues
```
boolean
```
storefrontAccessToken
```
string
```

{
  storefrontAccessToken?: string;
  fetchTrackingValues?: boolean;
  checkoutDomain?: 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} />;
}