Theme-Editor

Der Theme-Editor ist das zentrale Werkzeug zur Gestaltung Ihres Shops. Sie können Farben, Schriften, Layout und alle visuellen Elemente anpassen — ohne Programmierkenntnisse.

Theme-Editor öffnen

Melden Sie sich im Admin-Bereich an.
Navigieren Sie zu Einstellungen → Design → Theme-Editor.
Der Editor öffnet sich mit sieben Reitern für verschiedene Bereiche.

Reiter im Theme-Editor

Der Theme-Editor ist in folgende Bereiche unterteilt:

Reiter	Inhalt
Logo	Shop-Logo, Dark-Mode Logo und Favicon
Farben	Brand-Farben, Text-, Hintergrund- und Akzentfarben
Typografie	Schriften, Schriftgrößen, Custom Fonts hochladen
Layout	Abstände, Containerbreite, Button-Stil, Header- und Footer-Einstellungen
Marken	Anzeige von Produktmarken auf Produktkarten
Erweitert	Custom CSS, Scripts, Dark Mode
DESIGN.md	Import/Export und Design-System-Export

Logo

Logo hochladen

Ihr Logo wird im Shop-Header und auf Rechnungen angezeigt.

Klicken Sie im Reiter Logo auf Logo auswählen.
Laden Sie eine Datei im Format PNG, SVG oder JPG hoch.
Empfohlene Größe: mindestens 400 × 120 px mit transparentem Hintergrund (PNG oder SVG).
Klicken Sie auf Speichern.

Hinweis: SVG-Logos werden auf allen Bildschirmgrößen scharf dargestellt. Das ist ideal für professionelle Auftritte.

Dark-Mode Logo

Falls Sie Dark Mode aktivieren, können Sie ein separates Logo für den dunklen Modus hochladen — z. B. mit anderen Farben für bessere Lesbarkeit.

Favicon

Das Favicon ist das kleine Symbol im Browser-Tab.

Laden Sie eine quadratische PNG-Datei hoch (empfohlen: 512 × 512 px).
Das System erstellt automatisch alle benötigten Favicon-Größen.
Speichern Sie die Änderungen.

Hinweis: Browser-Caches halten Favicons oft 24 Stunden oder länger. Sie sehen Änderungen möglicherweise nicht sofort.

Farben

Brand-Farben anpassen

Wählen Sie die Hauptfarben Ihres Shops:

Farbe	Verwendung
Primärfarbe	Buttons, Links und Akzente
Sekundärfarbe	Hover-Zustände und Hervorhebungen
Akzentfarbe	Besondere Highlights
Erfolgsfarbe	Bestätigungen und positive Meldungen
Warn-/Fehlerfarbe	Warnungen und Fehlermeldungen
Info-Farbe	Informative Meldungen

So ändern Sie eine Farbe:

Klicken Sie im Reiter Farben auf das Farbfeld neben der Einstellung.
Der Farbwähler öffnet sich — wählen Sie eine Farbe oder geben Sie einen Hex-Code ein (z. B. #2563EB).
Eine Vorschau wird sofort angezeigt.
Klicken Sie auf Speichern, um die Änderungen zu übernehmen.

Hintergrund- und Textfarben

Passen Sie auch diese Farben an für optimale Lesbarkeit:

Farbe	Beschreibung
Hintergrundfarbe	Haupt-Seitenhintergrund
Oberflächenfarbe	Karten, Boxen, Container
Rahmenfarbe	Linien und Trennungen
Primäre Textfarbe	Normaler Text
Sekundäre Textfarbe	Sekundärer Text (z. B. Beschreibungen)
Gedimmte Textfarbe	Sehr gedimmter Text (z. B. Hinweise)

Sie können Header und Footer mit separaten Hintergrund- und Textfarben gestalten. Lassen Sie diese leer, um die Standard-Brand-Farben zu verwenden.

Typografie

Schriften auswählen

Im Reiter Typografie wählen Sie Schriften für Ihren Shop:

Body Font: Die Hauptschrift für Fließtext und UI-Elemente
Heading Font: Optional eine andere Schrift für Überschriften (leer = gleich wie Body Font)
Basisschriftgröße: 14px (Small), 16px (Base) oder 18px (Large)
Standard-Schriftgewicht: Light, Normal, Medium oder Bold

Tipp: Eine Kombination aus einer serifenlosen Schrift für Text und einer ausdrucksstarken Schrift für Überschriften erzeugt einen professionellen Eindruck.

Custom Fonts hochladen

Sie können eigene Schriftdateien hochladen:

Im Bereich Custom Fonts klicken Sie auf Font-Datei auswählen.
Geben Sie einen Familiennamen ein (z. B. MyBrandFont).
Wählen Sie Schriftgewicht (100 = Thin bis 900 = Black).
Wählen Sie den Stil (Normal oder Italic).
Laden Sie eine Datei im Format .woff2, .woff oder .ttf hoch.
Klicken Sie auf Speichern.

Die hochgeladene Schrift steht sofort in den Schrift-Auswahlfeldern zur Verfügung.

Typografie-Vorschau

Am unteren Ende des Reiters Typografie sehen Sie eine Live-Vorschau mit Beispieltexten in Ihren ausgewählten Schriften und Größen.

Layout

Abstände und Größen

Einstellung	Optionen	Effekt
Border Radius	0px, 2px, 6px, 8px, 12px, 16px	Rundung von Ecken
Spacing	Compact, Normal, Relaxed	Allgemeine Abstände
Container Width	6XL (1152px), 7XL (1280px), Full Width	Breite des Inhaltsbereichs

Button-Stil

Wählen Sie zwischen drei Button-Stilen:

Stil	Beschreibung
Square	Rechtwinklige Ecken
Rounded	Leicht gerundete Ecken
Pill	Stark gerundete Ecken

Header-Einstellungen

Passen Sie das obere Navigationsbereich an:

Einstellung	Effekt
Header Layout	Classic, Floating Pill oder Top Bar + Navigation
Sticky Header	Header bleibt beim Scrollen sichtbar
Header Border	Untere Trennlinie anzeigen/verbergen

Lesen Sie mehr über Header-Layouts in Design & Farben.

Animation-Einstellungen

Einstellung	Effekt
Animationen aktivieren	Smooth Transitions und Effekte (ein/aus)
Animation Speed	Slow, Normal oder Fast

Marken (Brand Display)

Wählen Sie, wie Produktmarken auf Produktkarten und Detailseiten angezeigt werden:

Nicht anzeigen: Marken verstecken
Nur Text: Markenname als Text anzeigen
Logo klein: Markenlogo in kleiner Größe
Logo groß: Markenlogo in großer Größe

Erweitert

Dieser Reiter enthält erweiterte Einstellungen für technisch versierte Benutzer.

Custom CSS

Fügen Sie eigenes CSS hinzu, um Standard-Stile zu überschreiben:

Klicken Sie im Reiter Erweitert unter Custom CSS in das Textfeld.
Geben Sie Ihre CSS-Regeln ein (z. B. .header { background: red; }).
Speichern Sie.

Warnung: Falsches CSS kann das Design Ihres Shops brechen. Testen Sie Änderungen immer in der Vorschau.

Head Scripts und Body Scripts

Head Scripts (z. B. Tracking, Fonts) werden im <head>-Bereich injiziert. Body Scripts (z. B. Analytics) werden am Ende des <body>-Tags injiziert.

Sicherheit: Diese Felder nur mit Code aus vertrauenswürdigen Quellen (Google Tag Manager, Analytics-Anbieter) füllen.

Dark Mode

Aktivieren Sie einen Dark Mode für Ihren Shop:

Schalten Sie Dark Mode aktivieren ein.
(Optional) Aktivieren Sie Dark Mode als Standard, um Dark Mode für neue Besucher zu setzen.
Besucher können die Einstellung später ändern.

DESIGN.md — Import & Export

Design exportieren

Sichern Sie Ihre Einstellungen oder teilen Sie sie mit einem KI-Assistenten:

Klicken Sie im Reiter DESIGN.md auf Theme als JSON exportieren.
Eine JSON-Datei mit allen Theme-Einstellungen wird heruntergeladen.
Sie können diese Datei sichern oder in einer KI (z. B. ChatGPT) einfügen.

Design importieren

Klicken Sie auf JSON importieren.
Wählen Sie eine JSON-Datei aus (z. B. von einer KI generiert).
Die Einstellungen werden in den Editor geladen.
Überprüfen Sie die Vorschau und klicken Sie auf Speichern.

Brand Atmosphere (für KI)

Geben Sie eine Beschreibung Ihrer Brand ein (z. B. "Artisan, warm, minimal"). Diese wird in der exportierten design.md eingebettet und hilft KI-Tools, Designs zu generieren, die zu Ihrer Marke passen.

Vorschau

Prüfen Sie Ihre Änderungen, bevor Kunden sie sehen:

Klicken Sie oben auf Vorschau.
Ein neues Fenster öffnet sich mit Ihrem Shop.
Hinweis: Unsgespeicherte Änderungen werden nicht in der Vorschau angezeigt. Speichern Sie zuerst.

Theme-Vorlagen (Templates)

Starten Sie mit einer vorgefertigten Theme statt bei Null:

Klicken Sie auf Templates.
Die Vorlagengalerie zeigt mehrere professionell gestaltete Themes.
Klicken Sie auf ein Theme zum Anwenden.
Bestätigen Sie den Dialog — Ihre aktuellen Einstellungen werden überschrieben.
Nach dem Anwenden können Sie das Theme wie gewohnt anpassen.

Häufige Probleme

Problem	Lösung
Änderungen werden nicht angezeigt	Klicken Sie auf Speichern und laden Sie die Seite neu (Strg+F5)
Logo wird unscharf	SVG verwenden oder Auflösung auf mind. 400 × 120 px erhöhen
Schrift wird nicht geladen	Prüfen Sie, ob Werbeblocker Google Fonts blockiert; Custom Font neu hochladen
CSS-Fehler brechen das Design	Entfernen Sie das Custom CSS und speichern Sie
Favicon erscheint nicht	Browser-Cache leeren; Änderung kann bis zu 24 Stunden dauern
Custom Font wird nicht angewendet	Stellen Sie sicher, dass die Datei im Format `.woff2`, `.woff` oder `.ttf` ist

Nächste Schritte

Schriften — Detaillierte Anleitung zu Schriftauswahl und Custom Fonts
Design & Farben — Farbberatung und Design-Tipps
Section-Editor — Seitenlayouts mit vorgefertigten Bausteinen gestalten