---
title: "Install on Shopify"
description: "Add the CookieBeam banner to a Shopify store through the theme code today, connect it to Shopify's Customer Privacy API, and turn off Shopify's own banner."
url: "https://cookiebeam.com/docs/install/shopify"
lang: "en"
---

# Install on Shopify

Add the CookieBeam banner to a Shopify store through the theme code today, connect it to Shopify's Customer Privacy API, and turn off Shopify's own banner.

The CookieBeam Shopify app is not listed in the Shopify App Store yet. Today you add the banner by pasting the loader into your theme. Once the app is available, its app embed replaces the theme edit; see [Shopify Customer Privacy](https://cookiebeam.com/docs/integrations/shopify#install-with-the-cookiebeam-app).

## 1. Add your store's domains

In CookieBeam, open the banner and go to **Banner domains**. Add:

- your `*.myshopify.com` domain, and
- every custom domain the store uses.

The banner does not load on a hostname that is not listed.

## 2. Publish the banner

Select **Publish** and publish to production. Then open **Deployment → Install** and copy the direct installation code.

## 3. Add the loader to your theme

1. In Shopify admin, go to **Online Store → Themes**.
2. On your current theme, open the **⋯** menu and choose **Edit code**.
3. Open `layout/theme.liquid`.
4. Paste the loader directly after the opening `<head>` tag, above `{{ content_for_header }}` and above any analytics or advertising script.
5. Do not add `async` or `defer`. Save.

```html
<head>
  <script src="https://cdn.cookiebeam.com/banner/PUBLIC_BANNER_ID/default/loader.js"></script>
  <!-- the rest of your theme's head, including {{ content_for_header }} -->
```

Edits to theme code stay with that theme. If you switch or replace the theme, add the loader again.

## 4. Turn off Shopify's own banner

In Shopify admin, open **Settings → Customer privacy** and turn off Shopify's cookie banner, so visitors see one prompt, not two.

## 5. Pass the choice to Shopify

Shopify's own analytics, and apps that read consent through Shopify's Customer Privacy API, only follow the visitor's choice if something passes it on. The banner's **Shopify** bridge does this. It is on by default under **Vendor Consent Signals** on the banner's **App Integrations** page.

The bridge only works when Shopify's Customer Privacy API is already on the page when the visitor's consent is resolved. If it is not there, the choice is not passed on. After installing, check it in the browser console on your storefront:

```js
window.Shopify.customerPrivacy.currentVisitorConsent()
```

Make a choice in the banner and run it again. The flags should match what you chose. If `window.Shopify.customerPrivacy` is undefined, the API is not loaded on your storefront and Shopify's own tracking does not receive the choice. The CookieBeam app loads the API itself, which is why it is the better route once it is available. See [Shopify Customer Privacy](https://cookiebeam.com/docs/integrations/shopify) for how the flags are mapped.

## What is not covered

- **Checkout.** Theme code does not run on Shopify's checkout pages, so the banner does not appear there.
- **Pixels added by apps or in Shopify's customer events.** These load outside your theme. Check each one in a [scan](https://cookiebeam.com/docs/configure/scanner) and in Shopify's settings.

## Check it works

Use a private window on the live storefront, not the theme editor preview, and follow [Verify your installation](https://cookiebeam.com/docs/getting-started/verify-installation).