How to add a cookie consent banner to a Shopify store

Where to paste the snippet in Shopify

Shopify themes have one layout file that wraps every storefront page: theme.liquid. Checkout pages are not part of it (more on that below).

1. From the Shopify admin, go to Online Store, then Themes. Open the menu (three dots) next to your live theme and choose Duplicate, then open the same menu on the copy and choose Edit code.
2. In the Layout folder, click theme.liquid.
3. Paste the snippet on the line right after <head>, above the {{ content_for_header }} object, which is where Shopify prints its own scripts and the app embeds:

liquid
<head>
  <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
  <meta charset="utf-8">
  {{ content_for_header }}
  ...

1. Click Save, preview the copy, then publish it when it looks right.

Code edits live in the theme: when you install a new theme version, repeat the edit in the new copy.

How to connect Shopify's own tracking to the banner

Shopify sets its own analytics cookies (_shopify_analytics and _shopify_marketing, one year; older stores used _shopify_y and _shopify_s, which Shopify stopped setting on April 30, 2026) and runs the pixels of your sales channel apps (Google & YouTube, Facebook & Instagram) and the custom pixels of Settings, then Customer events. None of these are tags in your theme, so Cookiequiet cannot mark them. Shopify exposes a browser API for consent banners instead, the Customer Privacy API, and withholds its analytics and marketing cookies in the regions you configure until that API receives consent.

Add this bridge right after the snippet in theme.liquid. It runs on every page load where a choice is stored and on every new choice:

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories;
    if (typeof window.Shopify === 'undefined') return;
    window.Shopify.loadFeatures([{ name: 'consent-tracking-api', version: '0.2' }], function (error) {
      if (error) return;
      window.Shopify.customerPrivacy.setTrackingConsent({
        analytics: c.indexOf('analytics') >= 0,
        marketing: c.indexOf('marketing') >= 0,
        preferences: c.indexOf('functional') >= 0
      }, function () {});
    });
  });
</script>

Then go to Settings, then Customer privacy, open the menu next to Cookie banner and select Remove cookie banner, so visitors see one banner. In the Regions section, select the regions where Cookiequiet shows its banner (for example the EEA, the UK and Switzerland): Shopify documents that the regions of a third-party banner must match its own, otherwise non-essential data may be processed before consent.

How to handle the other tags

• Sales channel apps. Their pixels run through Shopify's consent, which the bridge above sets. Nothing to mark.
• Custom pixels. They run in Shopify's sandbox, outside the page. When you create one, set its customer privacy permission to required so Shopify waits for consent before running it.
• Tags pasted in the theme. Mark them: <script type="text/plain" data-cq-category="marketing"> for the Meta Pixel, analytics for a hand-pasted Google tag. See the Meta Pixel and Google Analytics 4 guides for the two ways to wire Google tags.
• Videos in sections. Replace src with data-cq-src on YouTube or Vimeo iframes in your sections; the player loads after consent.

How to add the Cookie preferences link

Shopify's navigation editor rewrites link URLs, so the most reliable place is the theme editor: Online Store, then Themes, then Customize, open the Footer section, click Add block, choose Custom Liquid (Dawn and most Online Store 2.0 themes have it) and paste:

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

You can also add the line to sections/footer.liquid in the code editor, or turn on the floating preferences button in the banner settings.

How to test

1. Open the storefront in a private window and click Reject all.
2. In the developer tools, check the cookies: cq_consent, Shopify's necessary cookies (cart and session) and nothing else: no _ga, no _fbp, and no _shopify_analytics if the visitor's region is one you configured in Customer privacy.
3. Clear the cookies, click Accept all, reload: the marked tags run and Shopify's analytics cookie appears.
4. Check the consent log in the Cookiequiet dashboard.

What is specific to Shopify

• Checkout. Theme code does not run on checkout pages, so the banner is not shown there. Shopify carries the consent recorded on the storefront into checkout when both run on the same root domain, which is the case for a standard store.
• Shopify's regions. Shopify withholds its own cookies only in the regions you select. If you show Cookiequiet everywhere but configured no region in Shopify, Shopify's cookies are set at once outside the EEA and the UK.
• Apps that add their own banner. Uninstall or disable them; one banner, one consent log.
• Headless stores (Hydrogen). The snippet goes in your app's root layout instead, and the consent bridge uses Shopify's headless parameters; this guide covers the standard online store.

Prices do not depend on traffic: a store with 500,000 sessions a month pays the same as a small one, see pricing.