In Shopify einbinden

So binden Sie Ihr botts.ai Chat-Widget in einen Shopify-Shop ein, mit einer Zeile Code in der Datei theme.liquid Ihres Themes, in sieben Schritten.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in einen Shopify-Shop ein. Sie nutzen dafür den Code-Editor von Shopify: Sie fügen das Script des Widgets in die Datei theme.liquid Ihres Themes ein, direkt vor dem schliessenden </body>-Tag. Danach lädt der Code auf jeder Seite Ihres Shops. Er gehört zu diesem einen Theme: Veröffentlichen Sie später ein anderes Theme, fügen Sie ihn dort erneut ein.

Das brauchen Sie

• Zugang zu Ihrem Shopify-Adminbereich. Mitarbeiterkonten brauchen die Berechtigungen Themes und Code bearbeiten aus dem Bereich Onlineshop.
• Einen Shopify-Plan mit vollständigem Onlineshop: Basic, Grow, Advanced oder Plus. Im Starter-Plan bietet Shopify nur das Theme Spotlight an, ohne weitere Anpassungsmöglichkeiten.
• Ein Theme, dessen Code Sie bearbeiten dürfen. Kostenlose Themes aus dem Shopify Theme Store eignen sich dafür. Ein kostenpflichtiges Theme, das Sie nur testen, lässt sich erst bearbeiten, wenn Sie es gekauft haben.
• Den Einbettungscode Ihres Website-Deployments. Öffnen Sie in botts.ai Agenten, wählen Sie Ihren Agenten, wechseln Sie in den Tab Bereitstellen und öffnen Sie das Website-Deployment. Im Abschnitt Einbinden ganz unten im Editor steht der Code, mit einer Schaltfläche zum Kopieren. Noch kein Website-Deployment? Siehe Deployments.

Der Einbettungscode sieht so aus, mit dem Schlüssel Ihres Deployments anstelle von IHR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY"></script>

Schritt 1: Themes öffnen

Melden Sie sich im Shopify-Adminbereich an. Klicken Sie in der linken Seitenleiste unter Vertriebskanäle auf Onlineshop. Ihr veröffentlichtes Theme, also das Theme, das Ihr Shop gerade verwendet, erscheint oben auf der Seite als grosse Vorschau. Unten rechts in dieser Vorschau, neben der Schaltfläche zum Bearbeiten des Themes, finden Sie die Schaltfläche ⋯.

Schritt 2: Sicherungskopie erstellen

Shopify empfiehlt, das Theme zu duplizieren, bevor Sie seinen Code bearbeiten. Klicken Sie neben Ihrem veröffentlichten Theme auf die Schaltfläche ⋯ und dann auf Duplizieren. Die Kopie erscheint auf derselben Seite und bleibt unveröffentlicht. Geht etwas schief, können Sie auf sie zurückgreifen.

Schritt 3: Code-Editor öffnen

Klicken Sie erneut neben Ihrem veröffentlichten Theme auf ⋯ und wählen Sie Code bearbeiten. Achten Sie darauf, dass es das veröffentlichte Theme ist und nicht die Kopie. Der Code-Editor öffnet sich in einem neuen Browser-Tab.

Schritt 4: theme.liquid öffnen

Öffnen Sie in der Dateiliste links den Ordner layout und klicken Sie auf theme.liquid. Alternativ drücken Sie ⌘ + P (Mac) oder Strg + P (Windows) und geben theme.liquid ein.

Schritt 5: Code vor dem schliessenden body-Tag einfügen

Scrollen Sie ans Ende der Datei oder drücken Sie ⌘ + F (Mac) oder Strg + F (Windows) und suchen Sie nach </body>. Klicken Sie an den Anfang dieser Zeile, drücken Sie die Eingabetaste, damit darüber eine leere Zeile entsteht, und fügen Sie dort den Einbettungscode ein. Übernehmen Sie den Code genau so, wie Sie ihn kopiert haben: Adresse und Schlüssel dürfen sich nicht ändern. Lassen Sie den Rest der Datei unverändert.

Der Editor unterstreicht möglicherweise einen Teil der Zeile und zeigt eine Warnung an, das Asset solle über das Shopify-CDN ausgeliefert werden. Diese Warnung können Sie ignorieren: Das Widget muss von botts.ai geladen werden, und die Datei lässt sich normal speichern.

Schritt 6: Datei speichern

Klicken Sie oben rechts im Editor auf Speichern oder drücken Sie ⌘ + S (Mac) oder Strg + S (Windows). Damit ist der Code in Ihrem veröffentlichten Theme aktiv.

Schritt 7: Widget im Shop prüfen

Öffnen Sie Ihren Shop in einem privaten Fenster, laden Sie die Seite neu und warten Sie einen Moment. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie das Widget und senden Sie eine Testfrage. Prüfen Sie auch eine Produktseite und die Ansicht auf dem Smartphone.

Ist Ihr Shop noch passwortgeschützt, geben Sie zuerst das Shop-Passwort ein. Auf der Passwortseite selbst erscheint das Widget nicht. Auch die Checkout-Seiten verwenden theme.liquid nicht, deshalb erscheint das Widget im Checkout nicht.

Wenn Sie das Theme wechseln oder aktualisieren

Der Code steckt in dem Theme, in das Sie ihn eingefügt haben. Veröffentlichen Sie ein anderes Theme, wiederholen Sie dort die Schritte 3 bis 6.

Ist ein Theme-Update verfügbar, zeigt Shopify anstelle der Versionsnummer Ihres Themes eine Benachrichtigung an. Wenn Sie darauf und dann auf Zu Theme-Entwürfen hinzufügen klicken, erscheint das Update unter Ihren Theme-Entwürfen als neues Theme. Sein Name beginnt mit Aktualisierte Kopie von, gefolgt vom Namen Ihres Themes. Shopify versucht, Ihre Code-Bearbeitungen zu übernehmen, und zeigt das Ergebnis auf der Theme-Karte an:

• Theme hinzugefügt: Code-Bearbeitungen erfolgreich übernommen: Der Widget-Code wurde mitgenommen. Prüfen Sie zur Sicherheit theme.liquid in der neuen Kopie.
• Theme hinzugefügt: Code-Bearbeitungen konnten nicht übernommen werden: Wiederholen Sie die Schritte 3 bis 6 in der aktualisierten Kopie, bevor Sie sie veröffentlichen.

Falls das Widget nicht erscheint

1. Prüfen Sie, ob Sie das veröffentlichte Theme bearbeitet haben und nicht die Sicherungskopie oder einen anderen Entwurf.
2. Prüfen Sie, ob der vollständige Code in theme.liquid direkt vor </body> steht und gespeichert ist. Solange Änderungen nicht gespeichert sind, zeigt der Tab einen Punkt. Eine Zahl daneben zählt nur Warnungen des Editors.
3. Haben Sie kürzlich ein neues Theme oder eine aktualisierte Kopie veröffentlicht, prüfen Sie, ob auch deren theme.liquid den Code enthält.
4. Testen Sie in einem privaten Fenster ohne Werbeblocker. Blockiert Ihr Cookie-Banner oder Ihre Consent-App Scripts, prüfen Sie deren Konfiguration.
5. Prüfen Sie, ob der Schlüssel zum richtigen Deployment gehört und ob das Deployment im Tab Bereitstellen eingeschaltet ist.

Widget ändern oder entfernen

Farben, Texte, den Launcher und alle anderen Einstellungen des Widgets ändern Sie im botts.ai Editor. Ihr Shop übernimmt sie, ohne dass Sie in Shopify etwas ändern. Ersetzen müssen Sie den Code nur, wenn sich der Schlüssel des Deployments ändert.

Um das Widget zu entfernen, öffnen Sie theme.liquid erneut, löschen nur die botts.ai Script-Zeile und speichern.

Weitere Hilfe

• Shopify Help Center: Theme-Code bearbeiten
• Shopify Help Center: Themes duplizieren
• Shopify Help Center: Themes aktualisieren
• Die allgemeinen Schritte für jede Website: Einbettungscode

Zuletzt aktualisiert am 4. Oktober 2026