Integrate with Hydrogen

Hand-on guide on how to integrate Avada Cookie Consent seamlessly with Shopify Hydrogen store.

Setup for Integrate Avada Cookie Consent with Hydrogen

Step 1: How to set up your Hydrogen store

If you've already developed your Hydrogen store, you're all set! However, if you haven't started yet or are looking to test a Hydrogen store with Avada Cookie Consent, don't worry. You can easily set up a quick-start Hydrogen store by following this guide: Getting Started with Hydrogen.

If you are not on Shopify Plus plan but still want to test this out with the development store first. You can update your .env file with Storefront API key from your Custom App

SESSION_SECRET="foobar"
PUBLIC_STOREFRONT_API_TOKEN="YOUR_KEY"
PUBLIC_STORE_DOMAIN="YOUR_STORE.myshopify.com"

Step 2: Installation

npm install avada-cookie-bar-hydrogen-sdk

# or

yarn add avada-cookie-bar-hydrogen-sdk

Step 3: Implementation

1. Load Avada Cookie Consent Data:

In your app/root.jsx loader:

import {getCookieBarConfigShop} from 'avada-cookie-bar-hydrogen-sdk';

async function loadCriticalData({context}) {
 const {storefront} = context;
 const [header, shopQuery] = await Promise.all([
   storefront.query(HEADER_QUERY, {
     cache: storefront.CacheLong(),
     variables: {
       headerMenuHandle: 'main-menu', // Adjust to your header menu handle
     },
   }),
   getCookieBarConfigShop(storefront),
   // Add other queries here, so that they are loaded in parallel
 ]);
 return {
   header,
   shopData: shopQuery?.shop,
 };
}

1. Initialize Avada Cookie Consent in Root Layout

In your app/root.jsx:

import {useAvadaCookieConsent} from 'avada-cookie-bar-hydrogen-sdk';
export default function App() {
 const data = useLoaderData();
 useAvadaCookieConsent(data);
 return <Outlet />;
}

1. Add CSP whitelist:

Update your entry.server.jsx to include the CSP whitelist for Avada Cookie Consent:

import {RemixServer} from '@remix-run/react';
import {isbot} from 'isbot';
import {renderToReadableStream} from 'react-dom/server';
import {createContentSecurityPolicy} from '@shopify/hydrogen';

/**
 * @param {Request} request
 * @param {number} responseStatusCode
 * @param {Headers} responseHeaders
 * @param {EntryContext} remixContext
 * @param {AppLoadContext} context
 */
export default async function handleRequest(
  request,
  responseStatusCode,
  responseHeaders,
  remixContext,
  context,
) {
  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    shop: {
      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
    },
    scriptSrc: [
      'self',
      ...(process.env.NODE_ENV !== 'production' ? ['unsafe-eval'] : []),
      'https://cdn.shopify.com',
      'https://shopify.com',
      ...(process.env.NODE_ENV !== 'production'
        ? ['https://localhost:*', 'http://localhost:*']
        : []),
      'https://geoip.apps.getjoy.ai',
      'https://cdnapps.avada.io',
    ],
    connectSrc: [
      'self',
      'https://cdn.shopify.com',
      'https://shop.app',
      'https://monorail-edge.shopifysvc.com',
      'https://geoip.apps.getjoy.ai',
      'https://thomas-shopify-production-36.myshopify.com',
      'ws://127.0.0.1:*',
      'ws://localhost:*',
      'ws://*:*',
      'https://cdnapps.avada.io',
    ],
    styleSrc: [
      'self',
      'unsafe-inline',
      'https://cdn.shopify.com',
      'https://cdn.builder.io',
      'https://fonts.bunny.net',
      'https://fonts.googleapis.com',
    ],
    fontSrc: [
      'self',
      'https://fonts.bunny.net',
      'data:',
      'https://fonts.gstatic.com',
    ],
  });

  const body = await renderToReadableStream(
    <NonceProvider>
      <RemixServer context={remixContext} url={request.url} nonce={nonce} />
    </NonceProvider>,
    {
      nonce,
      signal: request.signal,
      onError(error) {
        console.error(error);
        responseStatusCode = 500;
      },
    },
  );

  if (isbot(request.headers.get('user-agent'))) {
    await body.allReady;
  }

  responseHeaders.set('Content-Type', 'text/html');
  responseHeaders.set('Content-Security-Policy', header);

  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
}

/** @typedef {import('@shopify/remix-oxygen').EntryContext} EntryContext */
/** @typedef {import('@shopify/remix-oxygen').AppLoadContext} AppLoadContext */

Turn on the integration in-app

Now, let's head back to the Hydrogen integration screen.

Click 'Turn on' to integrate the Avada Consent banner with your Hydrogen store.

Test the integration

After these are implemented, you will see the Cookie banner displays on your custom storefront according to your settings. However, you can compare the banner on the custom storefront and the Online Store channel to make sure both are working properly.