A cookie banner only does its job if it loads before your trackers. On Shopify, there are places to add code that look right but are not. This guide shows the place that works for the storefront, what a banner on Shopify can and cannot cover, and how to check the result yourself.

The steps use Cookie Compliance, but the placement rule applies to any consent tool that holds scripts in the page.

What a cookie banner on Shopify needs to do

A banner that only shows a message is a notice. For it to matter:

  1. The visitor gets a real choice before non-essential tracking starts.
  2. Trackers wait. Analytics and ad scripts in your theme should not run until the visitor has chosen.
  3. Shopify hears the answer. Shopify keeps its own consent record for its analytics and Customer Events pixels. Your banner needs to pass the choice to it.

A banner can only hold scripts that have not run yet, so where you paste the code matters most.

Places that look right but are not

Settings → Customer events → Add a custom pixel. Code added here runs inside Shopify’s sandboxed Web Pixels Manager, not as a normal page script. It cannot see or hold the scripts in your theme.

A section or snippet used only on the home page. It only reaches the pages that include it.

Checkout’s Additional scripts. This field only ever ran on the Thank you and Order status pages, never on the storefront. Shopify made it view-only on August 28, 2025, and replaced those pages with new versions that use blocks and pixels. For stores on non-Plus plans, the upgrade deadline was August 26, 2026.

Step by step: add the banner to theme.liquid

Before you start

  • A Cookie Compliance account and an AppID. The Free plan needs no card. When you add your store’s domain in the dashboard, it is published automatically.
  • The live snippet. In the dashboard, go to Integrations → Manual Integration and copy the snippet. If you changed settings since, click Publish Now first. If you copied the snippet before the app was published, copy it again.
  • Access to edit code on the store’s live theme.
  • Shopify’s own cookie banner removed, and regions matched. Shopify’s help for third-party banners says: go to Settings → Customer privacy → Cookie banner, click Remove cookie banner if that option is available, then set Shopify’s consent regions to every region where your third-party banner shows. Shopify warns: “If these regions don’t match, then non-essential data can be processed before a visitor provides consent.”

The steps

  1. Go to Online Store → Themes. Find the theme marked as your current (live) theme, not a draft.
  2. Open the theme actions menu (⋯) and choose Edit code. (Not “Edit default theme content” — that edits text and images, not code.)
  3. Open layout/theme.liquid.
  4. Paste the snippet as the very first thing after the <head> tag: before <meta charset>, before any {%- if -%} block, and before {{ content_for_header }}.
  5. Save.

It should look like this, with your own snippet in place of the example:

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <!-- Cookie Compliance first, before anything else in <head> -->
    <script>
        var huOptions = {
        "appID": "YOUR_APP_ID",
        "currentLanguage": "en",
        "blocking": true,
        "globalCookie": false
    };
    </script>
    <script src="https://cdn.hu-manity.co/v2/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>

    <meta charset="utf-8">
    <!-- the rest of your theme's <head>, including {{ content_for_header }}, unchanged -->

Paste the snippet exactly as the dashboard gives it: newer apps load the banner from a /v2/ address and older apps do not.

Leave your existing tracking tags where they are, below the snippet. You do not need to delete them.

What the banner covers on Shopify, and what it does not

Covered: pages rendered through the standard theme.liquid layout. In most themes that means home, product, collection, cart and content pages. A template can use a different layout file, or no layout at all. If your theme has other layout files, add the snippet to each one, or test those pages. Tracker tags in your theme code that the banner recognises (it ships with hundreds of tracker patterns) are held until the visitor chooses. That can include a hand-pasted Google Tag Manager container or pixel, or a theme app embed that adds a script to <head>.

Not covered: checkout and the order-status page. Shopify renders these through its separate checkout system. A theme edit does not reach them.

Customer Events pixels are gated by Shopify, not by the banner. Shopify Analytics and pixels added through Customer Events follow Shopify’s own consent record (its Customer Privacy API). Cookie Compliance writes the visitor’s choice into that record. Shopify says that in markets set to require consent (usually the EEA and the UK), a pixel runs only when the visitor has given the permissions in that pixel’s configuration. New pixels require Marketing and Analytics by default. Two details:

  • The banner switches a purpose on in Shopify’s record only after the visitor clicks a choice. Closing the banner, or a Global Privacy Control signal from the browser, can only switch purposes off.
  • Before a choice, the banner only switches off a purpose that Shopify still holds as allowed with no matching Cookie Compliance choice behind it. Otherwise those pixels follow Shopify’s own regional settings.

How to check it works

Do these checks in a private browser window, with any ad or tracker blocker switched off.

  1. Look at the raw page source of your home page (View Source, not the Elements panel). The huOptions block and the hu-banner.min.js script should be the first things inside <head>.
  2. Load the store. The banner should appear before you click anything.
  3. Before you click, open your browser’s developer tools. In Application → Cookies you should see no tracking cookies such as _ga or _fbp. In Network you should see no data requests such as google-analytics.com/g/collect.
  4. In the Elements panel, a held tracker tag from your theme shows type="javascript/blocked" and a hu-blocked class. For an external script, its address also moves from src to data-src.
  5. Make a choice, then check Shopify’s record. In the console, Shopify.customerPrivacy.currentVisitorConsent() should reflect what you chose. It returns text values for each purpose, such as 'yes', 'no' or an empty string, not true or false.

The Elements panel shows the live page after scripts have run, so it can list scripts above the banner that are not in your theme file. Shopify loads its own scripts through {{ content_for_header }}, and scripts can add others. Judge placement by the raw source.

For a full walk-through that works with any banner, see How to test whether your cookie banner really blocks trackers.

Plans

The banner and blocking work on the Free plan, up to the Free plan’s visit limit (see Pricing). Each page view where the banner loads counts as a visit. Once a store passes that limit for the current 30-day cycle, blocking stops and consent records are no longer saved to our server until the next cycle. The banner still shows, and each visitor’s choice is still stored in their browser. The Professional plan has no visit limit.

Installing the banner does not by itself make a store compliant with any law. Within your plan’s limits, it holds recognised scripts, passes choices to Shopify and keeps consent records. Which rules apply to your store is a decision for you and your advisers.

FAQ

Do I need a Shopify app to install it?

No. This guide installs it by pasting the snippet into your theme’s layout/theme.liquid file, as described above.

Will it block pixels I added through Customer Events?

Not directly. It passes the visitor’s choice to Shopify’s Customer Privacy API. Shopify then runs or holds each Customer Events pixel according to that pixel’s privacy settings and your consent regions.

Can I keep Shopify’s built-in cookie banner switched on as well?

We recommend you don’t, and Shopify’s own help for third-party banners says to remove it. Two banners ask the visitor twice and can store two different answers.

Was this article helpful?
YesNo

Next steps