Arbeitsweise im Theme-Editor: Entwurf, Vorschau, Veröffentlichung

Die größte Sorge beim Ändern des Shop-Designs ist, dass Besucher eine halbfertige Seite sehen. Der SEPETYA-Theme-Editor arbeitet deshalb mit einem Entwurf: Jede Änderung wird im Entwurf gespeichert, und der Shop bleibt unverändert, bis Sie auf „Veröffentlichen“ klicken. In diesem Beitrag erklären wir die Arbeitsweise des Editors, die Logik von Abschnitten und Blöcken, was passiert, wenn zwei Personen gleichzeitig arbeiten, und wie Sie jederzeit zurückkehren können.

Die Theme-Wahl ist ein eigenes Thema; wie Sie das passende Layout für Ihre Branche wählen, erklären wir im Beitrag zur Theme-Wahl.

Die drei Bereiche des Editors

Der Editor besteht aus drei Bereichen, die auf kleinen Bildschirmen zu Tabs werden:

• Seitenstruktur (links): die Abschnitte der gewählten Seitenvorlage und die Blöcke darunter. Klicken Sie auf ein Element, öffnen sich rechts seine Einstellungen.
• Vorschau (Mitte): die Live-Ansicht des Entwurfs. Sie können zwischen Desktop, Tablet und Smartphone wechseln und mit „In neuem Tab ansehen“ auch im Vollbild schauen.
• Einstellungen (rechts): die Einstellungen des gewählten Abschnitts oder Blocks. Ist nichts ausgewählt, können Sie die Theme-Einstellungen (Farbe, Schrift, allgemeines Erscheinungsbild) öffnen.

Oben gibt es zwei Auswahlfelder: die Seitenvorlage (Startseite, Kategorie, Produkt, Warenkorb, Blog, Blogbeitrag, Suche, Kontoseiten usw.) und die Inhaltssprache. Für jede Vorlage richten Sie ein eigenes Layout ein; eine Änderung an der Startseite wirkt sich also nicht auf die Produktseite aus. In einem mehrsprachigen Shop schreiben Sie Textfelder pro Sprache, das Layout ist dagegen für alle Sprachen gemeinsam.

Abschnitte und Blöcke

Seiten werden aus Abschnitten aufgebaut; manche Abschnitte enthalten sortierbare Blöcke (etwa die Karten in einem Abschnitt „Highlights“). Mit „Abschnitt hinzufügen“ öffnet sich eine Galerie der Abschnitte, die dieser Vorlage hinzugefügt werden können; in der Galerie können Sie suchen und sehen, wie viele Einstellungen und welche Blöcke jeder Abschnitt hat. Der gewählte Abschnitt wird mit seinen Standardeinstellungen eingefügt.

• Reihenfolge: Durch Verschieben der Abschnitte nach oben und unten gestalten Sie den Ablauf der Seite.
• Duplizieren: Einen Abschnitt zu duplizieren und seinen Inhalt zu ändern, geht schneller, als ihn neu aufzubauen.
• Ausblenden: Statt einen Abschnitt zu löschen, können Sie ihn ausblenden; seine Einstellungen bleiben erhalten, und Sie blenden ihn bei Bedarf wieder ein. Ideal für Aktionsabschnitte.
• Feste Abschnitte: Abschnitte, die den Hauptinhalt der Seite bilden (der Produktbereich auf der Produktseite, die Blogliste usw.), können weder entfernt noch ausgeblendet werden; nur ihre Einstellungen ändern sich.
• Grenzen: Die Zahl der Abschnitte pro Vorlage und der Blöcke pro Abschnitt ist begrenzt; ist die Grenze erreicht, sagt der Editor das. Eine Seite mit wenigen, wirksamen Abschnitten statt einer Fülle von Abschnitten ist gut für Kundschaft und Geschwindigkeit.

Einstellungsfelder werden validiert: Farben müssen im Format #RRGGBB vorliegen, Links gültig sein, Listenfelder eine bestimmte Anzahl von Einträgen nicht überschreiten, Datumsfelder werden in der Zeitzone des Shops eingegeben. Bei einem ungültigen Wert meldet der Editor „Einige Einstellungen sind ungültig“ und zeigt, welches Feld betroffen ist.

Texte: Abschnittseinstellung oder Shop-Text?

Die Texte im Shop stammen aus zwei Quellen, und das zu wissen, spart viel Zeit. Überschrift, Beschreibung und Schaltflächenbeschriftung eines Abschnitts stehen in dessen Einstellungen; sie werden in der im Editor gewählten Inhaltssprache geschrieben, und wechseln Sie die Sprache, schreiben Sie den Text dieser Sprache gesondert. Oberflächentexte des Shops selbst wie „In den Warenkorb“, „Nicht vorrätig“ oder „Bestellung abschließen“ sind dagegen keine Abschnittseinstellungen; sie werden pro Sprache auf der Seite Online-Shop › Lokalisierung › Shop-Texte geändert. Finden Sie die Beschriftung einer Schaltfläche also nicht im Editor, handelt es sich um einen Oberflächentext. Ebenso gehören Produktname, Kategoriename und Seiteninhalte nicht zum Theme, sondern zu Katalog- und Inhaltsdatensätzen; der Editor zeigt sie nur an.

Farbe, Schrift und fertige Stile

In den Theme-Einstellungen können Sie einen der fertigen Stile des Themes wählen und danach Farben (Hintergrund, Oberfläche, Akzent, Primärfarbe, Textfarben), Google-Schriften, Schriftstärke der Überschriften und Schreibweise ändern. Die Option „auf Standard zurücksetzen“ neben jeder Einstellung setzt nur dieses Feld zurück. Logo und Website-Symbol gehören nicht zum Theme, sondern zum Shop; sie werden unter Einstellungen › Allgemein hochgeladen und bleiben in allen Themes gleich.

Was nicht im Editor steht: Menü, Seiten, Ankündigungsleiste

Der Editor gestaltet das Erscheinungsbild des Themes; die Inhalte des Shops werden auf eigenen Seiten verwaltet. Am meisten Zeit kostet in den ersten Tagen, eine Einstellung an der falschen Stelle zu suchen:

Was möchten Sie ändern?	Wo?
Abschnitte, Farben, Schriften	Online-Shop › Meine Themes › Theme-Editor
Links in Hauptmenü und Footer	Online-Shop › Menüs
Seiten wie Über uns oder Kontakt	Online-Shop › Seiten
Blogbeiträge und -kategorien	Online-Shop › Blog
Ankündigungsleiste, Social-Media-Angaben, Cookie-Einwilligung, eigener Code	Online-Shop › Shop-Einstellungen
Logo, Website-Symbol (Favicon), Shop-Passwort	Einstellungen › Allgemein
Sprache, Währung und Shop-Texte	Online-Shop › Lokalisierung

Der praktische Nutzen dieser Trennung: Um einen neuen Link ins Menü aufzunehmen, müssen Sie das Theme nicht veröffentlichen; Menüänderungen erscheinen direkt im Shop. Änderungen im Theme-Editor warten dagegen, bis sie veröffentlicht werden.

Entwurf, Speichern und Veröffentlichen

Eine Speichern-Schaltfläche müssen Sie im Editor nicht suchen: Änderungen werden im Entwurf gespeichert, und die Statusanzeige oben sagt Ihnen, wo Sie stehen.

Anzeige	Bedeutung
Ungespeicherte Änderung	Die letzte Bearbeitung wurde noch nicht in den Entwurf geschrieben
Wird gespeichert…	Der Entwurf wird gespeichert
Entwurf gespeichert	Der Entwurf ist aktuell; der Shop zeigt noch das alte Erscheinungsbild
Identisch mit der veröffentlichten Version	Zwischen Entwurf und veröffentlichtem Erscheinungsbild gibt es keinen Unterschied
Speichern fehlgeschlagen	Verbindungs- oder Validierungsproblem; prüfen Sie die letzte Änderung

Mit „Rückgängig“ und „Wiederholen“ bewegen Sie sich zwischen den Schritten. Wenn Sie bereit sind und auf „Veröffentlichen“ klicken, verlangt der Editor eine Bestätigung, und alle Änderungen im Entwurf werden für Besucher gleichzeitig sichtbar. Hat ein Theme in der Bibliothek unveröffentlichte Änderungen, wird es in der Theme-Liste als „Unveröffentlichte Änderungen“ markiert, sodass halbfertige Arbeit nicht übersehen wird.

Wenn zwei Personen gleichzeitig arbeiten

Wird dasselbe Theme, während Sie es bearbeiten, in einer anderen Sitzung oder von einer anderen Person aus dem Team gespeichert, warnt der Editor: „Das Theme wurde an anderer Stelle geändert“. Sie haben zwei Möglichkeiten: den aktuellen Stand vom Server laden (die ungespeicherten Änderungen hier gehen verloren) oder Ihre eigenen Änderungen darüberschreiben. Wenn Sie mit mehreren Personen arbeiten, hilft eine einfache Regel: Bearbeiten Sie nicht zu zweit gleichzeitig dieselbe Vorlage; arbeitet eine Person an der Startseite, arbeitet die andere an der Produktseite.

Wer bearbeiten darf, legen die Berechtigungen des Teams fest: Mit „Themes ansehen“ darf man schauen, mit „Themes bearbeiten und veröffentlichen“ ändern und veröffentlichen. Haben Sie eine Agentur oder eine Designerin, ist es am saubersten, statt Eigentümerrechten ein Teamkonto mit genau dieser Berechtigung anzulegen; die vorgenommenen Änderungen erscheinen dann mit Namen im Prüfprotokoll.

Ausprobieren, zurückkehren, übertragen

Der Editor ist dafür gebaut, dass Sie mutig ausprobieren; bei jedem Schritt gibt es einen Weg zurück:

• In der Bibliothek duplizieren: Duplizieren Sie dasselbe Theme und geben Sie im Feld „Name in der Bibliothek“ einen Namen wie „Test Startseite“ ein. Sie bearbeiten es und sehen es in der Vorschau, ohne es zu veröffentlichen; gefällt es Ihnen, veröffentlichen Sie es. Dieser Name ist nur im Panel sichtbar.
• Auf Standard zurücksetzen: Sie können nur diese Vorlage, nur die Theme-Einstellungen oder alles auf den Standard zurücksetzen. Die Änderungen im Entwurf werden gelöscht; das veröffentlichte Erscheinungsbild ändert sich erst, wenn Sie erneut veröffentlichen.
• Theme-Datei: Einstellungen und Vorlagen des Themes können Sie als JSON exportieren. Die Datei fügen Sie später entweder als neues Theme zur Bibliothek hinzu oder importieren sie in den Entwurf eines vorhandenen Themes; der Import in den Entwurf wirkt sich nicht auf den Shop aus, sondern wartet bis zur Veröffentlichung. Die Datei muss aus demselben Theme erzeugt worden sein und darf höchstens 1 MB groß sein.

Diese drei Möglichkeiten erübrigen die Frage „Was ist, wenn ich etwas ausprobiere und es mir nicht gefällt?“: Der Versuch bleibt in der Bibliothek, die Entscheidung über die Veröffentlichung bei Ihnen.

Drei letzte Prüfungen vor dem Veröffentlichen

1. Smartphone: Stellen Sie die Vorschau auf Mobil und gehen Sie Startseite, Kategorie, Produktseite und Warenkorb durch. Einzelheiten finden Sie im Beitrag zur mobilen Produktseite.
2. Oberer Bereich: Prüfen Sie, was auf dem ersten Bildschirm der Seite zu sehen ist; wenn Sie einen Slider nutzen, gehen Sie die Regeln im Beitrag zum Startseiten-Slider durch.
3. Keine leeren Abschnitte: Blenden Sie Abschnitte aus, die Sie nicht gefüllt haben. Ein halbfertiger Abschnitt ist schlechter als gar keiner.

Checkliste für den Editor

• Vor Beginn der Bearbeitung wurden die richtige Seitenvorlage und Inhaltssprache gewählt.
• Die Änderungen liegen im Entwurf; die Statusanzeige zeigt „Entwurf gespeichert“.
• Nicht genutzte Abschnitte wurden ausgeblendet statt gelöscht.
• Es gibt keine Warnungen zu ungültigen Einstellungen mehr (Farbe, Link, Listenfelder).
• Die Vorschau wurde auf Desktop, Tablet und Smartphone durchgesehen.
• Für größere Versuche wurde das Theme in der Bibliothek dupliziert und benannt.
• Vor dem Veröffentlichen wurden die Vorlagen für Startseite, Kategorie, Produkt, Warenkorb und Blog geprüft.
• Arbeiten mehrere Personen, ist klar, wer an welcher Vorlage arbeitet.
• Nach der Veröffentlichung wurde der Shop in einem privaten Fenster mit den Augen eines Besuchers angesehen.
• Bei Bedarf wurde die Theme-Datei exportiert und als Sicherung aufbewahrt.

Um den Editor mit Ihren eigenen Produkten auszuprobieren, starten Sie kostenlos; wie Theme-Updates ankommen, erklären wir im Beitrag zu Updates.