Am einfachsten kannst du einen Shopify Live Chat einbauen, indem du den Widget-Code in die Layout-Datei deines Themes einfügst, damit er auf den Shopseiten geladen wird. Dafür brauchst du weder eine App aus dem App Store noch eine Bestellintegration: Das Meetlead-Widget läuft als eigenes Skript im Browser der Kundschaft. Diese Anleitung gilt für einen Online Store mit einem Theme, das du bearbeiten darfst. Sie zeigt, wo der Code hingehört, wie du dich vor der Änderung absicherst und was du nach der Veröffentlichung am Smartphone prüfst.
Bevor du startest, bestimme eine verantwortliche Person und entscheide dich für eine einzige Einbettungsmethode. Wenn du noch festlegst, wo der Chat erscheinen soll und wer antwortet, beginne mit dem Leitfaden zum Live-Chat im Onlineshop. Hier geht es um die Technik: Code, Theme, Domains und Test.
Wohin der Chat-Code in Shopify gehört
Füge den Chat-Code in die Datei theme.liquid im Ordner Layout ein, direkt vor dem Ende des head-Bereichs. Das ist das Standardlayout des Themes, daher deckt ein Eintrag meist Startseite, Kollektionen, Produktseiten und Warenkorb ab. Nutzt dein Theme zusätzliche Layouts, etwa für eine passwortgeschützte Seite, prüfe diese separat. Das Meetlead-Skript hat das Attribut async und hält die Darstellung deiner Shopinhalte nicht auf.
Die Shopify-Dokumentation für Theme-Entwickler beschreibt theme.liquid als Standardlayout für alle Seiten außerhalb des Checkouts. Über bestimmte Chat-Tools oder den Aufbau der übrigen Dateien deines Themes sagt sie nichts. Shopify.dev: Layouts.
Die praktische Folge: Ein im Theme eingebettetes Widget erscheint nicht im Checkout. Fragen zu Zahlung und Lieferung musst du also früher auffangen: Biete auf der Produktseite und im Warenkorb einen klaren Kontaktweg an.
Vor der Änderung: Zugriff, Theme-Kopie und Domains
Für die Codebearbeitung brauchst du passende Berechtigungen in Shopify. Seit April 2023 hat der Code-Editor eine eigene Berechtigung Edit code, getrennt von der Theme-Verwaltung. Wer Themes sehen darf, bekommt also nicht automatisch Zugriff auf den Code. Übernimmt eine externe Agentur die Arbeit, vergib nur den nötigen Umfang und notiere, wer die Datei geändert hat.
Die Shopify-Hilfe empfiehlt, das Theme vor der Codebearbeitung zu duplizieren, erlaubt das Wiederherstellen einer früheren Version einzelner Dateien in der Timeline-Ansicht und warnt, dass inkompatible Änderungen bei einem Theme-Update verloren gehen können. Die Installation von Drittanbieter-Tools beschreibt die Seite nicht. Shopify Help Center.
- Du hast ein Konto mit Berechtigung zur Codebearbeitung oder eine Person, die es hat.
- Das Theme ist kostenlos oder gekauft; den Code eines kostenpflichtigen Themes kannst du in Shopify erst nach dem Kauf bearbeiten.
- Eine Kopie des Themes ist mit Duplicate erstellt und trägt das Datum im Namen.
- In Meetlead hast du eine Website mit eigener clientId und den kopierten Einbettungscode.
- Die Liste erlaubter Domains enthält alle exakten Hosts des Shops: die Domain mit und ohne www sowie die myshopify.com-Adresse, falls du sie nutzt.
Am letzten Punkt scheitert der Start am häufigsten. Meetlead unterstützt keine Platzhalter in Domains, deshalb trägst du jeden Host einzeln und ohne Pfad ein. Jeder Eintrag zählt zum Domainlimit deines Tarifs, also prüfe es, bevor du Hosts hinzufügst. Eine Testdomain fügst du für die Dauer der Einführung hinzu und entfernst danach alle, die du nicht mehr brauchst.
Installation Schritt für Schritt
Die folgende Reihenfolge geht davon aus, dass du den Code nach dem Anlegen der Kopie in das veröffentlichte Theme einfügst. Du kannst auch zuerst die Kopie bearbeiten, sie prüfen und erst dann veröffentlichen; beachte in dem Fall die Einschränkung der Vorschau weiter unten.
- Code in Meetlead kopieren.Kopiere in den Website-Einstellungen das Basisskript mit der richtigen clientId. Die Kennung ist öffentlich, muss aber zu dieser Website gehören, sonst landen Gespräche am falschen Ort.
- Code-Editor öffnen.Geh im Shopify-Adminbereich zu Online Store, öffne das Menü neben dem Theme und wähle Edit code. Die Bezeichnungen hängen von der Sprache deines Adminbereichs ab.
- theme.liquid finden.Die Datei liegt im Ordner Layout. Suche das Ende des head-Bereichs und setze den Cursor direkt davor.
- Einfügen und speichern.Füge das Skript in einer eigenen Zeile ein, ergänze darüber einen kurzen Kommentar mit Toolname und Datum und speichere die Datei.
- Shop im privaten Fenster öffnen.Prüfe Startseite, eine Produktseite und den Warenkorb. Der Launcher sollte erscheinen, ohne dass du in Shopify angemeldet bist.
- Testnachricht senden.Schreib vom Smartphone und antworte im Panel. Erst eine Antwort, die bei der Kundschaft ankommt, bestätigt die funktionierende Installation.
Aussehen, Sprachen und Texte des Widgets änderst du später in Widget Studio, ohne das Theme erneut zu bearbeiten. Der Code in theme.liquid lädt nur das Widget, die Konfiguration kommt aus Meetlead. So braucht eine neue Farbe oder Begrüßung niemanden mit Codezugriff.
Ein Widget statt zwei
Der häufigste Fehler beim Toolwechsel sind zwei Launcher in der Bildschirmecke, von denen einer nie antwortet. In Shopify kann ein alter Chat gleichzeitig aus mehreren Quellen geladen werden. Prüfe alle, bevor du die Einführung für abgeschlossen erklärst.
Scrolle die Tabelle seitlich, um alle Spalten zu sehen.
| Quelle des alten Chats | Wo prüfen | Was tun |
|---|---|---|
| Im Theme eingebettete App | Theme-Editor, Bereich App embeds | Einbettung deaktivieren, speichern, dann Deinstallation erwägen |
| Manuell eingefügter Code | theme.liquid und Dateien im Ordner Snippets | Altes Skript entfernen und einen Kommentar zur Änderung hinterlassen |
| Tag-Manager | Tag-Container des Marketingteams | Chat-Tag am selben Tag pausieren |
Dieselbe Regel gilt auf anderen Plattformen; für WordPress beschreiben wir sie im Leitfaden zum Chat auf einer WordPress-Website. Halte in der Shop-Dokumentation fest, wo der Code steht und in welchem Theme. Laut Shopify-Hilfe musst du Apps, die du einem Theme hinzugefügt hast, nach einem Wechsel des veröffentlichten Themes im neuen Theme erneut aktivieren. Auch ein manuell eingefügtes Skript gehört zu genau einem Theme, sodass du es im neuen Theme wieder einfügst. Auf einer Squarespace-Website steht der Chat-Code in einem einzigen Feld im Bereich Code Injection statt in einer Theme-Datei, wie der Leitfaden Chat in Squarespace einbinden zeigt.
Test am Smartphone und in der Theme-Vorschau
Die Theme-Vorschau kann täuschen. Der Link, den du mit Personen außerhalb des Adminbereichs teilst, läuft unter einer Adresse auf shopifypreview.com, die meist nicht auf deiner Liste erlaubter Hosts steht. Das Widget lädt dort womöglich nicht, obwohl es auf der echten Domain korrekt funktioniert. Den abschließenden Test machst du deshalb auf der Domain, die deine Kundschaft sieht.
Laut Shopify-Hilfe nutzen Vorschaulinks für Besucher die Domain shopifypreview.com und laufen nach zwei Tagen ab. Wie sich Skripte von Drittanbietern dort verhalten, beschreibt sie nicht. Shopify Help Center.
Prüfe am Smartphone, ob der Launcher den Warenkorb-Button, die Preisleiste oder den Einwilligungsbanner verdeckt. Teste auf einem echten Gerät, im Hoch- und Querformat. Verschwindet der Kaufbutton unter dem Symbol, ändere Position oder Abstand des Widgets; wie du solche Kollisionen findest, zeigt der Leitfaden zu fixierten Elementen, die Buttons verdecken. Allgemeine Unterschiede zwischen Smartphone und Desktop behandeln wir im Artikel zur Conversion auf Mobilgeräten.
- Das Widget öffnet sich im Vollbild und lässt sich leicht schließen.
- Die Tastatur verdeckt weder das Nachrichtenfeld noch den Senden-Button.
- Der Launcher überdeckt nicht den Kaufbutton auf der Produktseite.
- Einwilligungsbanner und Widget überlappen sich nicht.
- Eine Nachricht vom Smartphone kommt im Panel an, und die Antwort erreicht die Kundschaft.
Was du nach dem ersten Test einstellst
Funktionierender Code ist erst die halbe Einführung. In Meetlead legst du Sichtbarkeitsregeln fest: alle Seiten, nur bestimmte Pfadpräfixe oder alle außer bestimmten, dazu ausgewählte Geräte. So kannst du das Widget etwa im Kundenkonto ausblenden, ohne den Theme-Code anzufassen. Richte außerdem Verfügbarkeitszeiten und den Offline-Modus ein, damit niemand außerhalb der Servicezeiten auf eine Antwort wartet, die nicht kommt.
Behalte die Grenze im Blick: Ein im Theme eingebettetes Widget ist nicht mit Shopify-Bestellungen verbunden. Im Gespräch sieht dein Team weder Versandstatus noch Kaufhistorie, solange die Kundschaft sie nicht selbst nennt, also bereite eine Standardfrage nach der Bestellnummer vor. Soll das Widget Sitzungen aufzeichnen, kläre zuerst Rechtsgrundlage und Startmodus; Datenfragen behandeln wir im Artikel Live-Chat und DSGVO. Dieser Text ist keine Rechtsberatung.
Chat: Meetlead, Website [Name], clientId aus dem Panel. Code in theme.liquid des Themes [Name], vor dem Ende des head-Bereichs, eingefügt am [Datum] von [Person]. Theme-Kopie: [Name der Kopie]. Hosts auf der Liste: [Domain], [www.Domain], [myshopify.com-Adresse]. Alter Chat deaktiviert in: [Ort].
Häufige Fragen
Erscheint der Chat auf der Zahlungsseite? Nein, wenn du ihn in theme.liquid einbettest, denn dieses Layout umfasst den Shopify-Checkout nicht. Die Kundschaft sieht das Widget auf Produkt-, Kollektions- und Warenkorbseiten. Kommen Fragen zur Zahlung häufig vor, beantworte sie vor dem Checkout: auf der Produktseite, im Warenkorb und in der Nachricht nach der Bestellung.
Muss ich den Code nach einem Theme-Update erneut einfügen? Möglicherweise. Shopify warnt, dass inkompatible Codeänderungen in der aktualisierten Theme-Kopie verloren gehen können, und ein neues Theme übernimmt keine manuellen Einträge aus dem alten. Öffne nach jedem Update oder Wechsel des Themes den Shop in einem privaten Fenster und sende eine Testnachricht. Diese kurze Prüfung schützt dich vor Tagen ohne Gespräche.
