Ein Chat-Widget, das aussieht wie der Rest deines Shops — das neue Vorlagensystem
Ein Chat-Widget, das aussieht wie der Rest deines Shops
Vor etwa einem Monat hatten wir ein Treffen mit einem großen niederländischen Verlag. Zwei seiner Titel betreiben E-Commerce-Shops mit sehr ausgeprägter visueller Identität. Ein roter Preis aufgeteilt in zwei Größen (großer Ganzteil, kleinere Cents leicht erhöht). Ein gelbes Etikett in der oberen linken Ecke der Produktkarte mit dem empfohlenen Preis und dem aktuellen Preis nebeneinander. Ein orangefarbener Pfeil als Call-to-Action. Ein Klick auf die Karte oder den Pfeil sollte die Produktdetails in einem Modal öffnen — nicht zur Shop-Seite weiterleiten. Viele dieser Elemente sollten sich völlig vom Standard-Upsellic-Widget unterscheiden.
Damals beschränkte sich die gesamte Theme-Konfiguration von Upsellic auf vier Farben. Wir haben es klar ausgesprochen: ohne Umbau des Systems schaffen wir das nicht.
Wir haben es geschafft.
Was sind Widget-Vorlagen?
Jedes Upsellic-Theme besteht jetzt aus 15 unabhängigen Vorlagen. Jede Vorlage ist ein Code-Fragment in Nunjucks — einer Sprache ähnlich Twig, Handlebars oder Jinja. Eine zentrale CSS-Datei hält das Ganze zusammen. Zusammen rendern sie alles, was der Besucher sieht: Produktkarten in Assistentennachrichten, Konversationsblasen, das Produktdetail-Modal, das Bewertungs-Modal, den Widget-Header, den Footer und das Werbebanner.
Du kannst jede dieser Vorlagen von Grund auf neu schreiben. Du hast volle Kontrolle über die HTML-Struktur, CSS-Klassen, die Reihenfolge der Elemente und das gesamte Layout. Unverändert bleiben lediglich die Variablennamen — product.title, theme.primaryColour, phrases.viewProduct — die das Backend automatisch mit den richtigen Daten verknüpft. Du musst sie nicht auswendig lernen; die System-Vorlage, von der du ausgehst, verwendet bereits alle verfügbaren Variablen. Du kopierst, bearbeitest, prüfst das Ergebnis.
Was sich im Alltag ändert
Angenommen, du integrierst das Widget in einen Kosmetikshop. Die Produktseite hat ein minimalistisches Layout — viel Weißraum, der Preis als eine zusammenhängende Zahl, ein schwarzer „In den Warenkorb"-Button. Das Standard-Upsellic-Widget hat Produktkarten mit Gradient, weichen Schatten und einem violetten CTA — sieht ansprechend aus, passt aber nicht zum Rest der Seite.
Anstatt uns eine E-Mail mit der Bitte um Hilfe zu schicken, klonst du ein System-Theme, öffnest den Vorlageneditor, wählst den Slot PRODUCT_CARD, entfernst den Gradient, reduzierst den Schatten, änderst den Button in ein schwarzes Rechteck. Auf der rechten Seite des Panels läuft die ganze Zeit eine Live-Vorschau mit Beispieldaten — du siehst sofort, wie die Karte sowohl allein als auch mit der vom Assistenten ergänzten Empfehlungsbegründung unter dem Titel aussieht.
Jeder Tastenanschlag wird im Entwurf gespeichert. Der Entwurf verlässt dein Panel nicht — das produktive Widget zeigt die ganze Zeit das, was du zuletzt veröffentlicht hast. Du kannst eine Stunde an einem Slot arbeiten, einen unfertigen Entwurf für eine Woche liegen lassen, am nächsten Morgen zurückkommen und weitermachen. Kunden sehen nichts, bis du auf Veröffentlichen klickst.
Das ist eine bewusste Designentscheidung, kein technisches Detail. Wir haben beobachtet, wie Nutzer Angst haben, irgendetwas am produktiven Widget anzufassen, weil jede Änderung sofort live geht. Hier ist es umgekehrt — Experimentieren kostet nichts, und der letzte Schritt (Veröffentlichung) erfordert einen bewussten Klick.
Mit Quelle vergleichen — was sich tatsächlich geändert hat
Nach einer Stunde Bearbeitung vergisst man leicht, was genau geändert wurde. Bei jedem Slot gibt es einen Button Mit Quelle vergleichen, der den Editor in den Side-by-Side-Diff-Modus umschaltet: links die ursprüngliche System-Vorlage, rechts deine Version. Jeder Unterschied wird Zeile für Zeile hervorgehoben.
Wir haben keinen ausgebauten Änderungsverlauf wie ein Commit-Log — das ist kein Git. Diese Ansicht reicht in der Praxis: du siehst, was hinzugefügt wurde, was entfernt wurde, und du kannst die Änderungen entweder behalten oder über Zurücksetzen (stellt den Slot auf die System-Version zurück) oder Entwurf verwerfen (geht zurück zu dem, was aktuell veröffentlicht ist) rückgängig machen.
Export und Import — Themes sind portabel
Jedes eigene Theme kannst du in eine einzelne JSON-Datei exportieren. Farben, alle 15 Slots, einschließlich Entwürfe und veröffentlichte Versionen. Die Datei erhält einen Namen mit dem Exportdatum, z. B. MeinTheme.2026-05-01T12-34-56.theme.json.
Wozu? Drei konkrete Anwendungsfälle.
Erstens: Eine Agentur entwirft das Theme auf einem Testkonto, exportiert es, der Kunde importiert es auf seinem Produktivkonto. Ohne manuelles Kopieren Vorlage für Vorlage.
Zweitens: Du willst Änderungen rückgängig machen. Hast du einen Export von vor zwei Wochen? Importiere ihn zurück — und hier ein wichtiges Detail — der Import überschreibt niemals ein bestehendes Theme. Er erstellt ein neues Theme mit dem Zusatz (import 2026-05-01 14:22:08) im Namen. Das alte Theme, das aktuell live ist, bleibt unverändert. Um zurückzurollen, wählst du in den Widget-Einstellungen einfach das importierte Theme aus. Wenn sich herausstellt, dass die neuere Version doch besser war — wechselst du mit einem Klick zum vorherigen Theme zurück.
Drittens: vollwertige A/B-Tests. Du importierst Variante B als separates Theme, hängst es an ein zweites Widget auf derselben Seite (z. B. für 50 % des Traffics), sammelst eine Woche lang Daten und entscheidest, welches Theme besser funktioniert.
Der Editor von innen
Der Vorlageneditor ist Monaco — dieselbe Engine, auf der VS Code basiert. Syntax-Highlighting für HTML und Nunjucks in Slot-Vorlagen, CSS-Highlighting im STYLES-Slot. Multi-Cursor, Suchen und Ersetzen, Klammer-Matching, Zeilennummern und das volle Set an Tastenkürzeln.
Auf der rechten Seite befindet sich die Live-Vorschau, die sich bei jeder Änderung des Entwurfs automatisch aktualisiert. Sie nutzt Beispieldaten — Produkt, Inhalt, Bestellung sowie Konversationsblasen, die das Aussehen einer echten Unterhaltung mit dem Assistenten nachbilden. Klickst du in der Vorschau auf eine Produktkarte — öffnet sich das Modal, das du gerade bearbeitet hast. Klickst du auf das X in der oberen rechten Ecke — schließt sich das Modal.
In der Symbolleiste gibt es außerdem einen Button Widget-Cache leeren. Nutze ihn, wenn du auf der Produktion einen Rebuild erzwingen möchtest, ohne irgendeine Vorlage zu ändern.
System-Themes sind schreibgeschützt — und warum das die richtige Entscheidung ist
Die drei System-Themes — default, minimal, editorial — sind als „nur lesen" markiert. Wenn du etwas ändern möchtest, musst du das Theme zuerst klonen. Das ist Absicht.
Der Grund: Wenn wir Updates ausliefern (ein neues Element hinzufügen, eine visuelle Regression in einem Browser beheben), landen die Änderungen ausschließlich in den System-Themes. Dein geklontes Theme bleibt genau in dem Zustand, in dem du es verlassen hast. Es gibt keine Situation, in der du morgens aufwachst, den Shop öffnest und das Widget plötzlich anders aussieht.
Bei Bedarf kannst du prüfen, was sich im System-Theme geändert hat — der Button „Mit Quelle vergleichen" zeigt immer die aktuelle System-Version neben deiner eigenen. Wenn du feststellst, dass die neue System-Version ein nützliches Element enthält, das dir fehlt, kopierst du es manuell in dein eigenes Theme. Ohne das Risiko, dass unsere Änderungen deine Anpassungen überschreiben.
Für wen das gemacht ist
Wenn dein Shop eine starke visuelle Identität hat und du dich bisher mit vier Farben aus dem Konfigurator behelfen musstest — dann ist das eine Option für dich. Wenn du einen Shop auf einem Standard-Theme betreibst und möchtest, dass sich der KI-Assistent neben den Produkten so präsentiert, als wäre er Teil des Layouts und kein dazugeklebtes Drittanbieter-Widget — dann ist das ebenfalls eine Option für dich.
Wenn deine Besucher das Widget nicht vom Rest der Seite unterscheiden können, herzlichen Glückwunsch — deine Conversion bei KI-getriebenen Empfehlungen ist gerade gestiegen. Egal was der Assistent ihnen zeigt, er muss zuerst bemerkt und als glaubwürdiger Gesprächspartner anerkannt werden.
So startest du
Der Editor ist auf jedem Konto unter Themes → Theme auswählen → Code-Editor verfügbar. Der erste Schritt ist das Klonen eines der System-Themes — du erhältst sofort einen Namen und alle 15 Slots, vorbefüllt mit Systeminhalten. Danach geht es nur noch um Bearbeiten, Vorschau, Veröffentlichen.
Den vollständigen Schritt-für-Schritt-Leitfaden — mit allen Buttons, Screenshots und dem Export- und Importprozess — haben wir in einem separaten Leitfaden beschrieben: