How to manually setup the cookie bar in a hydrogen storefront?
The setup consists of two parts. You can check them in the guide below:
Start by setting up the cookie bar in your hydrogen project by following these instructions:
Install the npm package - consentmo-hydrogen
The package contains the CookieBar component that is responsible for displaying the cookie bar on your storefront.
Navigate to app/root.jsx file and add the following code which will import the CookieBar component:
Setup the CookieBar component by adding the following line to the Analytics.Provider component :
NOTE: For stores using a Hydrogen version older than 2024.4.3, paste the code in the end of your body tag.
Stores using Hydrogen version 2024.4.3 or newer should include the requests the cookie bar makes in their ContentSecurityPolicy.
In order to do that, navigate to app/entry.server.jsx and paste the below code into the createContentSecurityPolicy function:
NOTE: If you already have requests declared in the defaultSrc or connectSrc properties, make sure to include the cookie bar requests as well.
After setting up the cookie bar you should setup the Customer Privacy API by following the below instructions:
Configure your Hydrogen checkout domain by following Shopify's 3-step guide.
Fill the settings fields in Consentmo’s hydrogen integration page:
Stores using a Hydrogen version older than 2024.4.3 should load the Customer Privacy JavaScript asset.
In order to do that, navigate to app/root.jsx and paste the below code at the beginning of the store's <head> element:
For direct support, you can reach out via the live chat or by sending an email to our support team at support@consentmo.com
1. Adding the cookie bar
Start by setting up the cookie bar in your hydrogen project by following these instructions:
Install the npm package - consentmo-hydrogen
The package contains the CookieBar component that is responsible for displaying the cookie bar on your storefront.
Navigate to app/root.jsx file and add the following code which will import the CookieBar component:
let CookieBar; try { CookieBar = require('consentmo-hydrogen').default; } catch (error) { CookieBar = null; }Setup the CookieBar component by adding the following line to the Analytics.Provider component :
{CookieBar ? <CookieBar
store={''} // add your shopify store name here
customer_id={0} // pass the customer id if it is not logged you can pass 0 />: ''}NOTE: For stores using a Hydrogen version older than 2024.4.3, paste the code in the end of your body tag.
Stores using Hydrogen version 2024.4.3 or newer should include the requests the cookie bar makes in their ContentSecurityPolicy.
In order to do that, navigate to app/entry.server.jsx and paste the below code into the createContentSecurityPolicy function:
defaultSrc: ['https://gdpr.apps.isenselabs.com/'], connectSrc: ['https://gdpr.apps.isenselabs.com/', 'https://consentmo-geo.com/users/checkIp'],NOTE: If you already have requests declared in the defaultSrc or connectSrc properties, make sure to include the cookie bar requests as well.
2. Setting up the Customer Privacy API
After setting up the cookie bar you should setup the Customer Privacy API by following the below instructions:
Configure your Hydrogen checkout domain by following Shopify's 3-step guide.
Fill the settings fields in Consentmo’s hydrogen integration page:
Stores using a Hydrogen version older than 2024.4.3 should load the Customer Privacy JavaScript asset.
In order to do that, navigate to app/root.jsx and paste the below code at the beginning of the store's <head> element:
<script src="https://cdn.shopify.com/shopifycloud/consent-tracking-api/v0.1/consent-tracking-api.js"></script>Need help?
For direct support, you can reach out via the live chat or by sending an email to our support team at support@consentmo.com
Updated on: 07/01/2025
Thank you!