Install on Shopify

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.

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.

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

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 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 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.