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

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.

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.