> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.consentmo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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**:

# 1. Adding the cookie bar

Start by **setting up the cookie bar** in your **hydrogen project** by following these instructions:

1. **Install the npm package -** [consentmo-hydrogen](https://www.npmjs.com/package/@consentmo/consentmo-hydrogen)

The **package contains** the **CookieBar component** that is responsible for **displaying the cookie bar on your storefront**.
    
2. Navigate to **app/root.jsx** file and add the **following code **which will **import the CookieBar component**:

```javascript
import { Suspense,lazy, } from 'react';
const CookieBar = lazy(() => import('@consentmo/consentmo-hydrogen').catch((error) => ({ default: () => '' })));
```

3. **Setup the CookieBar component** by adding the following line to the `Analytics.Provider` component :

|| Make sure that in the following code you update the `store` property with your own Shopify store/account name

```javascript
<Suspense fallback={''}>
            <CookieBar
                store={'mystorename.myshopify.com'} // add your shopify store name here
                customer_id={0} // pass the customer id if it is not logged you can pass 0 />
          </Suspense>
```
    
|| NOTE: For stores using a Hydrogen version older than 2024.4.3, paste the code in the end of your body tag.
    
4. 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:

```javascript
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**:

1. **Configure your Hydrogen checkout domain** by following [Shopify's 3-step guide](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent#configure-your-hydrogen-checkout-domain "https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent#configure-your-hydrogen-checkout-domain").
    
2. **Fill the settings fields** in [Consentmo’s hydrogen integration page.](https://support.consentmo.com/en/article/hydrogen-integration-1qqnnuo/)

4. **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:

```javascript
<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](mailto:support@consentmo.com)