Dokumentation

Shopify

Fügen Sie Ihren Agenten mit dem Einbettungscode zu einem beliebigen Shopify-Shop hinzu.

Fügen Sie Ihren KI-Agenten zu einem Shopify-Shop hinzu, indem Sie den Einbettungscode in die Datei theme.liquid Ihres Themes einfügen. Funktioniert mit jedem Shopify-Tarif.

Holen Sie sich zuerst Ihren Einbettungscode über Chatbot > Veröffentlichen im Dashboard.

Methode 1: theme.liquid bearbeiten (empfohlen)

Fügen Sie das Widget site-weit hinzu, indem Sie Ihr veröffentlichtes Theme bearbeiten:

  1. Gehen Sie im Shopify-Adminbereich zu Online-Shop → Themes.
  2. Klicken Sie in der Zeile Ihres Live-Themes auf das Menü ... (Actions) → Edit code.
  3. Öffnen Sie im Ordner Layout auf der linken Seite die Datei theme.liquid.
  4. Scrollen Sie nach unten, und fügen Sie Ihren Einbettungscode kurz vor dem schließenden </body>-Tag ein.
  5. Klicken Sie auf Save.

Beispielformat (verwenden Sie die echten Werte aus Chatbot > Veröffentlichen):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

Das Widget erscheint auf jeder Storefront-Seite – Produkt, Kollektion, Warenkorb, Startseite.

Methode 2: Zuerst duplizieren, dann bearbeiten

Wenn Sie einen sicheren Rollback möchten:

  1. Online-Shop → Themes.
  2. Klicken Sie bei Ihrem Live-Theme auf das Menü ... (Drei-Punkte-Menü) → Duplicate. Am Ende der Theme-Liste erscheint eine Kopie.
  3. Bearbeiten Sie die Datei theme.liquid des Duplikats wie oben beschrieben.
  4. Klicken Sie beim Duplikat auf das Menü ... → Preview, um es zu testen.
  5. Wenn alles passt, klicken Sie auf das Menü ... → Publish, um es live zu schalten.

Methode 3: In eine bestimmte Seite einfügen

Um das Widget nur auf einer Seite hinzuzufügen (z. B. einer Support-Seite):

  1. Gehen Sie im Shopify-Adminbereich zu Online-Shop → Pages.
  2. Öffnen Sie die Seite, die Sie bearbeiten möchten.
  3. Klicken Sie im Inhaltseditor auf das Symbol <> (Show HTML).
  4. Fügen Sie Ihren Einbettungscode am Ende des Inhalts ein.
  5. Save.

Das Widget wird nur auf dieser Seite geladen.

Voraussetzungen

  • Das Theme, das Sie bearbeiten, muss ein veröffentlichtes oder kostenpflichtiges Theme sein. Der Code von Testversions-Themes kann nicht gespeichert werden.
  • Ihre Storefront-Domain sollte in der Liste der zulässigen Domains Ihres Agenten stehen, falls Sie Domain-Einschränkungen aktiviert haben.

Nach der Veröffentlichung

Shopify liefert Storefront-Assets über sein CDN aus. Änderungen sind innerhalb von ein bis zwei Minuten sichtbar. Wenn das Widget nicht angezeigt wird:

  1. Erzwingen Sie ein Neuladen der Seite (⌘+Shift+R auf dem Mac, Strg+F5 unter Windows).
  2. Öffnen Sie die Website in einem Inkognito-Fenster.
  3. Prüfen Sie die Browser-Konsole auf Fehler.

Fehlerbehebung

Das Widget wird nicht angezeigt.

  • Prüfen Sie, ob Sie das Live-Theme bearbeitet haben (oder das Duplikat veröffentlicht haben).
  • Prüfen Sie, ob sich das Snippet vor </body> befindet und nicht innerhalb von <head>.
  • Stellen Sie sicher, dass Ihre Storefront-Domain unter Chatbot > Veröffentlichen > Sicherheit zugelassen ist.

Das Widget überlappt sich mit Shopifys Chat- oder Warenkorb-Schublade.

  • Passen Sie die Widget-Position in den Design-Einstellungen Ihres Agenten an.

Das Widget erscheint im Editor, aber nicht im Live-Shop.

  • Stellen Sie sicher, dass Sie nach dem Einfügen auf Save geklickt haben – der Code-Editor speichert nicht automatisch.

Testen

  1. Öffnen Sie Ihre Storefront in einem Inkognito-Fenster.
  2. Achten Sie auf die Chat-Blase in der Ecke.
  3. Klicken Sie, um sie zu öffnen, und senden Sie eine Testnachricht.

Einen Shop für Bestellabfragen und Produktsuche verbinden

Das Einbetten des Widgets und das Verbinden Ihres Shops sind zwei getrennte Dinge. Der obige Einbettungscode bringt das Chat-Widget auf Ihre Storefront. Eine separate Shopify-Verbindung – hergestellt über den Tab Aktionen → Integrationen Ihres Agenten – lässt den Agenten zusätzlich Ihren Live-Katalog durchsuchen und den Status einer Bestellung innerhalb der Unterhaltung nachschlagen.

Sie können jedes für sich allein nutzen. Verwenden Sie nur die Einbettung, wenn der Agent ausschließlich aus Ihren Trainingsinhalten antworten soll, und fügen Sie die Shop-Verbindung hinzu, wenn Sie Live-Produkt- und Bestelldaten möchten.

Das Verbinden des Shops liefert nur die Zugangsdaten, schaltet aber noch nichts frei: Fügen Sie anschließend im Tab Aktionen Ihres Agenten die Aktionen Produkte durchsuchen und Bestellstatus abrufen hinzu und aktivieren Sie jede, die der Agent nutzen soll.

Shopify-Aktionen einrichten →

Nächste Schritte