Dokumentation

Shopify

Installieren Sie das Agentkit-Widget in einem Shopify-Theme mit dem vollständigen generierten Code.

Fügen Sie das Agentkit-Widget zu Ihrem Shopify-Shop hinzu, indem Sie den vollständigen generierten Einbettungscode in theme.liquid einfügen.

Öffnen Sie in Agentkit Kanäle → Website-Einbindung → Chat-Widget, aktivieren Sie den Kanal und kopieren Sie den vollständigen Code. Er enthält zwei Script-Tags: einen Inline-Bootstrap und einen asynchronen Loader. Behalten Sie beide Tags zusammen. Shopify empfiehlt, das Theme vor Änderungen zu duplizieren.

Methode 1: theme.liquid bearbeiten

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.

Fügen Sie den kopierten Code unverändert ein. Prüfen Sie nach dem Speichern im gerenderten Storefront-Quelltext, ob beide <script>-Tags vorhanden sind.

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

Methode 2: Zuerst duplizieren, dann bearbeiten (empfohlen)

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.

Platzierung auf nur einer Seite

Soll das Widget nur auf einer Seite erscheinen, lassen Sie beide generierten Tags durch einen Theme-Entwickler auf eine Seitenvorlage begrenzen. Prüfen Sie, dass beide Tags nur dort erscheinen. Der Rich-Text-Editor für Shopify-Seiten ist für dieses Widget kein verifizierter Installationsweg.

Voraussetzungen

  • Sie benötigen Zugriff auf den Theme-Code. Ein kostenpflichtiges Theme im Testmodus kann erst nach dem Kauf bearbeitet werden. Ihre Rolle benötigt die Berechtigungen Themes und Edit code. Siehe Shopifys Anleitung zum Theme-Code.
  • Lassen Sie den Agentkit-Kanal Chat-Widget beim Testen des öffentlichen Shops aktiviert.
  • Wenn Domaineinschränkungen aktiviert sind, lassen Sie sowohl die genaue Origin der Theme-Vorschau als auch die des Live-Shops zu. Entfernen Sie eine temporäre Vorschau-Origin nach dem Test.

Nach der Veröffentlichung

Wenn das Widget im öffentlichen Shop nicht erscheint:

  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 im gerenderten Storefront-Quelltext, ob beide generierten Script-Tags vor </body> stehen.
  • Stellen Sie sicher, dass Ihre Storefront-Domain durch die Agentkit-Domaineinschränkungen 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.
  4. Prüfen Sie im gerenderten Seitenquelltext, ob beide generierten Script-Tags vorhanden sind.

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