Zum Inhalt springen
noel.marketing

Shopify

Shopify Online Store 2.0 im Detail

Noel

Geschrieben von Noel
Veröffentlicht:
24 Min. Lesezeit

Themen mit KI-Unterstützung recherchiert; von Noel vor der Veröffentlichung geprüft und überarbeitet.

Händler bearbeitet Shopify-Themenabschnitte und -blöcke im Theme-Editor

Thema vertiefen

Weitere Shopify-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.

Shopify Online Store 2.0 ist die Themenarchitektur, die Händlern mehr Kontrolle über die Seitenstruktur durch Abschnitte, Blöcke, JSON-Vorlagen und App-Blöcke gibt. Dies ist wichtig, da es einen Shop von starren, codeintensiven Seitenbearbeitungen hin zu einem modularen Setup bewegt, das Händler im Theme-Editor verwalten können.

Für Händler bedeutet das in der Regel schnellere Inhaltsaktualisierungen und weniger Anfragen an einen Entwickler für jede kleine Layoutänderung. Für Entwickler bedeutet es, Themen und Themenerweiterungen mit klareren Grenzen zwischen Struktur, Inhalt und app-gesteuerten Funktionen zu erstellen.

Wichtigste Erkenntnisse

  • Online Store 2.0 dreht sich um eine modulare Themenstruktur, nicht nur um ein visuelles Update.
  • Abschnitte und Blöcke geben Händlern mehr Kontrolle, aber nur wenn das Thema dafür ausgelegt ist.
  • JSON-Vorlagen machen Seitenlayouts flexibler als statische Liquid-Vorlagen.
  • App-Blöcke und Metafelder sind am nützlichsten, wenn sie echte Merchandising- oder Konversionsbedürfnisse unterstützen.
  • Flexibilität ohne klare Struktur führt oft zu Unordnung, nicht zu besserer Bearbeitung.

Was ist das?

Shopify Online Store 2.0 ist das Themenframework, das es Geschäften ermöglicht, Seiten aus wiederverwendbaren Abschnitten und Blöcken zu erstellen, anstatt sich nur auf feste Liquid-Vorlagen zu verlassen. Der praktische Unterschied besteht darin, dass Händler oft Inhalte im Theme-Editor hinzufügen, entfernen und anordnen können, ohne den Code zu berühren, solange das Thema so konzipiert ist, dass es diese Flexibilität unterstützt.

Ein einfaches Beispiel ist eine Produktseite. In einem älteren, starren Setup könnte das Seitenlayout größtenteils in der Vorlage gesperrt sein. In einem Online Store 2.0 Thema kann die Produktseite aus Abschnitten wie Produktinformationen, Medien, vorgestellten Produkten und Vertrauensinhalten zusammengesetzt werden, mit Blöcken innerhalb dieser Abschnitte für Text, Schaltflächen, Icons oder app-gesteuerte Elemente.

Der wichtige Punkt ist, dass dies nicht nur ein Designtrend ist. Es verändert, wie die Themenarbeit organisiert ist. Statt nur in Bezug auf eine große Vorlagendatei zu denken, denkt man in modularen Teilen, die wiederverwendet, konfiguriert und erweitert werden können. Deshalb ist Online Store 2.0 sowohl für Händler, die eine einfachere Bearbeitung wollen, als auch für Entwickler, die eine sauberere Themenarchitektur wünschen, relevant.

Es ist auch hilfreich, Online Store 2.0 als ein Kontrollsystem zu betrachten. Der Themenautor entscheidet, welche Teile des Frontends bearbeitet werden können, welche Einstellungen angezeigt werden sollen und welche Layoutregeln fest bleiben sollten. Dieses Gleichgewicht ist es, was ein Thema mächtig und nicht chaotisch erscheinen lässt. Ein gut gestaltetes Thema gibt Händlern genügend Freiheit, um Kampagnen, Produktgeschichten und Seitenaktualisierungen zu verwalten, während es gleichzeitig die Kernstruktur schützt, die den Shop benutzbar und konsistent hält.

In der Praxis bedeutet dies, dass das Thema nicht mehr nur eine visuelle Hülle ist. Es wird zu einem Inhaltsbetriebssystem für das Frontend. Der Händler kann routinemäßige Änderungen im Editor vornehmen, der Entwickler kann Schutzmaßnahmen im Code definieren, und der Shop kann sich entwickeln, ohne jede Seite von Grund auf neu zu erstellen. Das ist besonders nützlich für Teams, die häufig neue Landing Pages veröffentlichen, häufige Aktionen durchführen oder die Produktseiten an sich ändernde Bestände und Botschaften anpassen müssen.

Der beste Weg, das Framework zu verstehen, ist, es von der Idee “mehr Optionen” zu trennen. Online Store 2.0 ist nicht wertvoll, weil es jede mögliche Einstellung offenlegt. Es ist wertvoll, weil es dem Themenautor ermöglicht, zu entscheiden, wo Flexibilität sinnvoll ist. Ein Homepage-Held muss möglicherweise stark bearbeitbar sein. Ein rechtlicher Hinweis, ein Versandversprechen oder ein eng gestalteter Konversionsbereich benötigen möglicherweise mehr Zurückhaltung. Dieses Urteil verwandelt das Framework in ein nützliches Merchandising-System, anstatt in einen Haufen von Umschaltern.

Warum es wichtig ist

Der geschäftliche Wert von Shopify Online Store 2.0 liegt in der Geschwindigkeit und Kontrolle. Händler können Inhalte unabhängiger aktualisieren, was die Verzögerung zwischen einer Marketingidee und einer live geschalteten Änderung im Frontend reduziert. Das ist wichtig für Produkteinführungen, Aktionen, saisonales Merchandising und Produktbildung, bei denen das Warten auf einen Entwickler die Ausführung verlangsamen kann.

Es hilft auch, die Frontend-Darstellung konsistenter zu halten. Wenn Inhalte in Abschnitte und Blöcke organisiert sind, kann das Team Muster über Seiten hinweg wiederverwenden, anstatt für jede neue Kampagne Einzellayouts zu erstellen. Das macht den Shop in der Regel einfacher zu pflegen, während der Katalog wächst oder die Merchandising-Strategie komplexer wird.

Auf technischer Seite unterstützt Online Store 2.0 eine strukturiertere Themenarchitektur. JSON-Vorlagen und Abschnittsgruppen erleichtern es, festzulegen, welche Teile einer Seite flexibel sind und welche stabil bleiben sollten. Diese Unterscheidung ist wichtig, da nicht jeder Teil eines Shops frei bearbeitbar sein sollte. Ein vertrauenswürdiges Element, das sich in der Nähe des Checkouts befindet, benötigt beispielsweise eine engere Kontrolle als ein Werbebanner.

Für Händler ist die entscheidende Entscheidung nicht, ob Flexibilität gut ist. Es ist, wo die Flexibilität hingehört. Ein Homepage-Held, eine Einführungsseite für Sammlungen oder ein Inhaltsbereich auf einer Produktseite profitieren oft davon. Ein Kernlayoutmuster, das über den gesamten Shop hinweg konsistent bleiben muss, möglicherweise nicht.

Es gibt auch einen betrieblichen Vorteil, den Teams oft unterschätzen: Online Store 2.0 kann die Anzahl kleiner, wiederholter Anfragen reduzieren, die sowohl das Marketing- als auch das Entwicklungsarbeiten unterbrechen. Wenn ein Inhaltsteam einen Abschnitt austauschen, ein metafelddatenbasiertes Produktdetail aktualisieren oder einen App-Block einfügen kann, ohne ein Ticket zu eröffnen, kann der Shop schneller arbeiten, ohne von einer Person abhängig zu werden, die den Code kennt. Das beseitigt nicht die Arbeit der Entwickler; es verlagert den Aufwand der Entwickler auf eine bessere Architektur, bessere Standards und nützlichere Schutzmaßnahmen.

Der technische Einfluss ist ebenso wichtig für die langfristige Wartbarkeit. Ein Thema, das um Abschnitte und Blöcke herum gebaut ist, ist leichter zu überprüfen, da die Struktur explizit ist. Entwickler können sehen, welcher Inhalt wiederverwendbar ist, welche Felder für Händler sichtbar sind und welche Teile der Seite vom Thema kontrolliert werden. Diese Klarheit hilft, wenn ein Shop ein Redesign, eine Leistungsüberprüfung oder eine App-Migration benötigt. Statt eine große Vorlage zu entwirren, kann das Team einzelne Komponenten verbessern, ohne die gesamte Seite zu brechen.

Ein zweiter Grund, warum es wichtig ist, ist die Governance. Wenn Geschäfte wachsen, besteht das Risiko nicht nur darin, dass Seiten schwerer zu bearbeiten werden. Es ist auch, dass verschiedene Personen anfangen, sie auf unterschiedliche Weise zu bearbeiten. Eine Kampagnenseite wird mit benutzerdefiniertem Code erstellt, eine andere mit einem Seiten-Builder, eine andere mit einem Themenabschnitt, und das Ergebnis ist ein Frontend, das schwer zu unterstützen ist. Online Store 2.0 gibt Teams eine gemeinsame Struktur, um zu entscheiden, was ins Thema gehört, was in strukturierte Daten gehört und was in eine App gehört. Dieses gemeinsame Modell ist oft der Unterschied zwischen einem Frontend, das skalierbar ist, und einem, das langsam fragmentiert wird.

Wie es funktioniert

Online Store 2.0 funktioniert, indem es die Seitenstruktur in Vorlagen, Abschnitte und Blöcke trennt. Die Vorlage definiert die Seite, der Abschnitt definiert einen größeren Inhaltsbereich, und der Block definiert ein kleineres konfigurierbares Stück innerhalb dieses Bereichs. Diese Hierarchie macht das System modular.

JSON-Vorlagen und Abschnittsgruppen

In Online Store 2.0 verwenden viele Seiten JSON-Vorlagen anstelle von statischen Liquid-Vorlagen. Das bedeutet, dass das Seitenlayout als strukturierte Daten dargestellt werden kann, die Shopify mitteilen, welche Abschnitte gerendert werden sollen und in welcher Reihenfolge. Abschnittsgruppen können auch helfen, wiederholte Bereiche einer Seite zu organisieren, wie Kopfzeilen oder Fußzeilen, damit das Thema die Layout-Logik konsistenter halten kann.

Die praktische Auswirkung ist, dass ein Händler oft den Seiteninhalt im Editor neu anordnen kann, ohne den zugrunde liegenden Code zu ändern. Aber diese Flexibilität existiert nur dort, wo der Themenautor sie absichtlich offenbart hat. Wenn ein Thema statische Abschnitte in einer Liquid-Vorlage oder einem Layout verwendet, können diese Teile nicht einfach auf die gleiche Weise hinzugefügt oder entfernt werden.

Abschnitte und Blöcke

Abschnitte sind die größeren Bausteine der Seite. Sie sind nützlich, wenn Inhalte eigene Einstellungen, Layoutregeln oder Händlerkontrollen benötigen. Blöcke sind kleinere Elemente innerhalb eines Abschnitts und sind am besten, wenn ein Abschnitt mehrere konfigurierbare Teile benötigt, die dennoch zusammengehören.

Ein Abschnitt für Produktinformationen könnte beispielsweise Blöcke für Titel, Preis, Beschreibung, Vertrauensabzeichen und einen Call-to-Action enthalten. Der Abschnitt steuert das gesamte Layout, während die Blöcke dem Händler erlauben, den Inhalt innerhalb dieses Layouts zu gestalten. Dies ist in der Regel besser, als für jedes winzige Element separate Abschnitte zu erstellen, da es den Editor sauberer hält und das Thema leichter verständlich macht.

App-Blöcke und Metafelder

App-Blöcke erweitern das Thema mit von Apps bereitgestellten Inhalten, die in unterstützte Abschnitte eingefügt werden können. Dies ist besonders nützlich, wenn eine App ein Konvertierungstool, ein Vertrauenselement oder ein Inhaltsmodul hinzufügt, das natürlich auf einer Produkt- oder Warenkorbseite gehört. Anstatt die App-Ausgabe fest in das Thema zu integrieren, ermöglichen App-Blöcke dem Händler, diese Funktionalität dort zu platzieren, wo sie sinnvoll ist.

Metafelder sind die strukturierte Datenschicht, die oft dieses Setup unterstützt. Sie ermöglichen es Händlern, wiederverwendbare Informationen außerhalb des Themencodes zu speichern und dann diese Daten in Abschnitten oder Blöcken anzuzeigen. In der Praxis ist dies, wie Geschäfte produktspezifische Details, Seiteninhalte oder andere strukturierte Felder organisiert halten, ohne alles in benutzerdefinierten Code zu stopfen.

Eine nützliche Möglichkeit, zwischen einem Abschnitt, einem Block und einem Metafeld zu entscheiden, besteht darin, zu fragen, was sich am häufigsten ändert. Wenn der gesamte Inhaltsbereich sich auf der Seite bewegen kann, ist es in der Regel ein Abschnitt. Wenn der Inhalt innerhalb eines größeren Bereichs gehört, aber Variation benötigt, ist es in der Regel ein Block. Wenn der Inhalt Daten ist, die über Produkte oder Seiten hinweg wiederverwendet werden sollten, ist es oft ein Metafeld. Dieser Entscheidungsprozess hält das Thema leichter skalierbar, da jede Schicht eine klare Aufgabe hat.

Der Mechanismus funktioniert am besten, wenn jede Schicht einen engen Zweck hat. Vorlagen entscheiden über den Seitentyp, Abschnitte entscheiden über die wichtigsten Inhaltszonen, Blöcke entscheiden über die editierbaren Teile innerhalb dieser Zonen, und Metafelder liefern strukturierte Daten. Wenn Teams diese Verantwortlichkeiten verwischen, wird das Thema schwieriger zu warten. Wenn sie sie klar halten, wird der Shop leichter zu erweitern, ohne die gleiche Logik an mehreren Stellen neu zu schreiben.

Es hilft auch, darüber nachzudenken, wie die Editor-Erfahrung mit dem Frontend korreliert. Ein Händler erlebt das Thema nicht als Code; er erlebt es als eine Reihe von Entscheidungen. Wenn die Entscheidungen zu breit sind, wird die Seite inkonsistent. Wenn die Entscheidungen zu eng sind, fühlt sich das Thema einschränkend an. Der Mechanismus funktioniert gut, wenn der Editor gerade genug Kontrolle bietet, um echte Geschäftsaufgaben zu unterstützen, wie das Ändern eines Helden, das Hinzufügen einer Vergleichstabelle oder das Einfügen eines App-Blocks, während der zugrunde liegende Code das Layout stabil hält.

Anwendungsfälle

Der häufigste Anwendungsfall für Shopify Online Store 2.0 ist ein Händler, der die Inhalte des Frontends steuern möchte, ohne auf Codeänderungen warten zu müssen. Ein Marketingteam möchte möglicherweise Homepage-Abschnitte für eine Kampagne austauschen, einen neuen Inhaltsblock zu einer Produktseite hinzufügen oder eine andere Vertrauensbotschaft auf einer Kategorieseite testen. Mit einem gut gebauten Online Store 2.0 Thema können diese Änderungen oft im Editor erfolgen.

Ein weiterer starker Anwendungsfall ist die Produkteinführung. Geschäfte, die technische Produkte, höherpreisige Artikel oder visuell orientierte Produkte verkaufen, benötigen oft mehr als ein einfaches Layout mit Titel, Preis und Kauf-Button. Sie möchten möglicherweise Abschnitte für Vergleichspunkte, FAQs, Inhaltsstoffe, Größen oder Vorher-Nachher-Visuals. Online Store 2.0 macht diese Art von Inhaltsarchitektur besser handhabbar, da die Seite aus wiederverwendbaren Abschnitten und nicht aus einer starren Vorlage aufgebaut werden kann.

Ein dritter Anwendungsfall ist das app-gesteuerte Merchandising. Wenn ein Shop Apps für Bundles, Post-Purchase-Angebote, Umfragen oder visuelle Beweise verwendet, geben App-Blöcke diesen Tools einen Platz im Thema, ohne eine benutzerdefinierte, fest codierte Integration zu erzwingen. Das ist nützlich, wenn die App in einem bestimmten Abschnitt des Shops erscheinen soll und der Händler die Platzierung im Editor steuern muss.

Die beste Eignung hat in der Regel ein Shop, der fortlaufende Inhaltsänderungen erwartet. Wenn das Frontend für lange Zeit nahezu identisch bleibt, ist der Wert geringer. Wenn das Team Merchandising, Landing Pages und Produktgeschichten iterieren muss, wird die Architektur viel wertvoller.

Es gibt auch eine nützliche Unterscheidung zwischen inhaltslastigen Shops und kataloglastigen Shops. Inhaltsschwere Shops profitieren in der Regel von mehr Abschnitten, da sie Erzählungen, Bildung und Kampagnenflexibilität benötigen. Katalogschwere Shops profitieren möglicherweise mehr von Blöcken und Metafeldern, da sie wiederholbare Produktdaten und konsistente Layouts über viele SKUs hinweg benötigen. Beide können Online Store 2.0 gut nutzen, aber der Implementierungsschwerpunkt ist unterschiedlich.

Ein viertes Szenario ist die Lokalisierung oder regionale Merchandising. Wenn ein Shop unterschiedliche Botschaften, Abzeichen oder unterstützende Inhalte für verschiedene Märkte benötigt, können Abschnitte und Metafelder helfen, die Struktur konsistent zu halten, während der Inhalt variieren kann. Das reduziert die Versuchung, ganze Vorlagen für jeden Markt zu klonen. Stattdessen kann das Team ein Muster beibehalten und die Daten oder Abschnittsinhalte austauschen, die sich ändern.

Ein fünfter Anwendungsfall ist die Inhaltsgovernance für wachsende Teams. Wenn mehrere Personen das Frontend berühren, gibt Online Store 2.0 dem Team ein gemeinsames Bearbeitungsmodell. Das Branding-Team kann Kampagnenabschnitte besitzen, das E-Commerce-Team kann strukturierte Produktdaten besitzen, und Entwickler können die wiederverwendbare Abschnittsarchitektur besitzen. Diese Trennung verringert die Wahrscheinlichkeit, dass jedes Update zu einer benutzerdefinierten Ausnahme wird.

Wie man es implementiert oder anwendet

Der erste Schritt zur Implementierung besteht darin, zu entscheiden, welche Teile des Shops flexibel sein sollten und welche kontrolliert bleiben sollten. Nicht jedes Seitenelement muss bearbeitbar sein. Ein gutes Online Store 2.0 Thema offenbart die richtigen Bereiche für Händler, während es die Teile schützt, die konsistent bleiben sollten.

Beginne mit den Seitentypen, die am wichtigsten sind: Startseite, Produkt, Sammlung und wichtige Inhaltsseiten. Definiere dann Abschnitte für die wichtigsten Inhaltsbereiche und Blöcke für die kleineren Elemente innerhalb dieser. Wenn ein Abschnitt dazu gedacht ist, ein bestimmtes redaktionelles Muster zu unterstützen, halte das Block-Set fokussiert. Wenn es ein breites Spektrum an Merchandising unterstützen soll, erlaube mehr Flexibilität, halte aber die Layoutregeln klar.

Ein praktischer Workflow sieht so aus:

  1. Karte die Seite in große Inhaltszonen.
  2. Entscheide, welche Zonen Abschnitte und welche Blöcke sein sollten.
  3. Füge Einstellungen nur dort hinzu, wo sie die Kontrolle des Händlers verbessern.
  4. Verwende JSON-Vorlagen, um die beabsichtigten Layoutoptionen offenzulegen.
  5. Füge App-Blockunterstützung nur in Abschnitten hinzu, in denen Drittanbieterinhalte natürlich dazugehören.
  6. Verbinde Metafelder, wenn der Inhalt strukturiert und wiederverwendbar sein muss.

Für Entwickler besteht die Hauptdisziplin in der Zurückhaltung. Es ist verlockend, jedes Element konfigurierbar zu machen, aber zu viel Granularität schafft einen unordentlichen Editor und ein anfälliges Thema. Für Händler besteht die Hauptdisziplin in der Konsistenz. Wenn jede Seite unterschiedlich bearbeitet wird, kann der Shop schwieriger zu verwalten werden, selbst wenn das Thema technisch flexibel ist.

Wenn du ein bestehendes Thema bewertest, frage dich, ob die aktuelle Struktur echte Merchandising-Aufgaben unterstützt. Kann ein Händler einen Inhaltsabschnitt ohne Code hinzufügen? Können Blöcke neu angeordnet werden, ohne das Layout zu brechen? Können App-Blöcke dort eingefügt werden, wo Konvertierungstools hingehören? Wenn die Antwort nein lautet, verwendet das Thema möglicherweise die Sprache von Online Store 2.0, ohne den Workflow vollständig zu unterstützen.

Eine gute Implementierung umfasst auch Benennung und Dokumentation. Händler müssen die zugrunde liegende Liquid-Struktur nicht kennen, aber sie benötigen klare Bezeichnungen im Editor. Abschnittsnamen sollten den geschäftlichen Zweck beschreiben, nicht das Codeobjekt. Blockbezeichnungen sollten dem Händler sagen, was jeder Block tut. Wenn der Editor wie ein Inhaltswerkzeug anstelle eines Entwicklerwerkzeugs gelesen wird, ist die Akzeptanz viel reibungsloser.

Es hilft auch, ein einfaches Governance-Modell zu definieren. Entscheide, wer Abschnitte hinzufügen kann, wer Blockeinstellungen bearbeiten kann und welche Vorlagen für Kampagnenarbeiten im Vergleich zu Evergreen-Seiten reserviert sind. Das verhindert, dass die Flexibilität von Online Store 2.0 zu einem Freifahrtschein wird. Das Ziel ist es, Änderungen schneller zu machen, nicht jede Seite zu einem einmaligen Experiment zu machen.

Eine praktische Implementierungsentscheidung ist, ob man einen Abschnitt für einen einzelnen Job oder für eine Familie verwandter Jobs erstellen soll. Wenn der Abschnitt zu eng gefasst ist, erhält man viele nahezu doppelte Komponenten. Wenn er zu breit ist, werden die Einstellungen verwirrend. Der Mittelweg ist in der Regel am besten: ein Abschnitt mit einem fokussierten Zweck und einem kleinen, sinnvollen Set von Blöcken. Dieser Ansatz reduziert die Wartung, während er Händlern dennoch genügend Raum zum Arbeiten gibt.

Häufige Fehler und Fallstricke

Ein häufiger Fehler besteht darin, Online Store 2.0 so zu behandeln, als ob Flexibilität automatisch den Shop verbessert. In Wirklichkeit hilft Flexibilität nur, wenn die Struktur geplant ist. Eine Seite mit zu vielen optionalen Abschnitten kann inkonsistent werden, und ein Abschnitt mit zu vielen kleinen Blöcken kann schwer zu bearbeiten werden.

Ein weiterer Fallstrick besteht darin, Blöcke zu granular zu gestalten. Wenn ein Inhaltsbereich in separate Blöcke für jedes kleine Detail aufgeteilt wird, wird der Editor unordentlich und der Code wird schwerer zu warten. Die eigenen Richtlinien von Shopify weisen darauf hin, verwandte Inhalte zu gruppieren, wenn sie einer klaren Hierarchie folgen. Das führt in der Regel zu einer besseren Bearbeitungserfahrung und einem saubereren Thema.

Ein dritter Fehler besteht darin, sich auf die Blockreihenfolge zur Steuerung des Layouts zu verlassen. Das Layout sollte logisch und reaktionsfähig bleiben, auch wenn Blöcke neu angeordnet werden. Wenn das Design nur funktioniert, wenn Blöcke in einer bestimmten Reihenfolge erscheinen, ist der Abschnitt zu fragil für den echten Gebrauch durch Händler.

Es ist auch leicht, App-Blöcke zu vergessen. Wenn ein Abschnitt wahrscheinlich Konvertierungstools oder Inhalte für Kaufentscheidungen hosten soll, sollte er mit Blick auf die Unterstützung von App-Erweiterungen entworfen werden. Andernfalls könnte es sein, dass Händler ein Thema erhalten, das flexibel aussieht, aber die Apps, die sie tatsächlich nutzen möchten, nicht leicht aufnehmen kann.

Schließlich ignorieren Teams manchmal den Unterschied zwischen statischen und konfigurierbaren Teilen des Themas. Nicht jedes Element gehört in den Editor. Einige Layoutentscheidungen sollten im Code bleiben, damit das Frontend stabil, schnell und verständlich bleibt.

Eine praktische Lösung für viele dieser Probleme besteht darin, das Thema aus der Sicht des Händlers zu überprüfen. Wenn ein Inhaltsmanager diese Seite in fünf Minuten aktualisieren müsste, was müsste er berühren? Wenn die Antwort “zu viele Einstellungen” lautet, ist der Abschnitt wahrscheinlich überdimensioniert. Wenn die Antwort “nichts ist bearbeitbar” lautet, ist der Abschnitt wahrscheinlich unterdimensioniert. Das Ziel ist nicht maximale Kontrolle; es ist nützliche Kontrolle.

Ein weiterer nützlicher Test besteht darin, das Thema mit dem tatsächlichen Workflow des Shops zu vergleichen. Wenn das Marketingteam wöchentliche neue Angebote lancieren muss, sollte das Thema Kampagnenabschnitte leicht austauschbar machen. Wenn das Produktteam häufig strukturierte Details aktualisiert, sollten diese Felder in Metafeldern leben und nicht in Ad-hoc-Textbereichen. Wenn der Shop auf Apps für Bewertungen, Bundles oder Upsells angewiesen ist, sollte das Thema diese App-Blöcke an den richtigen Stellen unterstützen. Viele Probleme entstehen, weil für einen idealisierten Shop statt für einen realen entworfen wird.

Ein letzter Fallstrick besteht darin, anzunehmen, dass ein flexibles Thema eine schwache Inhaltsstrategie behebt. Online Store 2.0 kann es einfacher machen, mehr Inhalte zu veröffentlichen, aber es kann nicht entscheiden, welcher Inhalt nützlich ist. Wenn das Team Abschnitte ohne ein klares Merchandising-Ziel hinzufügt, kann die Seite länger werden, ohne besser zu werden. Die Architektur sollte einen Inhaltsplan unterstützen, nicht einen ersetzen.

Beste Praktiken und schnelle Checkliste

Die besten Online Store 2.0 Themen sind an den richtigen Stellen flexibel und in den restlichen Bereichen bestimmend. Das bedeutet in der Regel, dass Abschnitte für wichtige Inhaltszonen, Blöcke für bedeutende Variationen innerhalb dieser Zonen und stabile Layoutregeln, die die Seite über Geräte hinweg lesbar halten, erstellt werden.

Eine gute Faustregel ist, für die Absichten der Händler zu gestalten, nicht nur für technische Möglichkeiten. Wenn ein Händler Inhalte austauschen, Produkte vergleichen oder app-gesteuerte Vertrauenselemente hinzufügen muss, offenbare diese Kontrolle. Wenn eine Änderung das Layout brechen oder inkonsistente Seiten erzeugen könnte, halte sie eingeschränkt.

Eine weitere bewährte Methode besteht darin, das Bearbeitungsmodell mit dem Betriebsmodell des Shops in Einklang zu bringen. Wenn das Marketingteam die Kampagnenseiten besitzt, gib ihnen die Kontrolle auf Abschnittsebene, wo sie schnell agieren können. Wenn das E-Commerce-Team die Produktdaten besitzt, verwende Metafelder, damit sie strukturierte Inhalte aktualisieren können, ohne das Seitenlayout neu zu gestalten. Wenn Entwickler das gesamte Layout-System besitzen, halte die Themenarchitektur vorhersehbar genug, dass zukünftige Änderungen keinen Neubau erfordern.

Schnelle Checkliste

  • Verwende Abschnitte für wichtige Seitenbereiche, die Händler hinzufügen, entfernen oder neu anordnen möchten.
  • Verwende Blöcke für Inhalte, die innerhalb eines Abschnitts zusammengehören.
  • Halte Blockeinstellungen fokussiert und zielgerichtet.
  • Vermeide es, Inhalte in zu viele kleine Blöcke zu fragmentieren.
  • Stelle sicher, dass Layouts weiterhin funktionieren, wenn Blöcke neu angeordnet werden.
  • Unterstütze App-Blöcke in Abschnitten, in denen Drittanbieter-Tools echten Mehrwert bieten.
  • Verwende Metafelder für strukturierte Inhalte, die wiederverwendbar sein sollten.
  • Halte statische Layoutentscheidungen im Code, wenn die Kontrolle des Händlers Risiken birgt.
  • Beschrifte Abschnitte und Blöcke in einer für Händler freundlichen Sprache.
  • Überprüfe die Editor-Erfahrung auf Desktop und Mobilgeräten, bevor du sie veröffentlichst.
  • Dokumentiere, welche Felder für Händler und welche für Entwickler gedacht sind.
  • Überprüfe das Thema nach dem Start, um ungenutzte Einstellungen zu entfernen.

Für Händler ist der praktische Test einfach: Kann dein Team die häufigsten Änderungen im Frontend ohne Hilfe eines Entwicklers vornehmen, und bleibt diese Kontrolle organisiert? Für Entwickler ist der praktische Test, ob das Thema nach der Hinzufügung der Flexibilität leichter zu warten ist, nicht schwieriger.

Eine letzte bewährte Methode besteht darin, in Bezug auf Standards zu denken. Gute Online Store 2.0 Themen erlauben nicht nur Anpassungen; sie werden mit sinnvollen Ausgangspunkten geliefert. Wenn ein Händler einen Abschnitt öffnet und klaren Inhalt, logischen Abstand und eine sinnvolle Reihenfolge von Blöcken sieht, ist er eher geneigt, das Thema gut zu nutzen. Wenn er es öffnet und mit Dutzenden von leeren Kontrollen konfrontiert ist, ist er eher geneigt, inkonsistente Seiten zu erstellen oder die Funktion ganz zu vermeiden.

Es hilft auch, einen Überprüfungszyklus nach dem Start zu definieren. Sobald Händler beginnen, das Thema zu verwenden, werden einige Einstellungen nützlich und andere nicht. Die besten Teams kürzen ungenutzte Kontrollen, benennen verwirrende Bezeichnungen um und vereinfachen Abschnitte, die auf unerwartete Weise bearbeitet werden. Diese Art der Wartung hält das Thema in Einklang mit realem Verhalten anstatt mit den ursprünglichen Designannahmen.

Aus der Praxis — illustratives Szenario (hypothetisch, kein Kundenprojekt)

Illustratives Beispiel — kein reales Kundenprojekt: Stell dir einen Händler vor, der einen Shopify-Shop mit einigen Hero-Produkten betreibt, die mehr Erklärung benötigen, als eine Standard-Produktseite bieten kann. Das Team möchte eine kurze Produktgeschichte, einen Vergleichsabschnitt, Vertrauensinhalte und ein app-basiertes Bewertungs- oder Bundle-Element anzeigen, möchte aber nicht, dass jedes Update benutzerdefinierten Code erfordert.

Ein typisches Setup würde mit einer Produktvorlage in JSON beginnen. Der Hauptbereich für Produktinformationen ist ein Abschnitt, und darin kann der Händler Blöcke für Titel, Preis, Beschreibung und Call-to-Action verwalten. Darunter enthält das Thema einen separaten Abschnitt für unterstützende Inhalte, wie z.B. hervorzuhebende Funktionen oder einen Nutzungshinweis. Der Händler kann diese Abschnitte im Editor neu anordnen und den Inhalt anpassen, ohne die Vorlage selbst zu ändern.

Stell dir jetzt vor, das Team möchte ein Drittanbieter-Konvertierungstool hinzufügen. Anstatt die Ausgabe der App fest in das Thema zu integrieren, unterstützt der Entwickler App-Blöcke im relevanten Abschnitt. Das gibt dem Händler einen Platz, um die App dort einzufügen, wo sie hingehört, während die Struktur des Abschnitts intakt bleibt. Wenn der Shop außerdem Metafelder für produktspezifische Details verwendet, können diese Felder den Abschnittsinhalt speisen, sodass dasselbe Layout über mehrere Produkte hinweg funktioniert.

Das Team trifft dann einige praktische Entscheidungen. Sie halten den Produkttitel und den Preis als feste Blöcke, weil diese Elemente konsistent bleiben sollten. Sie erlauben, dass der Vergleichsabschnitt neu angeordnet wird, aber sie begrenzen die Anzahl der Blöcke, damit die Seite nicht unübersichtlich wird. Sie dokumentieren auch, welche Metafelder welche Felder befüllen, damit das Inhaltsteam weiß, wo Zutaten, Abmessungen oder Kompatibilitätsnotizen aktualisiert werden müssen.

Als Nächstes definieren sie einen einfachen Launch-Workflow. Bevor ein neues Produkt live geht, überprüft der Händler die Vorlage im Theme-Editor, bestätigt die Reihenfolge der Abschnitte und überprüft die Blockbezeichnungen auf Klarheit. Der Entwickler verifiziert, dass der App-Block weiterhin korrekt gerendert wird und dass der Abschnitt gut auf Mobilgeräten funktioniert. Das Inhaltsteam aktualisiert die Metafelder, während das Marketingteam den unterstützenden Abschnittstext anpasst. Da jede Gruppe eine klare Verantwortung hat, kann die Seite aktualisiert werden, ohne dass alle gleichzeitig denselben Bereich bearbeiten.

Die wichtigste Erkenntnis aus diesem Szenario ist nicht, dass alles bearbeitbar wird. Es ist, dass das Bearbeitungsmodell absichtlich wird. Der Händler erhält Kontrolle über Inhalte, die sich häufig ändern, während das Thema die Teile bewahrt, die Konsistenz benötigen. Dieses Gleichgewicht ist es, was Online Store 2.0 in der Praxis nützlich macht.

Ein zweiter Entscheidungspunkt in diesem Szenario ist, was nicht offengelegt werden soll. Das Team könnte entscheiden, dass die Vergleichstabelle bearbeitet werden kann, die Anzahl der Spalten jedoch nicht. Sie könnten dem Marketingteam erlauben, unterstützende Texte auszutauschen, jedoch nicht das Layout der Kernproduktmedien zu ändern. Diese Grenzen sind keine Schwäche; sie sorgen dafür, dass die Seite kohärent bleibt, während mehr Personen sie nutzen. Mit anderen Worten, das Szenario funktioniert, weil das Thema um vorhersehbares Bearbeitungsverhalten herum gestaltet ist, nicht weil jedes Element offen ist.

Verwandte Konzepte und weitere Lektüre

Wenn du entscheidest, wie weit du die Flexibilität des Themas vorantreiben möchtest, helfen dir diese verwandten Themen, die Architektur mit den täglichen Betriebsabläufen des Shops zu verbinden.

  • Shopify Checkout-Erweiterbarkeit: Was Händler wissen müssen — nützlich, wenn du verstehen möchtest, was über das Thema hinaus angepasst werden kann und was nicht.
  • Shopify Abschnitte vs. Apps: Wofür deine Shopgeschwindigkeit wirklich zahlt — hilft dir, zwischen nativer Themenarbeit und app-basierter Funktionalität zu wählen.
  • Die Kraft der Shopify Metafelder für deinen Shop freischalten — erklärt die strukturierte Datenschicht, die oft Online Store 2.0 Themen unterstützt.
  • Mit Abschnitten und Blöcken bauen — offizielle Richtlinien dafür, wie Shopify erwartet, dass Abschnitte, Blöcke und App-Blöcke funktionieren.
  • Shopify Apps — durchsuche App-Optionen, die die Funktionalität des Frontends erweitern können, ohne jede Funktion fest zu codieren.

Thema vertiefen

Weitere Shopify-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.

Häufige Fragen

Was ist Shopify Online Store 2.0?

Shopify Online Store 2.0 ist die Themenarchitektur, die Händlern mehr Kontrolle über das Seitenlayout durch JSON-Vorlagen, Abschnitte, Blöcke und App-Blöcke gibt. Es ist so konzipiert, dass Shops angepasst werden können, ohne jede Seite in Liquid-Vorlagen fest zu codieren. In der Praxis macht es Themen modularer und einfacher im Theme-Editor zu bearbeiten.

Was ist der Unterschied zwischen Abschnitten und Blöcken?

Abschnitte sind größere Seitenkomponenten, wie ein Held, eine vorgestellte Sammlung oder ein Produktinformationsbereich. Blöcke sind kleinere Teile innerhalb eines Abschnitts, wie Text, Bilder, Schaltflächen oder Icons. Abschnitte steuern die Gesamtstruktur, während Blöcke den Inhalt und die Anordnung innerhalb dieser Struktur steuern.

Können Händler Abschnitte überall in Shopify Online Store 2.0 hinzufügen?

Händler können Abschnitte an Orten hinzufügen, entfernen und neu anordnen, wo das Thema JSON-Vorlagen verwendet und diese Flexibilität unterstützt. Sie können jedoch keine statischen Abschnitte aus Liquid-Vorlagen oder Layouts hinzufügen oder entfernen. Deshalb ist die Struktur des Themas auch in einem flexiblen Online Store 2.0 Setup wichtig.

Warum sind App-Blöcke in Online Store 2.0 wichtig?

App-Blöcke ermöglichen es Apps, in Themenabschnitten zu erscheinen, ohne dass Händler den Code bearbeiten müssen. Das erleichtert es, App-Funktionalitäten auf Produktseiten, Warenkorbseiten oder anderen konversionsorientierten Bereichen zu platzieren. Für Entwickler ist es eine sauberere Möglichkeit, ein Thema zu erweitern und gleichzeitig die Bearbeitungserfahrung für Händler überschaubar zu halten.

Was sind häufige Fehler bei Online Store 2.0 Themen?

Häufige Fehler sind, Abschnitte zu starr zu gestalten, zu viele kleine Blöcke zu erstellen und sich auf die Reihenfolge der Blöcke zur Steuerung des Layouts zu verlassen. Ein weiteres häufiges Problem besteht darin, App-Blöcke zu vergessen, wo Händler möglicherweise Konvertierungstools hinzufügen möchten. Eine gute Themenarchitektur balanciert Flexibilität mit einer klaren Bearbeitungserfahrung.

Funktionieren Metafelder mit Shopify Online Store 2.0?

Ja, Metafelder werden häufig zusammen mit Online Store 2.0 Themen verwendet, um strukturierte Inhalte zu speichern, die in Abschnitten und Blöcken angezeigt werden können. Sie sind nützlich, wenn Händler wiederverwendbare Produkt-, Sammlungs- oder Seiteninformationen benötigen, die nicht direkt im Themen-Code leben sollten. In der Praxis helfen Metafelder, Inhalte organisiert und leichter verwaltbar zu halten.

Weiterlesen

  1. 1Die Zukunft der Shopify App Embed Blöcke

    Ein praktischer Leitfaden zu Shopify App Embed Blöcken für Händler und Entwickler. Erfahren Sie, wie sie funktionieren, wann Sie sie verwenden sollten und welche Fehler zu vermeiden sind.

  2. 2Shopify B2B: Der praktische Leitfaden für den Großhandel

    Shopify B2B ist die native Großhandelslösung von Shopify für Händler, die Unternehmenskonten, individuelle Preise und kontrollierte Einkaufserlebnisse benötigen. Dieser Leitfaden erklärt, wie es funktioniert und wie Sie es umsetzen können.

  3. 3Verstehe die Shopify Admin UI Erweiterungen

    Ein praktischer Leitfaden zu Shopify Admin UI Erweiterungen für Händler und Entwickler. Lernen Sie, was sie sind, wo sie passen und wie Sie sie gut implementieren.

  4. 4Erfolg durch Shopify-Validierungsfunktionen

    Shopify-Validierungsfunktionen helfen Händlern, Geschäftsregeln serverseitig durchzusetzen, bevor eine Bestellung abgeschlossen werden kann. Dieser Leitfaden erklärt, wie sie funktionieren und wo sie eingesetzt werden können.

  5. 5Die Macht der Shopify Metafelder für deinen Shop entfesseln

    Erforsche die Rolle von Shopify Metafeldern bei der Anpassung der Datenstruktur deines Shops, der Verbesserung von Produktinformationen und der Steigerung der Kundenerfahrung.