Der Shopify Theme-Editor: Abschnitte, Blöcke und Vorlagen

Der Shopify Theme-Editor ist die Oberfläche, in der du das Aussehen deines Shops zusammensetzt. Das Modell dahinter besteht aus drei Ebenen: Eine Vorlage gehört zu einem Seitentyp, sie enthält Abschnitte, und Abschnitte enthalten Blöcke. Wer diese drei Begriffe auseinanderhält, findet jede Einstellung ohne Suchen.

Dieser Beitrag gehört zum großen Guide über den Shopify Admin. Die Screenshots stammen aus Horizon, dem aktuellen Standard-Theme.

Wo findest du Themes?

Unter dem Vertriebskanal Onlineshop. Dort liegen das aktive Theme, die Entwürfe und der Zugang zum Theme Store.

Oben steht das Live-Theme mit einer Vorschau in Desktop- und Mobilansicht. Darunter der Hinweis, dass der Shop noch passwortgeschützt ist, was bei Entwicklungsshops und im Aufbau normal ist. Es folgen die Theme-Entwürfe und darunter der Bereich zum Entdecken neuer Themes.

Das Arbeitsprinzip ist wichtig: Größere Änderungen macht man an einer Kopie, nicht am Live-Theme. Über das Dreipunktmenü duplizierst du das aktive Theme, arbeitest im Duplikat und veröffentlichst es erst nach der Prüfung. Das bisherige Live-Theme rutscht dann in die Entwürfe und bleibt als Rückfallebene erhalten.

Wie ist der Editor aufgebaut?

In vier Zonen: Werkzeugleiste links oben, Kontextauswahl in der Mitte, Vorschauoptionen rechts, Abschnittsliste links und Live-Vorschau in der Mitte.

1. Werkzeugleiste mit drei Panels: Abschnitte, Theme-Einstellungen und App-Einbettungen.
2. Theme-Auswahl mit dem Namen des bearbeiteten Themes und dem Hinweis, ob es aktiv ist.
3. Kontext und Vorlage. Links der Markt- und Sprachkontext, rechts die Vorlage, die gerade bearbeitet wird.
4. Vorschauoptionen: Sidekick, Inspektor, mobile Vorschau, Rückgängig und Wiederholen.
5. Speichern. Änderungen greifen erst nach dem Speichern, vorher sind sie nur in deiner Vorschau.
6. Abschnittsliste mit den drei Gruppen Header, Vorlage und Fußzeile.
7. Live-Vorschau, in der du Abschnitte direkt anklicken kannst.

Die Abschnittsliste zeigt immer drei Gruppen. Header und Fußzeile gelten auf allen Seiten, dazwischen liegt die Vorlage mit den Abschnitten, die nur für den aktuellen Seitentyp gelten. Wer eine Änderung am Kopfbereich sucht, findet sie oben, unabhängig davon, welche Vorlage geöffnet ist.

Wie funktionieren Abschnitte und Blöcke?

Ein Abschnitt ist ein waagerechter Streifen der Seite. Ein Block ist ein Baustein darin. Klickst du einen Abschnitt an, öffnet sich rechts daneben der Inspektor mit seinen Einstellungen.

Im Beispiel ist der Abschnitt „Vorgestellte Kollektion" ausgewählt. Der Inspektor zeigt oben die inhaltlichen Einstellungen, also welche Kollektion angezeigt wird, ob als Raster oder Karussell, wie viele Produkte und wie viele Spalten. Darunter folgen Layout-Einstellungen: Breite, Ausrichtung, Abstände, Hintergrundfarbe und Padding.

Diese Zweiteilung zieht sich durch alle Abschnitte: erst Inhalt, dann Darstellung. Mobile Werte stehen dabei oft direkt neben den Desktop-Werten, etwa bei den Spalten. Das ist praktisch, weil man nicht in eine separate Ansicht wechseln muss, um das Verhalten auf dem Smartphone zu setzen.

Über den Abschnitten und Blöcken stehen jeweils zwei Schaltflächen: Abschnitt hinzufügen und, innerhalb eines Abschnitts, Block hinzufügen. Am Zeilenende jedes Eintrags liegen Ausblenden und Entfernen. Das Ausblenden ist unterschätzt: Es nimmt einen Abschnitt aus dem Shop, ohne die Konfiguration zu verlieren. Für saisonale Banner ist das der bessere Weg als Löschen.

Ein ausgeblendeter Abschnitt ist im nächsten Jahr in zwei Sekunden wieder da. Ein gelöschter ist neu zu bauen.

Direkt in der Vorschau erscheint beim Auswählen zusätzlich eine kleine Leiste mit Duplizieren, Ausblenden und Löschen, dazu der Einstieg in Sidekick mit der Aufforderung, Änderungen zu beschreiben.

Was sind Vorlagen und warum sind sie wichtig?

Eine Vorlage ist der Bauplan eines Seitentyps. Der Editor bearbeitet immer genau eine davon, standardmäßig die Startseite.

Über die Auswahl in der oberen Leiste wechselst du zwischen den Seitentypen: Startseite, Produkte, Kollektionen, Kollektionsliste, Gutschein, Warenkorb, Checkout und Kundenkonten, Seiten, Blogs, Blog-Beiträge, Suche und Passwort. Bei Produkten und Kollektionen wählst du zusätzlich einen konkreten Datensatz aus, damit die Vorschau echte Inhalte zeigt.

Der wichtigste Punkt dabei: Änderungen an einer Vorlage gelten für alle Seiten dieses Typs. Wer auf der Produktseite von Espresso Bergamo einen Abschnitt hinzufügt, hat ihn auf allen Produktseiten. Das ist meistens gewollt. Wenn nicht, legst du über das Vorlagenmenü eine zweite Produktvorlage an und weist sie einzelnen Produkten im Feld Theme-Vorlage zu, wie im Beitrag zu Produkten beschrieben.

Der Punkt links daneben, im Screenshot mit „Shop-Standard" beschriftet, steuert Markt und Sprache der Vorschau. Wer mehrere Märkte bedient, prüft hier, wie eine Seite in der jeweiligen Region aussieht.

Was steht in den Theme-Einstellungen?

Alles, was global gilt: Farben, Schriften, Formen, Verhalten. Das Zahnradsymbol in der Werkzeugleiste öffnet das Panel.

In Horizon sind das unter anderem: Logo und Favicon, Farbpalette, Typografie, Seite, Animationen, Badges, Schaltflächen, Warenkorb, Drawers, Symbole, Eingabefelder, Popovers und modale Fenster, Preise, Produktkarten, Suche, Farbfelder, Variantenauswahlen, benutzerdefiniertes CSS und Theme-Stil.

Zwei Empfehlungen aus der Praxis. Erstens: Die Farbpalette ist der Hebel, mit dem ein Theme in zehn Minuten nach deiner Marke aussieht. Sie definiert Farbschemata, die einzelne Abschnitte dann auswählen, statt jede Farbe einzeln zu setzen. Wer stattdessen abschnittsweise Farben vergibt, hat später bei jeder Änderung dreißig Stellen anzufassen.

Zweitens: Benutzerdefiniertes CSS ist ein Notausgang, kein Werkzeug. Für eine Kleinigkeit in Ordnung, für alles Größere gehört die Änderung ins Theme selbst, sonst sammelt sich unsichtbarer Ballast, den beim nächsten Theme-Update niemand mehr zuordnen kann.

Die Schriftwahl an dieser Stelle ist übrigens direkt performancerelevant. Jede zusätzliche Schriftfamilie und jeder Schnitt kostet Ladezeit, und Ladezeit kostet Umsatz. Warum das messbar zusammenhängt, steht in unserem Beitrag zu den Core Web Vitals im E-Commerce.

Was machen App-Einbettungen?

Sie hängen Funktionen von Apps ins Theme, ohne dass jemand Code anfasst. Das dritte Panel der Werkzeugleiste listet sie auf.

Typische Kandidaten sind Chat-Fenster, Bewertungssterne, Cookie-Banner oder Wunschlisten. Jede Einbettung lässt sich einzeln ein- und ausschalten. Wenn nach der Deinstallation einer App noch etwas im Shop auftaucht, lohnt hier der Blick: Eine deaktivierte App kann eine aktive Einbettung hinterlassen.

Der Bereich ist außerdem eine gute Kontrollstelle. Jede aktive Einbettung lädt Code in deinen Shop. Wer zweimal im Jahr durchgeht und abschaltet, was niemand mehr braucht, hält den Shop schnell.

Wie prüfst du die mobile Ansicht?

Über das Smartphone-Symbol in den Vorschauoptionen. Die Vorschau schaltet auf ein schmales Fenster um, die Abschnittsliste bleibt.

Diese Prüfung gehört nach jeder Änderung dazu, nicht nur am Ende. Der Grund ist unbequem, aber eindeutig: Der Großteil des Shop-Traffics kommt vom Smartphone, und viele Abschnitte verhalten sich dort anders, etwa wenn ein vierspaltiges Raster auf eine Spalte zusammenfällt. Was auf dem Desktop luftig wirkt, wird mobil schnell zu einer endlosen Scrollstrecke.

Die mobile Vorschau ist allerdings kein Ersatz für einen Test auf einem echten Gerät. Touch-Ziele, Tastaturverhalten und Ladezeit im Mobilfunknetz zeigt sie nicht. Worauf es dabei ankommt, steht in unserem Beitrag zur mobilen Conversion-Optimierung.

Was der Editor nicht kann

Drei ehrliche Grenzen, damit niemand vergeblich sucht:

Freie Positionierung gibt es nicht. Abschnitte liegen untereinander, Blöcke darin. Wer ein Layout im Kopf hat, das sich nicht als Stapel von Streifen beschreiben lässt, braucht einen eigenen Abschnitt im Code.

Nicht jeder Abschnitt passt in jede Vorlage. Welche Abschnitte zur Auswahl stehen, bestimmt das Theme. Fehlt einer, hilft kein Suchen, sondern nur ein anderes Theme oder Entwicklung.

Der Checkout ist außen vor. Er lässt sich in den Einstellungen konfigurieren und, je nach Tarif, über Checkout-Erweiterungen ergänzen, aber nicht wie eine normale Seite im Editor bauen.

Der sichere Arbeitsablauf

1. Live-Theme duplizieren, im Duplikat arbeiten.
2. Änderungen an der richtigen Vorlage machen, nicht auf der Startseite für alles.
3. Nach jedem größeren Schritt speichern und mobil prüfen.
4. Vor dem Veröffentlichen die wichtigsten Seitentypen durchgehen: Startseite, Produkt, Kollektion, Warenkorb.
5. Veröffentlichen. Das bisherige Theme bleibt als Entwurf erhalten.

Wer so arbeitet, hat jederzeit einen funktionierenden Stand im Shop und kann eine misslungene Änderung in Sekunden zurücknehmen.

Wenn ein Theme an seine Grenzen stößt, weil eigene Abschnitte, ein anderer Aufbau oder echte Performance-Arbeit gefragt sind: Genau das ist unser Alltag. Schau dir unsere Shopify-Arbeit an oder schreib uns über das Kontaktformular, was dir am aktuellen Shop fehlt.