Quick Answer

Install the @consentico/web package and add the ConsentBanner component to your app. Same features as the Shopify theme extension, just imported as React.

This guide is for headless storefronts (Hydrogen, Next.js, custom builds). If you're using a standard Shopify theme, use the regular install guide.

Installation

npm install @consentico/web

Basic usage

import { ConsentBanner } from "@consentico/web";

export default function App() {
  return (
    <>
      {/* Your app content */}
      <ConsentBanner shopDomain="your-store.myshopify.com" />
    </>
  );
}

That's it. The banner will:

Fetch your configuration from Consentico
Show the consent UI
Block tracking scripts until consent
Send Google Consent Mode signals
Log consent decisions

Hydrogen example

In your Hydrogen app's root layout:

// app/root.jsx
import { ConsentBanner } from "@consentico/web";

export default function Root() {
  return (
    <html>
      <head>{/* ... */}</head>
      <body>
        <Outlet />
        <ConsentBanner shopDomain="your-store.myshopify.com" />
      </body>
    </html>
  );
}

Next.js example

In your _app.tsx or root layout:

// pages/_app.tsx
import { ConsentBanner } from "@consentico/web";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ConsentBanner shopDomain="your-store.myshopify.com" />
    </>
  );
}

Configuration

The component accepts the same configuration as the Shopify theme extension. You can either:

Configure in the Consentico dashboard — settings are fetched automatically
Pass props directly — for full control

<ConsentBanner
  shopDomain="your-store.myshopify.com"
  position="bottom-right"
  layout="floating"
  // ... other options
/>

Script blocking

The @consentico/web package includes the same script blocking as the Shopify extension:

createElement override
MutationObserver for dynamically added scripts
Support for type="text/plain" manual blocking

Scripts loaded via <script> tags in your HTML will still need manual blocking — see Script blocking.

Consent Mode signals are sent automatically, same as the Shopify extension. No additional configuration needed.

Listen for consent changes in your app:

import { onConsentChange } from "@consentico/web";

useEffect(() => {
  const unsubscribe = onConsentChange((consent) => {
    console.log("Consent updated:", consent);
    // { analytics: true, marketing: false, ... }
  });

  return unsubscribe;
}, []);

Server-side considerations

The banner is client-side only. For SSR frameworks:

The component renders nothing on the server
It hydrates and shows the banner on the client
No flash of unstyled content

Script blocking — what gets blocked and when
Google Consent Mode — how consent signals work
GTM integration — using with Google Tag Manager