Shopify-Anleitung

FirstBot-Widget in Ihren Shopify-Shop einbinden

Getestet mit Shopify · Funktioniert mit allen Shopify-Themes (Dawn, Debut, Brooklyn u. a.)

Inhalt

Ihr persönlicher Code-Schnipsel
Methode 1: Theme-Editor – theme.liquid (empfohlen)
Methode 2: Additional Scripts im Checkout
Methode 3: Shopify App (kein Code)
Widget testen
Häufige Fragen & Probleme

★ Ihr persönlicher Code-Schnipsel

Wenn Sie sich einloggen, wird Ihr persönlicher API-Key hier automatisch eingesetzt.

            
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer></script>
        

Dieser Code wird einmalig in die Theme-Vorlage eingefügt und erscheint danach auf allen Seiten Ihres Shops.

Methode 1: Theme-Editor – theme.liquid

★ Empfohlen

Die einfachste und zuverlässigste Methode für Shopify ist die direkte Bearbeitung der theme.liquid-Datei über den integrierten Theme-Editor. Das Widget erscheint dann auf allen Seiten Ihres Shops.

Schritt 1 – Theme-Editor öffnen

Loggen Sie sich in Ihren Shopify Admin ein.
Gehen Sie in der linken Menüleiste zu Online Store (Onlineshop).
Klicken Sie neben Ihrem aktiven Theme auf die drei Punkte „···".
Wählen Sie „Code bearbeiten" (Edit code).

Online Store › Themes › ··· → Code bearbeiten

Schritt 2 – theme.liquid öffnen

Im Code-Editor sehen Sie links eine Dateistruktur.
Öffnen Sie den Ordner „Layout".
Klicken Sie auf theme.liquid.

💡 In der Dateistruktur: Layout → theme.liquid

Schritt 3 – Code einfügen

Drücken Sie Strg+F (Windows) / Cmd+F (Mac) und suchen Sie nach </head>.
Positionieren Sie den Cursor direkt vor dem schließenden </head>-Tag.
Fügen Sie den folgenden Code ein:

<!-- FirstBot Widget -->
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer></script>
<!-- Ende FirstBot Widget -->
            

So sieht der relevante Bereich in der theme.liquid danach aus:

  ... (bestehender Head-Inhalt) ...
  <!-- FirstBot Widget -->
  <script>window.chatBotId = 'IHR-API-KEY';</script>
  <script src="https://firstbot.de/chatbot.js" defer></script>
  <!-- Ende FirstBot Widget -->
</head>
            

Schritt 4 – Speichern

Klicken Sie oben rechts auf „Speichern" (Save).
Shopify zeigt kurz „Gespeichert" an.
Öffnen Sie Ihren Shop in einem neuen Tab – der Chat-Button sollte erscheinen.

✓ Update-sicher: Wenn Sie das Theme aktualisieren, bleibt Ihre Änderung erhalten, solange Sie nicht das Theme wechseln. Bei einem Theme-Wechsel muss der Code erneut eingebunden werden.

Methode 2: Additional Scripts (Checkout)

Nur für Checkout-Seite

Über die Shopify-Einstellungen können Sie Scripts auch in den Checkout-Bereich einbinden. Das ist sinnvoll, wenn der Chatbot auch im Checkout-Prozess verfügbar sein soll.

⚠ Diese Methode ist ausschließlich für die Checkout-Seite. Für alle anderen Seiten nutzen Sie Methode 1.

Additional Scripts aufrufen

Gehen Sie zu Einstellungen (Settings) → Checkout.
Scrollen Sie zu „Additional scripts" (am Ende der Seite).
Fügen Sie den Code ein.
Klicken Sie auf „Speichern".

Settings › Checkout › Additional scripts

Methode 3: Über eine Shopify App (kein Code)

Für Nutzer ohne Programmierkenntnisse

Im Shopify App Store gibt es Apps, die es ermöglichen, JavaScript-Code ohne Theme-Bearbeitung einzubinden. Beliebte Optionen:

„Custom Code by Elfsight" – kostenlose Variante verfügbar
„Script Injector" – einfaches Interface für Code-Snippets
„Head & Body Scripts" – speziell für Header-Scripts

Allgemeines Vorgehen mit diesen Apps

Installieren Sie die gewünschte App aus dem Shopify App Store.
Öffnen Sie die App-Einstellungen.
Wählen Sie „Header Script" oder „Head-Code".
Fügen Sie Ihren FirstBot-Code ein und speichern Sie.

💡 Für Shops ohne Programmierkenntnisse ist eine solche App die benutzerfreundlichste Lösung, die keinen direkten Code-Eingriff erfordert.

Widget testen

Nachdem Sie den Code eingebunden haben, überprüfen Sie die Einbindung so:

Öffnen Sie Ihren Shopify-Shop in einem neuen Browser-Tab.
Drücken Sie Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac) für einen Hard-Refresh.
In der unteren rechten Ecke sollte der Chat-Button erscheinen.
Navigieren Sie zwischen verschiedenen Seiten (Startseite, Produktseite, Warenkorb) – der Button sollte überall erscheinen.

Prüfen mit Browser-Entwicklertools

Drücken Sie F12 zum Öffnen der Entwicklertools.
Wechseln Sie zum Tab „Console" (Konsole).
Es sollten keine Fehlermeldungen bezüglich chatbot.js erscheinen.
Im Tab „Elements" → suchen Sie im <head>-Bereich nach window.chatBotId.

Content Security Policy (CSP) prüfen

Shopify-Themes können eine Content Security Policy haben, die externe Scripts einschränkt. Falls das Widget nicht lädt, prüfen Sie in der Browser-Konsole auf CSP-Fehler wie:

Refused to load the script 'https://firstbot.de/chatbot.js' because it violates the following Content Security Policy directive...

In diesem Fall wenden Sie sich bitte an uns – wir unterstützen Sie bei der Konfiguration.

✓ Wenn der Chat-Button erscheint: Testen Sie das Widget mit einer Produktfrage, die Ihrer hinterlegten Wissensbasis entspricht.

Häufige Fragen & Probleme

Der Chat-Button erscheint nicht

Prüfen Sie ob der Code in der theme.liquid wirklich vor </head> steht.
Leeren Sie den Browser-Cache mit Strg+Shift+R.
Prüfen Sie in der Browser-Konsole (F12) auf Fehler.
Stellen Sie sicher, dass Sie die korrekte Domain in Ihrem FirstBot-Dashboard hinterlegt haben.

Das Widget erscheint im Shop, aber nicht im Checkout

Der Shopify-Checkout ist eine separate Seite mit eigenem Layout. Um das Widget auch dort einzubinden, nutzen Sie zusätzlich die „Additional Scripts"-Methode (Methode 2).

Theme-Update hat die Einbindung entfernt

Bei manchen Shopify-Themes kann ein Themes-Update die theme.liquid überschreiben. Wir empfehlen:

Vor jedem Theme-Update den eingebundenen Code notieren/sichern.
Nach dem Update den Code erneut einbinden.
Alternativ eine App aus Methode 3 nutzen – Apps bleiben von Theme-Updates unberührt.

Der Button überlagert andere Elemente

Die Position des Chat-Buttons kann im FirstBot-Dashboard unter Widget-Einstellungen → Position angepasst werden. Sie können zwischen „unten rechts" und „unten links" wählen.

Shop ist mehrsprachig

Das FirstBot-Widget erkennt automatisch die Sprache des Besuchers, sofern Ihr Chatbot entsprechend trainiert ist. Die Einbindung ist für alle Sprachen identisch – kein zusätzlicher Aufwand erforderlich.

Weitere Hilfe benötigt?
Schreiben Sie uns unter g.kunze@mukxx.de – wir unterstützen Sie gern bei der Einbindung in Ihren Shopify-Shop.

Tipp: Seiten-Kontext aktivieren

Nach der Einbindung: Aktiviere im Dashboard unter Trainingsdaten → „Seiten-Kontext“ die Option, damit dein Bot den Inhalt der Seite kennt, auf der dein Besucher gerade ist. So beantwortet er Fragen zu Produkten und Artikeln direkt – und lernt aus diesen Seiten dazu.