Shopify Cookie Consent: The Complete Guide

The $12,000 Email That Changed Everything

Illustrative scenario: a composite example, not a specific reported case.

Last year, a Shopify merchant selling handmade jewelry received an email from a German law firm. A customer had filed a GDPR complaint—the store's Meta Pixel had been firing before consent.

The settlement: €11,000 plus legal fees.

"I didn't even know my pixel was loading without permission," she told me. "I just installed the Facebook sales channel and assumed Shopify handled it."

Shopify doesn't handle it. You do.

Why E-commerce Faces Higher GDPR Risk

Online stores have a unique compliance challenge:

Activity	Data Collected	Risk Level
Product views	Browsing behavior	Medium
Add to cart	Purchase intent	High
Checkout	Personal + payment data	Critical
Retargeting	Cross-site tracking	Very High

Every step of your funnel involves tracking. Every pixel, every app, every script that touches customer data needs consent.

The 3-Minute Shopify Integration

Here's how to make your Shopify store GDPR-compliant:

Step 1: Get Your Domain ID

1. Sign up at getcookies.co
2. Add your Shopify domain (yourstore.myshopify.com or custom domain)
3. Copy your Domain ID

Step 2: Add to theme.liquid

1. Go to Online Store → Themes
2. Click Actions → Edit code
3. Open theme.liquid
4. Add before </head>:

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

5. Save

That's it. Your store now has:

• GDPR-compliant cookie banner
• Google Consent Mode v2 signals
• Automatic script blocking
• Third-party pixel consent handling

Blocking Tracking Pixels Until Consent

Your Meta Pixel, TikTok Pixel, and Google Analytics should only load after consent.

Meta Pixel

{% comment %} Only loads after marketing consent {% endcomment %}
<script type="text/plain" data-cookieconsent="marketing">
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}
  (window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

The type="text/plain" prevents execution. GetCookies activates it after marketing consent.

Google Analytics 4

<script type="text/plain" data-cookieconsent="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
        async></script>
<script type="text/plain" data-cookieconsent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXX');
</script>

TikTok Pixel

<script type="text/plain" data-cookieconsent="marketing">
  !function (w, d, t) {
    w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
    // ... rest of TikTok pixel code
  }(window, document, 'ttq');
  ttq.load('YOUR_PIXEL_ID');
  ttq.page();
</script>

Conversion Tracking: The Right Way

Thank You Page Tracking

Add to Settings → Checkout → Order status page additional scripts:

{% if first_time_accessed %}
<script>
  // Only fire if marketing consent was given
  function hasMarketingConsent() {
    try {
      const consent = localStorage.getItem('getcookies_consent');
      return consent && consent.includes('marketing');
    } catch (e) {
      return false;
    }
  }

  if (hasMarketingConsent()) {
    // Meta Pixel Purchase
    if (typeof fbq !== 'undefined') {
      fbq('track', 'Purchase', {
        value: {{ total_price | money_without_currency }},
        currency: '{{ currency }}',
        content_ids: [{% for line_item in line_items %}'{{ line_item.sku }}'{% unless forloop.last %},{% endunless %}{% endfor %}],
        content_type: 'product'
      });
    }

    // Google Ads Conversion
    if (typeof gtag !== 'undefined') {
      gtag('event', 'conversion', {
        'send_to': 'AW-XXXXX/XXXXX',
        'value': {{ total_price | money_without_currency }},
        'currency': '{{ currency }}',
        'transaction_id': '{{ order_number }}'
      });
    }

    // TikTok Pixel
    if (typeof ttq !== 'undefined') {
      ttq.track('CompletePayment', {
        value: {{ total_price | money_without_currency }},
        currency: '{{ currency }}'
      });
    }
  }
</script>
{% endif %}

Dynamic Event Tracking

Listen for consent changes in real-time:

window.addEventListener('getcookies:consent', function(e) {
  if (e.detail.marketing) {
    // User just gave marketing consent
    // Fire any queued events
    if (typeof fbq !== 'undefined') {
      fbq('track', 'PageView');
    }
  }
});

Handling Shopify's Checkout

Standard Shopify Plans

Good news: Shopify checkout is on the same domain (or yourstore.myshopify.com). Consent stored in localStorage carries over automatically.

The banner won't re-appear on checkout if consent was already given.

Shopify Plus

With Shopify Plus, you can customize checkout.liquid directly:

{% comment %} checkout.liquid {% endcomment %}
<script src="https://getcookies.co/api/v1/widget/loader.js"
        data-domain-id="YOUR_DOMAIN_ID"
        async></script>

This ensures the banner appears in checkout if the user hasn't consented yet.

Shopify Customer Events (Web Pixels)

Shopify's new Web Pixels system runs in a sandbox. GetCookies works alongside it:

// In your custom web pixel
analytics.subscribe('page_viewed', (event) => {
  // Check consent before tracking
  if (window.GetCookies?.hasConsent('marketing')) {
    // Your tracking code
  }
});

For the standard Shopify pixels (Meta, Google, etc.), configure them to use Google Consent Mode—they'll automatically respect GetCookies signals.

Shopify Markets: Multi-Region Consent

For stores selling to multiple regions:

{% if request.locale.iso_code == 'DE' or request.locale.iso_code == 'FR' or request.locale.iso_code == 'IT' %}
  {% comment %} Stricter consent for EU {% endcomment %}
  <script src="https://getcookies.co/api/v1/widget/loader.js"
          data-domain-id="YOUR_EU_DOMAIN_ID"
          async></script>
{% else %}
  {% comment %} Standard config for other regions {% endcomment %}
  <script src="https://getcookies.co/api/v1/widget/loader.js"
          data-domain-id="YOUR_DOMAIN_ID"
          async></script>
{% endif %}

Or let GetCookies handle geolocation automatically—it detects user location and applies the right regulations.

Common Shopify Apps and Consent

Klaviyo

Klaviyo respects Google Consent Mode signals. Once GetCookies sets them, Klaviyo adjusts automatically.

Omnisend

Same deal—checks consent signals before tracking.

PixelYourSite / Pixelfy

Configure these plugins to check consent:

// Check before firing
if (window.GetCookies?.hasConsent('marketing')) {
  // Fire pixel events
}

ReConvert (Thank You Page)

Gate your upsell tracking:

if (window.GetCookies?.hasConsent('marketing')) {
  // Track upsell conversions
}

Headless Shopify (Hydrogen)

For Hydrogen stores built with React:

// app/root.tsx
import { Script } from '@shopify/hydrogen';

export default function App() {
  return (
    <html>
      <head>
        <Script
          src="https://getcookies.co/api/v1/widget/loader.js"
          data-domain-id="YOUR_DOMAIN_ID"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Consent Hook for Hydrogen

// hooks/useConsent.ts
import { useState, useEffect } from 'react';

export function useConsent() {
  const [consent, setConsent] = useState({
    necessary: true,
    analytics: false,
    marketing: false
  });

  useEffect(() => {
    window.addEventListener('getcookies:consent', (e: CustomEvent) => {
      setConsent(e.detail);
    });

    // Check existing consent
    if (window.GetCookies) {
      setConsent({
        necessary: true,
        analytics: window.GetCookies.hasConsent('analytics'),
        marketing: window.GetCookies.hasConsent('marketing')
      });
    }
  }, []);

  return consent;
}

Server-Side Tracking (Recommended)

For better attribution that's less affected by browser restrictions:

Meta Conversions API

Shopify has built-in CAPI support:

1. Go to Facebook & Instagram channel
2. Enable Conversions API
3. Server events don't need browser consent (but should respect user preferences)

Google Enhanced Conversions

Enable in your Google Ads settings—Shopify supports it natively.

TikTok Events API

Use a Shopify app or custom integration for server-side TikTok tracking.

Testing Your Implementation

Quick Test

1. Open your store in incognito
2. Open DevTools → Network tab
3. Before consent: No facebook.com, google-analytics.com, or tiktok.com requests
4. Accept marketing cookies
5. Refresh: Tracking requests should appear

Checklist

• Banner appears on first visit
• "Accept All" enables all tracking
• "Reject All" blocks marketing/analytics
• Consent persists across pages
• Product pages respect consent
• Add to cart respects consent
• Checkout respects consent
• Thank you page tracks only with consent
• Google Tag Assistant shows correct consent state

Performance Impact

GetCookies on Shopify:

Metric	Impact
Loader size	~1.6 KB (gzipped)
Loading	Async, non-blocking
CLS	Zero (no layout shift)
Speed Score	No measurable impact

Your Shopify Speed Score stays healthy.

The Bottom Line

That jewelry merchant I mentioned? After implementing proper consent:

• No more compliance complaints
• Customer trust increased
• Conversion rates stayed the same (properly consented users convert just as well)

Cookie consent isn't a conversion killer. Non-compliance is a business killer.

---

Ready to make your Shopify store compliant?

Set up GetCookies in 3 minutes