Der Theme-Editor
Das Aussehen Ihres Shops legt das Theme fest. Im Theme-Editor gestalten Sie es visuell: Sie stellen Seiten aus Abschnitten und Blöcken zusammen, wählen Farben, Schriften und Layout und sehen jede Änderung sofort in der Vorschau – ohne Programmierkenntnisse.
Themes verwalten
Ein Klick auf Onlineshop öffnet die Seite Themes. Oben steht Ihr Live-Theme – das Theme, das Besucher sehen – mit Vorschau und den Schaltflächen Anpassen, Duplizieren und Exportieren. Darunter liegt die Theme-Bibliothek mit weiteren Themes.
- Duplizieren legt eine Kopie an. So probieren Sie größere Änderungen gefahrlos aus und schalten die Kopie erst live, wenn sie fertig ist.
- Veröffentlichen macht ein Theme aus der Bibliothek zum Live-Theme – es ersetzt das bisherige sofort für alle Besucher.
- Theme hinzufügen legt ein neues Theme mit den Standardeinstellungen an.
- Exportieren speichert ein Theme als JSON-Datei; über Importieren laden Sie eine solche Datei wieder hoch, etwa als Sicherung oder in einem anderen Shop.
Aufbau des Editors
Mit Anpassen öffnen Sie den Editor. Links sehen Sie die Struktur der Seite, in der Mitte die Live-Vorschau, rechts die Einstellungen des gewählten Elements.
- Kopfbereich und Fußbereich gelten für den ganzen Shop – etwa Ankündigungsleiste, Kopfzeile mit Menü, Logo, Suche, Sprach- und Währungsauswahl sowie die Fußzeile mit Menüs, Social-Media-Icons und Zahlungsarten-Symbolen.
- Dazwischen stehen die Abschnitte der gewählten Seite.
Oben wählen Sie zuerst den Seitentyp (Startseite, Produkt, Kategorie, Kategorienübersicht, Warenkorb, Seite, Blog, Blogbeitrag, Suche, 404) und dann die konkrete Seite, das Produkt oder die Kategorie. Bearbeitet wird automatisch die Vorlage, die diese Seite verwendet. Mit den Symbolen in der Mitte wechseln Sie zwischen Desktop-, Tablet- und Handy-Ansicht und zwischen hellem und dunklem Modus. Bei mehreren Shop-Sprachen wählen Sie dort auch die Sprache, in der Sie Texte bearbeiten.
Abschnitte und Blöcke
Über + Abschnitt hinzufügen wählen Sie aus den verfügbaren Abschnitten, zum Beispiel Bildbanner, Formatierter Text, Bild mit Text, Ausgewählte Kategorie, Kategorienliste, Mehrspaltig, FAQ / Aufklappbarer Inhalt, Newsletter, Kontaktformular, Blogbeiträge oder Eigenes HTML. Viele Abschnitte bestehen aus Blöcken (etwa Überschrift, Text, Button), die Sie mit + Block hinzufügen ergänzen.
Abschnitte verschieben Sie per Ziehen, Blöcke mit den Pfeilen. Über die Symbole blenden Sie Elemente aus, duplizieren oder entfernen sie. Sie können auch direkt in der Vorschau auf einen Abschnitt klicken, um ihn zu bearbeiten.
Die Produktseite besteht aus Modulen, die Sie hinzufügen, entfernen und anordnen: Beschreibung, Produktdetails, Bewertungen, Einklappbarer Inhalt (z. B. Pflegehinweise oder Größentabelle), Produktempfehlungen und Passt dazu. Plugins können eigene Blöcke mitbringen; sie erscheinen beim Hinzufügen unter Apps.
Für einzelne Abschnitte gibt es Eigenes CSS für diesen Abschnitt, für das ganze Theme den Punkt Eigenes CSS.
Theme-Einstellungen
Unter Theme-Einstellungen legen Sie fest, was für den ganzen Shop gilt:
| Gruppe | Beispiele |
|---|---|
| Farben | Farbschemata mit je einer hellen und einer dunklen Variante; ein Hinweis warnt bei zu geringem Kontrast |
| Hell-/Dunkelmodus | Standardmodus (System, Hell, Dunkel) und ob Kunden umschalten können |
| Typografie | Schriften und Größen für Überschriften und Fließtext |
| Layout | Seitenbreite, Abstände, Eckenradien, „Nach oben“-Button |
| Logo & Favicon | Logo, eigenes Logo für den Dunkelmodus, Logobreite, Favicon |
| Produktkarten | Bildverhältnis, Hersteller, Kurzbeschreibung, zweites Bild beim Überfahren |
| Warenkorb | Seitenleiste oder eigene Seite, Bestellnotiz |
| Social Media | Links zu Instagram, Facebook, TikTok und YouTube |
Speichern und Veröffentlichen
Änderungen werden laufend als Entwurf gesichert und erscheinen nur in der Vorschau. Erst Speichern übernimmt sie in den Shop; Verwerfen macht alle ungespeicherten Änderungen rückgängig. Mit Strg+Z und Strg+Umschalt+Z nehmen Sie einzelne Schritte zurück oder wiederholen sie. Bei einem Theme aus der Bibliothek schaltet Veröffentlichen es direkt live.
Einzelne Seiten visuell bearbeiten
In Produkten, Kategorien und Seiten öffnet Visuell bearbeiten den Editor mit genau dieser Seite. Sie sehen sie samt Kopf- und Fußbereich, bearbeiten aber nur ihre eigenen Abschnitte. Teilen sich mehrere Einträge eine Vorlage, zeigt der Editor das an; mit Eigene Vorlage gelten Ihre Änderungen nur für diese eine Seite.