Shopify-Integration

Schritt-für-Schritt Anleitung für Shopify Online Stores. Letzte Aktualisierung: Februar 2025

1. Überblick

Barefoot CMP lässt sich einfach in jeden Shopify-Store integrieren. Die Installation dauert weniger als 5 Minuten und erfordert keine technischen Vorkenntnisse.

  • Eine Zeile Code in theme.liquid – fertig
  • Kompatibel mit allen Shopify-Themes (Dawn, Debut, Turbo, Prestige, Impulse und mehr)
  • Google Consent Mode v2 funktioniert automatisch
  • Shopify Markets & internationale Stores werden vollständig unterstützt
  • Automatisches Blocking von Analytics- und Marketing-Trackern bis zur Einwilligung

Voraussetzung: Sie benötigen ein kostenloses Barefoot CMP Konto und eine CMP-ID. Jetzt registrieren und sofort loslegen.

2. Installation Schritt für Schritt

Folgen Sie diesen sechs einfachen Schritten, um Barefoot CMP in Ihren Shopify-Store einzubinden:

1
Shopify Admin öffnen

Melden Sie sich in Ihrem Shopify Admin an und navigieren Sie zu Onlinestore → Themes.

2
Theme-Code bearbeiten

Klicken Sie beim aktuellen Theme auf "Code bearbeiten" (oder "Actions → Edit Code" in englischen Shops).

3
theme.liquid öffnen

Navigieren Sie in der Dateiübersicht zu Layout → theme.liquid und öffnen Sie die Datei.

4
Barefoot CMP Script einfügen

Fügen Sie den folgenden Code direkt nach dem öffnenden <head>-Tag ein:

Liquid 
{%- comment -%}Barefoot CMP - Cookie Consent Management{%- endcomment -%}
<script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID" async></script>
5
Speichern

Klicken Sie oben rechts auf "Speichern", um die Änderungen zu übernehmen.

6
Store prüfen

Rufen Sie Ihren Store im Frontend auf und prüfen Sie, ob das Cookie-Banner korrekt angezeigt wird.

Geschafft! Das Banner sollte jetzt auf allen Seiten Ihres Shopify-Stores sichtbar sein.

Wichtig: Ersetzen Sie DEINE_CMP_ID durch Ihre echte CMP-ID aus dem Barefoot CMP Dashboard. Die ID hat das Format bf_xxxxxxxx.

3. Google Analytics in Shopify

Shopify bietet eine native GA4-Integration, die sich nahtlos mit Barefoot CMP verbinden lässt. Consent Mode v2 wird automatisch unterstützt.

  • Shopify hat eine native GA4-Integration unter Online Store → Preferences
  • Barefoot CMP setzt automatisch alle Google Consent Mode v2 Signale
  • GA4 empfängt analytics_storage: granted/denied automatisch
  • Wenn ein Nutzer ablehnt, werden Conversion-Daten mit Googles "Behavioral Modeling" ergänzt

Konfiguration

  1. Öffnen Sie Shopify Admin → Online Store → Preferences
  2. Tragen Sie Ihre GA4 Measurement ID (G-XXXXXXXXXX) ein
  3. Stellen Sie sicher, dass das Barefoot CMP Script VOR GA4 in theme.liquid steht
  4. Fertig – Consent Mode v2 wird automatisch genutzt

Wichtig: Stellen Sie sicher, dass das Barefoot CMP Script in theme.liquid VOR der Zeile {{ content_for_header }} steht. Shopify injiziert GA4 über content_for_header.

Richtige Reihenfolge in theme.liquid

Liquid 
<head>
  {%- comment -%}Barefoot CMP - ZUERST{%- endcomment -%}
  <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID" async></script>

  {{ content_for_header }}
  {%- comment -%}Rest des Themes{%- endcomment -%}
</head>

4. Facebook/Meta Pixel in Shopify

Facebook Pixel wird automatisch von Barefoot CMP erkannt und blockiert, bis der Besucher Marketing-Consent erteilt.

  • Shopify Facebook Channel: Wird über content_for_header geladen und automatisch erkannt
  • Barefoot CMP erkennt fbevents.js und blockiert es automatisch
  • Nach Marketing-Consent wird das Pixel freigeschaltet
  • Conversion API (CAPI) Server-Side Events sind nicht betroffen

Manuelle Pixel-Integration

Falls Sie den Pixel manuell einbinden (z.B. über Shopify Settings → Preferences → Additional Scripts), verwenden Sie diese Syntax:

HTML 
<script data-consent-category="marketing" type="text/plain"
  data-original-src="https://connect.facebook.net/en_US/fbevents.js"></script>
<script data-consent-category="marketing" type="text/plain">
  fbq('init', 'DEINE_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Tipp: Die automatische Erkennung funktioniert in den meisten Fällen zuverlässig. Nutzen Sie die manuelle Methode nur, wenn der Cookie-Scanner ein nicht erkanntes Script meldet.

5. TikTok Pixel in Shopify

TikTok Pixel wird von Barefoot CMP automatisch erkannt und blockiert, bis Marketing-Consent erteilt wird.

  • TikTok Pixel wird automatisch erkannt und blockiert
  • Nach Marketing-Consent wird das Pixel freigeschaltet
  • TikTok Shop Integration ist kompatibel
  • TikTok Events API (Server-Side) wird nicht blockiert

Keine manuelle Konfiguration nötig: Wenn Sie die TikTok-App aus dem Shopify App Store verwenden, erkennt Barefoot CMP das Pixel automatisch.

6. Shopify Markets & Geo-Targeting

Shopify Markets ermöglicht verschiedene Storefronts für verschiedene Länder. Barefoot CMP passt das Banner-Verhalten automatisch an den Standort des Besuchers an.

  • EU-Besucher: Volles Opt-in Banner (DSGVO-konform)
  • Non-EU-Besucher: Konfigurierbar (kein Banner, einfacher Hinweis, oder volles Banner)
  • Automatische Standorterkennung über CDN-Header
  • Kompatibel mit allen Shopify Markets-Konfigurationen

Konfiguration für internationale Stores

Optional können Sie das Geo-Targeting-Verhalten anpassen, indem Sie folgendes Script vor dem Barefoot CMP Script in theme.liquid einfügen:

JavaScript 
// Optional: Vor dem Barefoot CMP Script
window.ConsentManagerConfig = {
  geoTargeting: {
    enabled: true,
    mode: 'eu-only',
    nonEuBehavior: 'none'
  }
};

Optionen für nonEuBehavior:

'none' – Kein Banner für Non-EU-Besucher

'notice' – Einfacher Cookie-Hinweis (kein Opt-in nötig)

'full' – Volles Opt-in Banner für alle Besucher

7. Checkout & Payment

Der Shopify-Checkout ist ein spezieller Bereich, der auf einer separaten Domain (checkout.shopify.com) läuft. Hier ist, was Sie wissen müssen:

  • Das Barefoot CMP Banner erscheint nicht auf der Checkout-Seite (andere Domain)
  • Payment-Cookies (Shopify Payments, PayPal, Klarna etc.) sind als "notwendig" kategorisiert
  • Der Zahlungsprozess wird nie durch Cookie-Consent beeinflusst
  • Warenkorb-Cookies funktionieren immer, unabhängig von der Einwilligung

Keine Sorge: Shopify-Payment-Cookies werden NICHT blockiert. Der Checkout funktioniert immer einwandfrei, unabhängig von der Cookie-Einwilligung des Besuchers.

Shopify Plus

Shopify Plus bietet erweiterte Möglichkeiten für die Checkout-Integration:

  • Checkout-Erweiterungen: Barefoot CMP kann optional in checkout.liquid eingebunden werden
  • Script Editor App: Alternative Einbindungsmethode für fortgeschrittene Setups
  • Custom Checkout Domain: Bei eigener Checkout-Domain kann das Banner auch dort angezeigt werden

8. Shopify Apps & Drittanbieter

Barefoot CMP erkennt die meisten populären Shopify-Apps und deren Tracking-Scripts automatisch. Hier eine Übersicht der gängigsten Integrationen:

App / Service Kategorie Automatisch erkannt
Google Analytics (nativ) Analytics Ja
Facebook Channel Marketing Ja
Klaviyo Marketing Ja
Mailchimp Marketing Ja
Hotjar Analytics Ja
Judge.me Reviews Funktional Teilweise
Loox Reviews Funktional Teilweise
ReConvert Marketing Ja

Hinweis: Shopify-Apps, die eigene Scripts laden, werden möglicherweise nicht alle automatisch erkannt. Prüfen Sie die Ergebnisse des Cookie-Scanners im Barefoot CMP Dashboard und passen Sie die Kategorisierung bei Bedarf manuell an.

9. Theme-Kompatibilität

Barefoot CMP ist mit allen gängigen Shopify-Themes kompatibel. Das Banner wird über JavaScript injiziert und kollidiert nicht mit dem Theme-CSS.

  • Dawn (Standard Shopify 2.0 Theme) – Vollständig kompatibel
  • Debut – Vollständig kompatibel
  • Turbo (Out of the Sandbox) – Vollständig kompatibel
  • Prestige – Vollständig kompatibel
  • Impulse – Vollständig kompatibel
  • Alle Shopify 2.0 Themes – Kompatibel

Universelle Kompatibilität: Da Barefoot CMP seine eigenen Styles kapselt und nicht auf Theme-CSS angewiesen ist, funktioniert es mit jedem Shopify-Theme – auch mit Custom-Themes und Page-Buildern wie GemPages oder Shogun.

10. Testen

Nach der Installation sollten Sie gründlich testen, ob alles korrekt funktioniert. Hier sind die wichtigsten Prüfpunkte:

  • Shopify Preview Mode: Das Banner erscheint auch in der Theme-Vorschau
  • Browser Developer Tools (F12): Console auf JavaScript-Fehler prüfen
  • Google Tag Assistant: Consent Mode v2 Signale verifizieren
  • Checkout-Test: Testbestellung durchführen und prüfen, ob alles funktioniert

Checkliste nach Installation

  • Banner erscheint auf allen Shop-Seiten
  • "Alle ablehnen" blockiert Analytics und Marketing Scripts
  • "Alle akzeptieren" schaltet alle Scripts frei
  • Google Analytics sendet Consent Mode v2 Signale
  • Checkout funktioniert einwandfrei
  • Cookie-Einstellungen können nachträglich geändert werden

Tipp: Nutzen Sie den Inkognito-Modus Ihres Browsers zum Testen. So starten Sie ohne gespeicherte Consent-Daten und sehen das Banner wie ein neuer Besucher.

11. Troubleshooting

Die häufigsten Probleme und deren Lösungen:

Mögliche Ursachen und Lösungen:

1. Script-Position prüfen: Stellen Sie sicher, dass das Script in theme.liquid innerhalb des <head>-Tags steht.

2. CMP-ID prüfen: Kontrollieren Sie, ob die richtige CMP-ID im Script eingetragen ist (Format: bf_xxxxxxxx).

3. Cache leeren: Leeren Sie den Browser-Cache und den Shopify-Theme-Cache.

4. Shopify Preview deaktivieren: In manchen Fällen blockiert die Shopify Preview bestimmte externe Scripts. Testen Sie im veröffentlichten Store.

5. Ad-Blocker deaktivieren: Einige Browser-Erweiterungen blockieren Cookie-Banner.

Auf Standard-Shopify-Stores ist das nicht möglich, da der Checkout auf einer anderen Domain (checkout.shopify.com) läuft. Nur bei Shopify Plus mit checkout.liquid kann das Banner optional eingebunden werden. Wenn Sie das Banner dort sehen, prüfen Sie, ob Sie Shopify Plus nutzen und das Script dort manuell eingefügt haben.

1. Consent Mode v2 aktiviert? Wenn Besucher den Analytics-Consent ablehnen, sendet GA4 keine Daten. Das ist das gewünschte Verhalten. Google nutzt in diesem Fall "Behavioral Modeling", um Lücken zu schließen.

2. Script-Reihenfolge prüfen: Das Barefoot CMP Script muss VOR {{ content_for_header }} stehen.

3. GA4 Property korrekt? Prüfen Sie die Measurement ID in den Shopify-Einstellungen.

4. Warten Sie 24-48 Stunden: GA4-Daten können bis zu 48 Stunden Verzögerung haben.

1. Ladereihenfolge prüfen: Stellen Sie sicher, dass das Barefoot CMP Script vor dem Facebook Pixel geladen wird.

2. Automatische Erkennung: Falls das Pixel über eine Shopify-App eingebunden ist, die einen ungewöhnlichen Lademechanismus nutzt, verwenden Sie die manuelle Blockierung mit dem data-consent-category="marketing" Attribut.

3. Cookie-Scanner nutzen: Führen Sie einen Scan im Barefoot CMP Dashboard durch und prüfen Sie, ob das Pixel erkannt wird.

Shopify-Theme-Updates können in seltenen Fällen Änderungen an theme.liquid zurücksetzen. Empfohlene Vorgehensweise:

1. Backup erstellen: Laden Sie vor jedem Theme-Update eine Kopie der theme.liquid herunter.

2. Nach dem Update prüfen: Kontrollieren Sie nach jedem Theme-Update, ob das Barefoot CMP Script noch vorhanden ist.

3. Script erneut einfügen: Falls entfernt, fügen Sie das Script erneut direkt nach <head> ein.

4. Benachrichtigung einrichten: Nutzen Sie den wöchentlichen Cookie-Scan im Dashboard, um automatisch informiert zu werden, wenn das Banner nicht mehr erkannt wird.

Shopify + Barefoot CMP = DSGVO-konformer E-Commerce

Schützen Sie Ihren Shopify-Store in weniger als 5 Minuten. Eine Zeile Code, volle Compliance.

Jetzt kostenlos starten