> ## Documentation Index > Fetch the complete documentation index at: https://docs.weaverse.io/llms.txt > Use this file to discover all available pages before exploring further. # Cookie Consent Banner > How to properly configure Shopify's cookie consent banner in Weaverse Hydrogen storefronts, including setup, troubleshooting, and GDPR/privacy compliance. # Cookie Consent Banner Shopify provides a built-in **cookie consent banner** that helps your store comply with privacy regulations like GDPR, CCPA, and ePrivacy. In Hydrogen storefronts, this banner requires specific configuration to work correctly because the standard Liquid-based initialization is not available. This guide walks you through the complete setup, common pitfalls, and how to verify the banner is working. ## How It Works Shopify's cookie consent system consists of two parts: 1. **Customer Privacy API** (`consent-tracking-api.js`) — Manages visitor consent state and cookies 2. **Privacy Banner** (`storefront-banner.js`) — The visible UI that collects consent from visitors In a Hydrogen storefront, these scripts are loaded by the `` component. The banner's appearance and behavior (text, regions, position) are configured in **Shopify Admin** under **Settings → Customer privacy**. The banner configuration (text, regions, theme) is managed entirely in Shopify Admin — not in your Hydrogen code. Your code only needs to pass the correct credentials. ## Setup ### Step 1: Configure the Consent Object in Your Root Loader In your root loader's critical data function (typically `app/.server/root.ts`), include a `consent` object with the required fields: ```typescript theme={null} import { getShopAnalytics } from "@shopify/hydrogen"; export async function loadCriticalData({ request, context }: LoaderFunctionArgs) { const { storefront, env } = context; return { // ... other data shop: getShopAnalytics({ storefront, publicStorefrontId: env.PUBLIC_STOREFRONT_ID, }), consent: { checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN, storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN, withPrivacyBanner: true, // Localize the banner based on the visitor's market country: storefront.i18n.country, language: storefront.i18n.language, }, }; } ``` The `storefrontAccessToken` must be your **public** Storefront API token (32 characters). Never use a private/admin API token (starts with `shpat_`). ### Step 2: Pass Consent to Analytics.Provider In your root layout (`app/root.tsx`), pass the `consent` object to Shopify's ``: ```tsx theme={null} import { Analytics } from "@shopify/hydrogen"; export function RootLayout({ children }: { children: React.ReactNode }) { const data = useRouteLoaderData("root"); return ( {data ? ( {/* Your app content */} ) : ( children )} ); } ``` ### Step 3: Pre-initialize the Storefront Access Token This is the **critical step** that most setups miss. The banner script (`storefront-banner.js`) loads and self-initializes before React hydrates. It looks for `window.Shopify.storefrontAccessToken` to authenticate with the Storefront API — but in Hydrogen, this value is normally only available after hydration. **You must inject the token in an inline script** so it's available before the banner script executes: ```tsx theme={null} export function RootLayout({ children }: { children: React.ReactNode }) { const nonce = useNonce(); const data = useRouteLoaderData("root"); return ( {/* Pre-initialize Shopify object with access token */}