--- title: Wie installiere ich den Agenten auf Shopify description: Wo der Code im Shopify-Theme einzufügen ist, wie der Agent den Produktkatalog des Shops liest, was mit Warenkorb und Bezahlung zu beachten ist und wie die Installation überprüft wird. section: platforms keywords: Shopify, Shopify Widget, Widget für Shopify, theme.liquid, Chat für Shopify, KI-Agent, KI-Chatbot Shopify, Shopify Produktkatalog, Agent auf Shopify installieren, Shopify Code einfügen, Shopify Theme Code, AI Sales Agent Shopify, Shopify Integration, Shopify E-Commerce Agent updated: 2026-09-06 --- Shopify verfügt bereits über einen Katalog in maschinenlesbarer Form, daher erfasst der Agent Produkte präziser als anderswo: Preise, Varianten, Verfügbarkeit und Fotos stammen direkt aus dem Shop. ## Schritt 1. Code in das Theme einfügen 1. In der Shopify-Adminoberfläche öffnen Sie **Online Store → Themes**. 2. Bei dem aktiven Theme klicken Sie auf **… → Edit code**. 3. In der Dateiliste suchen Sie nach `layout/theme.liquid`. 4. Fügen Sie die Codezeile aus dem Dashboard direkt vor dem schließenden Tag `` ein. 5. Speichern Sie. Alternative ohne Theme-Bearbeitung: **Online Store → Preferences → Custom code** oder eine beliebige App zum Einfügen von Skripten. Das Ergebnis ist dasselbe. ```liquid ``` Die genaue Zeile erhalten Sie im Dashboard über die Schaltfläche „Code kopieren“: Dort ist die Adresse Ihres Shops bereits hinterlegt. ## Schritt 2. Katalog erstellen Geben Sie in den Einstellungen die Shop-Adresse an und starten Sie die Analyse. Der Shopify-Crawler liest die strukturierten Produktdaten aus: Name, Preis, Währung, Verfügbarkeit, Beschreibung und Fotos. Varianten (Größen, Farben) werden als Eigenschaften in die Produktkarte übernommen. Eine erneute Analyse aktualisiert Preise und Verfügbarkeit. Führen Sie diese nach größeren Änderungen am Sortiment aus: Der Agent verbindet sich nicht direkt mit Ihrer Datenbank, sondern arbeitet mit dem erfassten Katalog. ## Schritt 3. Zahlung im Shop belassen Bei Shopify muss die Zahlung im Chat nicht aktiviert werden. Das korrekte Vorgehen ist: 1. Geben Sie in den Shop-Einstellungen den Link zum Warenkorb an – üblicherweise `https://ihre-domain/cart`. 2. Der Agent wählt ein Produkt aus, zeigt die Produktkarte an und führt den Käufer per Schaltfläche zum Shopify-Warenkorb. 3. Bestellung und Zahlung erfolgen auf dem gewohnten Weg, mit all Ihren Versand- und Steuerregeln. Um zu sehen, welche Dialoge mit einem Kauf enden, fügen Sie ein Fragment des Kauf-Pixels auf der Dankesseite ein. In Shopify finden Sie dies unter **Settings → Checkout → Order status page → Additional scripts**. Das Fragment mit der Bestellnummer und dem Betrag liegt im Dashboard, im Bereich „Widget und Link“. ## Produkt landet im Warenkorb, ohne den Dialog zu unterbrechen Hier zeigt Shopify seine Stärken gegenüber anderen Plattformen. Der Agent zeigt Produktkarten mit Foto, Preis und Schaltfläche an, aber die Schaltfläche führt nicht nur zu einer Seite – sie legt das Produkt direkt in den Warenkorb des Shops. Das funktioniert so: Im Produktlink von Shopify ist eine Varianten-ID enthalten; der Agent übergibt diese Ihrem Warenkorb über die Standard-Schnittstelle `/cart/add.js`. Die Seite wird nicht neu geladen, der Dialog wird nicht unterbrochen, der Käufer sieht eine kurze Bestätigung und kann weiter auswählen. Das Produkt ist dabei bereits im Shopify-Warenkorb – mit all Ihren Regeln für Rabatte, Steuern und Versand. Wenn kein Variant in der URL vorhanden ist, öffnet der Agent die Produktkarte, und der Käufer fügt es selbst hinzu. Nichts geht kaputt, es ist nur ein Klick mehr. Wenn der Kunde bereit ist, führt die Schaltfläche „Zur Kasse gehen“ zu `/cart`, wo bereits alles gesammelt ist. Danach folgt die übliche Shopify-Kasse. Und noch zum Kontext: Der Agent liest die strukturierten Daten der Seite, auf der der Chat geöffnet ist. Der Käufer schaut sich ein bestimmtes Produkt an und fragt „Gibt es das in Größe L?“ – der Agent versteht, worum es geht, ohne nachfragen zu müssen. - Öffnen Sie den Shop im Inkognito-Modus, warten Sie auf die Chat-Schaltfläche. - Fragen Sie nach einem Produkt anhand des Namens – eine Produktkarte mit Preis sollte erscheinen. - Klicken Sie auf „Zur Kasse gehen“ – der Shopify-Warenkorb sollte sich öffnen. - Geben Sie eine Testbestellung auf und vergewissern Sie sich, dass der Kauf unter „Anfragen“ vermerkt ist. ## Chat im Stil des Shops Das Shopify-Theme gibt die Stimmung des gesamten Shops vor, und der Chat sollte sich nahtlos einfügen. In den Widget-Einstellungen gibt es drei Optionen: hell, dunkel und „wie beim Besucher“, die den Geräteeinstellungen des Käufers folgt. Für Shops mit dunklem Theme stellen Sie die dunkle Option fest ein, für helle Shops die helle. Die Akzentfarbe der Schaltflächen bleibt in beiden Fällen Ihre eigene. ## Schritt 4. Überprüfen ## Häufige Probleme **Widget nach Theme-Wechsel verschwunden.** Der Code befindet sich in der Theme-Datei. Ein Wechsel oder Update des Themes löscht die Änderung – fügen Sie den Code erneut ein oder verwenden Sie Custom code, das unabhängig vom Theme ist. **Katalog nicht vollständig erfasst.** Der Crawler erfasst Produkte von öffentlichen Seiten. Vor dem Katalog verborgene Produkte und Entwürfe werden nicht übernommen, das ist korrekt. **Preise im Katalog veraltet.** Starten Sie die Website-Analyse erneut, sie aktualisiert Preise und Verfügbarkeit für bestehende Produktkarten. **Widget kollidiert mit Chat-App.** Belassen Sie nur einen Chat: Zwei Fenster in derselben Ecke stören sich gegenseitig und verwirren den Käufer. ## Häufig gestellte Fragen ### Ist eine App aus dem Shopify App Store erforderlich? Nein. Der Agent wird mit einer einzigen Codezeile verbunden, eine App-Installation ist nicht erforderlich. ### Kann der Agent Produktvarianten anzeigen? Ja, Varianten werden als Eigenschaften in die Produktkarte übernommen: Größe, Farbe, Volumen. Die Auswahl einer bestimmten Variante trifft der Käufer im Shopify-Warenkorb. ### Wie verhält es sich mit mehreren Währungen? Der Agent zeigt die Preise in der Katalogwährung an, die er beim Crawling ermittelt. Die Shopify-Multiwährungsfunktion greift danach, auf der Seite des Warenkorbs und der Zahlung. ### Kennt der Agent den Lagerbestand? Die Verfügbarkeit wird zum Zeitpunkt der Analyse erfasst. Für Produkte, die häufig ausverkauft sind, führen Sie die Analyse häufiger durch oder fügen Sie den Bedingungen einen Hinweis hinzu, dass die Verfügbarkeit bei der Bestellung geprüft wird. ### Beeinflusst das Widget die Shop-Geschwindigkeit? Das Skript wird asynchron geladen und blockiert das Rendering nicht. Auf die Core Web Vitals-Metriken hat dies praktisch keinen Einfluss.