Skip to main content

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
)

Sets the shopify_y and shopify_s cookies in the browser based on user consent for backward compatibility support.

If fetchTrackingValues is true, it makes a request to Storefront API to fetch or refresh Shopiy analytics and marketing cookies and tracking values. Generally speaking, this should only be needed if you're not using Hydrogen's built-in analytics components and hooks that already handle this automatically. For example, set it to true if you are using hydrogen-react only with a different framework and still need to make a same-domain request to Storefront API to set cookies.

If ignoreDeprecatedCookies is true, it skips setting the deprecated cookies entirely. Useful when you only want to use the newer tracking values and not rely on the deprecated ones.

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
```

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} />;
}

Anchor to RelatedRelated

sendShopifyAnalytics

getClientBrowserParameters

getTrackingValues

Was this page helpful?