CookieFast

Shopify Integration

Complete guide for adding CookieFast to your Shopify store and ensuring GDPR/ePrivacy compliance.

Quick Start

Step 1: Access Theme Code

  1. From your Shopify admin, go to Online Store → Themes
  2. Find your current theme
  3. Click Actions → Edit code

Step 2: Add CookieFast Script

  1. In the left sidebar, under Layout, click theme.liquid
  2. Find the </head> closing tag (usually around line 30-50)
  3. Add before the </head> tag:
<!-- CookieFast Cookie Consent -->
<script
  async
  src="https://cdn.cookiefa.st/cookiefast.js"
  data-api-key="your-api-key-here"
></script>
  1. Replace your-api-key-here with your actual API key from CookieFast dashboard
  2. Click Save in the top right

Step 3: Get Your API Key

  1. Sign up at CookieFast Dashboard
  2. Create a new property with your Shopify domain (e.g., mystore.myshopify.com)
  3. Copy the API key
  4. Paste it in the script from Step 2

Cookie Settings Link

In Footer

  1. Go to Online Store → Themes → Customize
  2. Navigate to Footer section
  3. Add a Custom Liquid block
  4. Paste:
<button id="cookiefast-banner-trigger" class="footer__link">
  Cookie Settings
</button>
  1. Save

In Navigation Menu

  1. Go to Online Store → Navigation
  2. Select Footer menu (or any menu)
  3. Click Add menu item
  4. Set:
    • Name: Cookie Settings
    • Link: #cookiefast (just type it as URL)
  5. Save menu

The link won't work in the admin preview, but it will work on your live store.

Shopify's Built-in Cookie Banner

Shopify has a basic cookie banner for EU visitors. To avoid conflicts:

Disable Shopify's Banner

  1. Go to Settings → Customer privacy
  2. Under Cookie banner, select Customized
  3. Or keep both if needed (CookieFast will handle consent management better)

If you keep both, Shopify's banner will show for essential cookies, and CookieFast will handle analytics/marketing consent.

Google Analytics Integration

Option 1: Via CookieFast Dashboard (Recommended)

  1. Remove Google Analytics from Shopify settings
  2. Go to CookieFast Dashboard → Your Property
  3. Add under Analytics category:
// Google Analytics 4
(function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  document.head.appendChild(script);


  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', {
    'send_page_view': true
  });
})();

Option 2: Keep in Shopify (Legacy)

If you want to keep GA in Shopify:

  1. Go to Settings → Analytics
  2. Keep your Google Analytics ID there
  3. CookieFast will respect consent before GA loads

Facebook Pixel / Meta Pixel

Add via CookieFast

  1. Remove Facebook Pixel from Shopify settings
  2. In CookieFast Dashboard, add under Marketing category:
// Facebook Pixel
!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');
  1. Replace YOUR_PIXEL_ID with your actual pixel ID

TikTok Pixel

Add in CookieFast dashboard under Marketing:

!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=i+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
  ttq.load('YOUR_TIKTOK_PIXEL_ID');
  ttq.page();
}(window, document, 'ttq');

Shopify Plus: Checkout Tracking

For Shopify Plus stores, add to checkout:

  1. Go to Settings → Checkout
  2. Scroll to Order status page → Additional scripts
  3. Add:
{% if first_time_accessed %}
<script>
  // Track purchase only if user consented to analytics
  if (window.CookieFast && window.CookieFast.getConsent()?.analytics) {
    // Google Analytics Purchase Event
    if (window.gtag) {
      gtag('event', 'purchase', {
        transaction_id: '{{ order.order_number }}',
        value: {{ total_price | money_without_currency }},
        currency: '{{ currency }}',
        items: [
          {% for line_item in line_items %}
          {
            id: '{{ line_item.product_id }}',
            name: '{{ line_item.title }}',
            price: {{ line_item.final_price | money_without_currency }},
            quantity: {{ line_item.quantity }}
          }{% unless forloop.last %},{% endunless %}
          {% endfor %}
        ]
      });
    }
  }
</script>
{% endif %}

Testing Your Integration

1. Check Script Loads

  1. Visit your store in incognito/private mode
  2. Right-click → Inspect → Console tab
  3. Look for CookieFast initialization
  4. Should see banner (unless you're in US)

2. Verify Banner Shows

  • Use VPN to simulate EU visitor
  • Or clear cookies and visit from non-US location
  • Banner should appear on first visit

3. Test Consent

  1. Accept analytics and marketing
  2. Open Console
  3. Type: window.CookieFast.getConsent()
  4. Should show: {analytics: true, marketing: true, essential: true}

Theme Compatibility

CookieFast works with all Shopify themes:

  • ✅ Dawn (default theme)
  • ✅ Debut
  • ✅ Brooklyn
  • ✅ Narrative
  • ✅ All premium themes
  • ✅ Custom themes

Shopify App Alternative

Currently, CookieFast doesn't have a Shopify app, but manual integration takes only 2 minutes and gives you full control.

Coming soon: One-click Shopify app for easier updates

Performance Impact

  • Load time: ~100ms (CDN-delivered)
  • Page speed: No negative impact (async loading)
  • Core Web Vitals: Won't affect LCP, FID, or CLS

Multi-Currency & Multi-Language

CookieFast automatically:

  • Detects visitor language
  • Shows banner in appropriate language
  • Works with Shopify Markets
  • Supports multi-currency stores

Troubleshooting

Banner Not Showing

  1. Check location: US visitors auto-accept (no banner)
  2. Clear cookies: Delete all cookies for your domain
  3. Check domain: Ensure property domain matches Shopify domain
  4. View source: Check if script is in <head>

Scripts Not Running

  1. Verify consent was granted
  2. Check CookieFast dashboard for script syntax errors
  3. Look for JavaScript errors in browser console

Conflicts with Other Apps

If another cookie app is installed:

  1. Uninstall other cookie consent apps
  2. Clear cache
  3. Test in incognito mode

GDPR Compliance

CookieFast handles:

  • ✅ Cookie consent banner
  • ✅ Consent storage (365 days)
  • ✅ Analytics tracking only after consent
  • ✅ Geo-detection (EU vs US)
  • ✅ Consent logs in dashboard

Next Steps