Shopify setup

A complete guide to adding the GetCookies consent banner to your Shopify store, including standard themes, Shopify Plus, headless storefronts, and managing third-party apps.

Prerequisites

Before you begin, make sure you have:

• A GetCookies account with a domain configured for your Shopify store URL (e.g., yourstore.myshopify.com or your custom domain).
• Your Domain ID from the GetCookies dashboard (Domains > Widget Configuration).
• Admin access to your Shopify store.

Install with theme code

There is no GetCookies app in the Shopify App Store yet, so you add the script to your theme.

Step 1: Open the Theme Editor

1. In Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code on your active theme.

Step 2: Add the Script to theme.liquid

1. Open Layout/theme.liquid.
2. Find the <head> tag.
3. Add the following immediately after the opening <head> tag (before any other scripts):

<!-- GetCookies - Cookie Banner -->
<script src="https://app.getcookies.co/api/v1/widget/loader.js"
        data-domain-id="YOUR_DOMAIN_ID"
        async></script>

1. Click Save.

Important: Place the script as early as possible in the <head> to ensure blocking starts before other scripts load.

Step 3: Handle Checkout Pages (Shopify Plus Only)

Standard Shopify plans do not allow editing checkout pages. On Shopify Plus:

1. Open Layout/checkout.liquid.
2. Add the same script tag in the <head> section.
3. Save.

For non-Plus stores, the checkout is hosted by Shopify and runs under their own cookie policies. The banner will cover your storefront pages but not the Shopify-hosted checkout.

Managing Third-Party App Scripts

Many Shopify apps inject their own tracking scripts. Here is how to handle them:

Apps That Use GTM

If you use Google Tag Manager to manage your Shopify tracking:

1. Install the GetCookies GTM template (see "GTM Template Installation Guide").
2. Configure consent requirements on each tracking tag in GTM.
3. This approach gives you the most control over third-party scripts.

Apps That Inject Scripts Directly

Some Shopify apps (e.g., review apps, upsell apps, tracking pixels) inject scripts directly into your theme:

1. Check if the app has a consent-mode or GDPR setting. Enable it if available.
2. If the app injects scripts into theme.liquid, locate those script tags and add type="text/plain" and data-cookieconsent="marketing" (or the appropriate category):

<!-- Before: fires immediately -->
<script src="https://tracking-app.com/pixel.js"></script>

<!-- After: blocked until consent -->
<script src="https://tracking-app.com/pixel.js"
        type="text/plain"
        data-cookieconsent="marketing"></script>

Shopify's Built-in Analytics

Shopify's own analytics (store analytics dashboard) uses first-party cookies and is generally considered Strictly Necessary for store operation. GetCookies does not block these by default.

Shopify Markets and Multi-Region Stores

If you sell in multiple countries using Shopify Markets:

1. In your GetCookies dashboard, configure geo-targeting rules so the banner displays the correct compliance framework per region (GDPR for EU, CCPA for California, etc.).
2. Enable language auto-detection if your store supports multiple languages. GetCookies will show the banner in the visitor's language.
3. Set stricter default consent states for EEA/UK/CH visitors (deny analytics and marketing by default).

Headless Shopify / Hydrogen Storefronts

For headless Shopify setups using Hydrogen, the Storefront API, or a custom frontend:

1. Use the direct script installation in your custom frontend's <head> section.
2. For React/Hydrogen specifically, add the script tag to your root layout or index.html.
3. See the "Custom HTML / Static Sites" or "Single-page apps and route changes" guides for SPA-specific considerations.

Verify the Installation

1. Open your storefront in an incognito/private window.
2. Confirm the consent banner appears immediately.
3. Open DevTools > Network and verify that tracking scripts (Google Analytics, Meta Pixel, etc.) do not fire before consent.
4. Click Accept All and confirm tracking scripts now load.
5. Navigate to a product page and then the cart -- verify the banner state persists across pages.
6. Check your GetCookies dashboard under Consent Logs to see the test consent recorded.

Troubleshooting

Banner not appearing

• Check Domain ID: Verify it matches your Shopify store's domain exactly (including any custom domain).
• Theme cache: Shopify caches theme assets aggressively. Wait a few minutes or try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
• App conflicts: If you have another cookie consent app installed, deactivate it first. Two consent banners will conflict.
• Script placement: If using the manual method, ensure the script is inside the <head> tag and the syntax is correct.

Scripts still firing before consent

• Third-party apps: Some apps inject scripts that cannot be controlled via theme.liquid. Consider using GTM as a centralized script manager.
• Inline scripts: If scripts are added inline in Shopify sections or snippets, you need to wrap each one with data-cookieconsent attributes.
• Shopify Pixels: Shopify's Customer Events / Pixels system may fire scripts outside of your theme. Check Settings > Customer events and configure consent where possible.

Banner looks wrong or overlaps with store elements

• Use the Custom CSS option in your GetCookies dashboard to adjust positioning or z-index.
• Common fix: .gc-banner { z-index: 999999 !important; }
• If the banner overlaps a sticky header or cart drawer, adjust the banner position (e.g., switch from bottom bar to bottom-left popup).

Checkout page does not show the banner (non-Plus)

• This is expected. Standard Shopify plans do not allow custom scripts on checkout pages. Consent given on the storefront persists via cookies, so users who consented before reaching checkout will retain their consent state.