Integrate with Hydrogen

Avada Cookie Consent supports Shopify Hydrogen storefronts through a dedicated SDK. This guide walks you through the integration process.

Set Up Your Hydrogen Store

Make sure your Hydrogen store is set up and running. If you haven't set up a Hydrogen store yet, follow the Shopify Hydrogen documentation (opens in a new tab).

Install the SDK

Install the Avada Cookie Consent Hydrogen SDK:

npm install avada-cookie-bar-hydrogen-sdk-v2

Implement the Integration

Follow these three sub-steps to integrate the SDK into your Hydrogen store:

Load Data in Root Loader

In your root.jsx (or root.tsx) file, use the getCookieBarConfigShop function in the loader to fetch your cookie bar configuration:

import { getCookieBarConfigShop } from 'avada-cookie-bar-hydrogen-sdk-v2'
 
export async function loader({ context }) {
  const cookieBarConfig = await getCookieBarConfigShop({
    shopDomain: context.env.PUBLIC_STORE_DOMAIN,
  })
 
  return {
    // ...other data
    cookieBarConfig,
  }
}

Initialize the Cookie Consent

In your root component, use the useAvadaCookieConsent hook to initialize the cookie consent banner:

import { useAvadaCookieConsent } from 'avada-cookie-bar-hydrogen-sdk-v2'
 
export default function App() {
  const data = useLoaderData()
  useAvadaCookieConsent(data.cookieBarConfig)
 
  return (
    // ...your app markup
  )
}

Add CSP Whitelist

In your entry.server.jsx (or entry.server.tsx), add the Avada Cookie Consent domains to your Content Security Policy whitelist:

const CSP_WHITELIST = [
  'https://cdn.avada.io',
  'https://api.avada.io',
]
 
// Add these to your CSP headers
// script-src: 'self' https://cdn.avada.io
// connect-src: 'self' https://api.avada.io

Turn On the Integration

After implementing the SDK, go to the Avada Cookie Consent app and navigate to Integrations > Hydrogen. Click Turn on to enable the integration.

Test the Integration

Visit your Hydrogen storefront and verify that:

The cookie consent banner appears correctly.
Consent choices are saved and respected.
Cookies are blocked/allowed based on visitor consent.

The Hydrogen SDK supports all the same features as the standard Shopify integration, including consent mode signals, cookie categorization, and preference management.

Test GPC Integration Swym Wishlist