Design aus altem Shop übernehmen

Das Design-Token-Tool liest das CSS Ihres bisherigen Shops aus, erkennt Farben und Schriften, und ermöglicht Ihnen, diese mit einem Klick auf Ihr neues Theme anzuwenden. So behalten Ihre Stammkunden ein vertrautes Erscheinungsbild, ohne dass Sie Hex-Codes manuell nachschlagen müssen.

Design extrahieren

Navigieren Sie zu Admin → Migration → Design (/admin/migration/design).
Geben Sie die URL Ihres bisherigen Shops ein, z. B. https://mein-alter-shop.de.
Klicken Sie auf Design extrahieren.
Das System ruft die CSS-Dateien Ihrer Shop-Startseite ab und analysiert sie. Das dauert je nach Anzahl der Stylesheets einige Sekunden.
Erkannte Design-Tokens erscheinen als:
- Farbfelder — mit dem erkannten Hex-Wert
- Schriftbeispiele — mit Schriftname und Beispieltext

Alle Tokens sind standardmäßig ausgewählt.

Tokens auswählen und anwenden

Deaktivieren Sie Tokens, die Sie nicht übernehmen möchten — z. B. Farben, die nur für Werbebanner galten und im neuen Design keinen Platz haben.
Klicken Sie auf Auf mein Theme anwenden.
Eine Erfolgs-Meldung bestätigt, dass das Theme aktualisiert wurde.

Die Änderungen sind sofort in der Theme-Vorschau sichtbar. Ihre Storefront übernimmt die neuen Werte beim nächsten Seitenaufruf.

Was „Best Effort" bedeutet

Die Extraktion ist eine Annäherung, keine exakte Konvertierung. Warum:

CSS-Variablen-Benennung ist nicht standardisiert. WooCommerce, Shopify und individuelle Themes verwenden unterschiedliche Namen für ähnliche Farben. Das Tool erkennt häufige Muster, kann aber nicht garantieren, dass jede Farbrolle korrekt zugeordnet wird.

Erkannte Formate:

Format	Beispiel	Unterstützt
Hex	`#3a7bd5`	Ja
RGB	`rgb(58, 123, 213)`	Ja
HSL	`hsl(215, 65%, 53%)`	Ja
Bekannte CSS-Farbnamen	`dodgerblue`, `darkred`	Ja
Gradient-Farben	`linear-gradient(...)`	Teilweise
Programmatisch gesetzte Farben (JavaScript)	—	Nein

Grenzen der Extraktion:

Grenze	Wert
Externe CSS-Dateien pro Seite	max. 5
Timeout pro Abruf	10 Sekunden
Erlaubte URLs	Nur HTTPS, keine internen IPs

Wenn keine Tokens gefunden werden

Falls das Tool wenig oder gar nichts findet, gibt es mehrere Gründe:

Das Theme lädt CSS per JavaScript (z. B. CSS-in-JS) — solche Styles sind zur Ladezeit nicht im HTML-Quellcode vorhanden
Die Shop-URL ist nicht öffentlich erreichbar (passwortgeschützt, nur intern)
Das CSS enthält hauptsächlich programmatisch generierte Farben ohne feste Werte

In diesem Fall zeigt die Seite Links zu zwei Alternativen:

Manueller Theme-Editor: Geben Sie Farben und Schriften direkt ein unter Admin → Einstellungen → Theme.

KI-Theme-Assistent: Beschreiben Sie Ihr gewünschtes Design in natürlicher Sprache — der Assistent konfiguriert das Theme für Sie.

Theme nach der Extraktion feinabstimmen

Die extrahierten Tokens bilden einen guten Ausgangspunkt. Passen Sie das Ergebnis im Theme-Editor an:

Navigieren Sie zu Admin → Einstellungen → Theme-Editor.
Wechseln Sie zu den Tabs Farben, Typografie oder Layout.
Justieren Sie einzelne Werte nach Bedarf.

Tipp: Nutzen Sie den Vorschau-Modus im Theme-Editor, um Änderungen live zu sehen, bevor Sie speichern.

Häufige Fragen

Wird mein aktuelles Theme überschrieben? Nur die Tokens, die Sie ausgewählt haben, werden auf das Theme angewendet. Alle anderen Theme-Einstellungen bleiben unverändert. Sie können jederzeit im Theme-Editor nachjustieren oder eine gespeicherte Design-Vorlage laden.

Kann ich die Extraktion mehrfach ausführen? Ja. Jede neue Extraktion überschreibt die vorherige Vorschau. Erst wenn Sie auf „Auf mein Theme anwenden" klicken, werden Werte gespeichert.

Funktioniert das auch für Shopware oder andere Plattformen? Das Tool extrahiert CSS-Tokens von jeder öffentlich erreichbaren HTTPS-URL — unabhängig von der Plattform. Die Erkennungsqualität hängt davon ab, wie das jeweilige Theme seine Farben im CSS definiert.