Consentmo

This npm package is used for automatically setting up the Consentmo app with your Shopify Hydrogen store.

Installation guide

1. Open the Command Line (Terminal or Command Prompt):

• On Windows: Press Windows + R, type cmd, and hit Enter to open the Command Prompt. Alternatively, you can use PowerShell or Windows Terminal.
• On macOS: Press Cmd + Space, type Terminal, and hit Enter.
• On Linux: Press Ctrl + Alt + T or open your preferred terminal application.

2. Navigate to your project directory.
3. Install the npm package by running the following command:

npm install @consentmo/consentmo-hydrogen

The postinstall script patches your Hydrogen app automatically:

• Adds CookieBar and WebAccessibility to app/root.jsx
• Sets withPrivacyBanner: false on analytics consent
• Extends CSP in app/entry.server.jsx / entry.server.tsx only with sources that are not already present

After install, set your Shopify store domain in both components (replace the empty store prop):

<CookieBar store={'your-store.myshopify.com'} customer_id={0} />
<WebAccessibility store={'your-store.myshopify.com'} />

Components

CookieBar

Loads the Consentmo GDPR cookie banner from CDN. Requires Hydrogen customerPrivacy.setTrackingConsent (via useAnalytics).

import CookieBar from '@consentmo/consentmo-hydrogen/CookieBar';
// or lazy: const CookieBar = lazy(() => import('@consentmo/consentmo-hydrogen/CookieBar'));

| Prop | Description | |------|-------------| | store | Your .myshopify.com store domain | | customer_id | Logged-in customer ID, or 0 for guests |

WebAccessibility

Loads the Consentmo Web Accessibility (ADA) widget from CDN. Does not require the cookie banner or Hydrogen consent API.

import WebAccessibility from '@consentmo/consentmo-hydrogen/WebAccessibility';
// or lazy: const WebAccessibility = lazy(() => import('@consentmo/consentmo-hydrogen/WebAccessibility'));

| Prop | Description | |------|-------------| | store | Your .myshopify.com store domain |

Both components work independently. If you use both, mount CookieBar before WebAccessibility so the accessibility widget can position itself relative to the cookie banner.

The ADA widget is shown only when enabled in the Consentmo app admin (ada_compliance settings). Admin preview on Hydrogen works with ?pb=0 in the URL.

Skip CSP changes

Oxygen re-runs postinstall on every deploy. From 1.1.3 the hook only inserts missing sources and collapses duplicates, so the Content-Security-Policy header no longer grows across deploys.

To skip CSP edits entirely (recommended if you already maintain entry.server yourself, or if a previous 1.1.2 install bloated the header):

CONSENTMO_SKIP_CSP=true npm install

Oxygen env vars are not always visible during npm install, so any of these also work:

• CONSENTMO_SKIP_CSP=true in .env
• // CONSENTMO_SKIP_CSP in app/entry.server.tsx
• in the storefront package.json:

{
  "consentmo": {
    "skipCsp": true
  }
}

CookieBar / WebAccessibility patching in root still runs. After upgrading from 1.1.2, run one install without the skip flag if you want duplicates in entry.server collapsed, then set the skip flag if you prefer to manage CSP by hand.

Manual setup

If you prefer not to rely on postinstall, import and mount the components yourself in app/root.jsx inside <Analytics.Provider> (or before </body>), and add the Consentmo domains to your CSP defaultSrc, connectSrc, and imgSrc directives.