Shopify Sections und Blocks: flexible Seiten bauen

Sections und Blocks sind das modulare Bausystem hinter dem Shopify-Theme-Editor. Seit Online Store 2.0 im Jahr 2021 kannst du auf jeder Seite deines Shops Sektionen frei verschieben, hinzufügen oder entfernen, ohne eine einzige Zeile Code anzufassen. Was sich simpel anhört, ist in der Praxis ein echter Hebel für schnelle Anpassungen, aber auch ein System mit klaren Grenzen, die man kennen sollte.

Was sind Sections?

Eine Section ist ein eigenständiger Inhaltsbereich auf einer Shopify-Seite. Technisch gesehen ist sie eine Liquid-Datei im /sections-Verzeichnis eines Themes. Sie enthält Markup, optionales CSS, optionales JavaScript und ein schema-Objekt. Dieses Schema definiert, welche Einstellungen der Händler im Theme-Editor sieht und bearbeiten kann, zum Beispiel Überschriften, Farben, Bilder, Schriftgrößen oder Abstände.

Vor Online Store 2.0 gab es Sections nur auf der Startseite. Mit OS 2.0 kannst du Sections auf jeder Seite einsetzen: Produktseiten, Kollektionsseiten, Blogbeiträge, eigene Landing Pages, alles. Das macht den Unterschied zu klassischen Themes aus, bei denen viele Layouts fix vorgegeben waren.

Im Theme-Editor siehst du in der linken Seitenleiste alle aktiven Sections einer Seite. Du kannst sie per Drag-and-drop umordnen, duplizieren und löschen. Jede Section ist dabei unabhängig von den anderen.

Was sind Blocks?

Blocks sind die Unterebene von Sections. Sie sind wiederum modulare Einheiten, aber innerhalb einer Section. Eine Produkt-Section kann zum Beispiel folgende Blocks enthalten: Produkttitel, Preis, Produktbeschreibung, Varianten-Auswahl, Menge, Kaufen-Button, Bewertungssterne.

Du kannst Blocks innerhalb einer Section hinzufügen, entfernen und umsortieren. Welche Blocks erlaubt sind, legt das Theme-Schema fest. Dadurch kann eine Section sehr flexibel sein, aber trotzdem strukturell kontrolliert bleiben. Als Entwickler kannst du die maximale Anzahl von Blocks pro Section begrenzen und genau steuern, welche Block-Typen überhaupt verfügbar sind.

Ein Praxisbeispiel: Eine “Featured Collection”-Section könnte als Blocks einzelne Produkt-Karten enthalten. Jede Karte ist ein Block mit eigenen Einstellungen wie Bild, Titel und Link. Der Händler wählt, wie viele Karten er zeigen will, ohne am Code zu drehen.

Der Unterschied zwischen statischen und dynamischen Sections

Es gibt zwei grundsätzliche Arten von Sections:

• Statische Sections sind direkt in ein Template eingebettet und können im Theme-Editor nicht verschoben oder entfernt werden. Typische Beispiele sind Header und Footer. Sie existieren auf jeder Seite in derselben Position.
• Dynamische Sections sind frei verschiebbar und auf bestimmten Templates hinzufügbar. Seit OS 2.0 können dynamische Sections auf allen Seitentypen genutzt werden, nicht nur auf der Startseite.

In der Praxis heißt das: Der Header bleibt immer oben, du kannst darunter aber beliebig viele dynamische Sections stapeln und anpassen. Diese Freiheit ist für Händler, die regelmäßig Kampagnen aufsetzen oder Landingpages bauen, ein erheblicher Vorteil.

App Blocks: Apps direkt im Theme-Editor

App Blocks sind eine Erweiterung des Block-Systems, mit der Apps eigene Blocks in den Theme-Editor einbringen können. Das Konzept ist schlicht: Statt App-Code manuell in Liquid-Dateien einzufügen, erscheint ein App-Block als auswählbarer Block-Typ im Editor. Du ziehst ihn an die gewünschte Stelle, fertig.

Bekannte Anwendungsfälle für App Blocks sind Produktbewertungs-Widgets, Größenberater, Upsell-Anzeigen, Trust-Badges und Live-Chat-Schaltflächen. Wenn du die App deinstallierst, verschwindet der Block automatisch. Kein toter Code bleibt zurück, was bei älteren Apps mit manuellen Code-Injektionen ein häufiges Problem war.

Für Entwickler bedeutet das: Apps, die auf Theme App Extensions setzen, sind sauberer und wartungsarmer. Für Händler bedeutet es, dass sie App-Integrationen selbst verwalten können, ohne jedes Mal eine Agentur zu beauftragen. Diese Schnittstelle zwischen dem Shopify App-Ökosystem und dem Theme-Editor ist einer der echten Fortschritte von OS 2.0.

Metafields in Sections und Blocks nutzen

Seit OS 2.0 können Sections und Blocks direkt auf Metafields und Metaobjects zugreifen. Das eröffnet Möglichkeiten, die über statische Theme-Einstellungen weit hinausgehen.

Ein Beispiel: Du hast auf deinen Produkten ein Metafield “Materialzusammensetzung”. Im Theme-Editor kannst du dieses Metafield einem Block zuweisen, der es dann auf der Produktseite anzeigt. Kein Custom-Code nötig, die Zuweisung passiert visuell im Editor. Das funktioniert auch für Kollektionen, Seiten und Blog-Posts.

Für Shops mit vielen produktspezifischen Inhalten ist diese Kombination aus Blocks und Metafields ein starkes Werkzeug. Ohne sie müsstest du entweder in den Theme-Code eingreifen oder auf teure App-Lösungen ausweichen.

Grenzen des Systems: Was Sections und Blocks nicht können

Wer viel mit dem System gearbeitet hat, kennt die Grenzen:

• Conditionale Logik ist eingeschränkt. Sections und Blocks haben keine nativen If-Else-Bedingungen für das Erscheinungsbild, die auf Kundendaten basieren. Wenn du Inhalte für unterschiedliche Zielgruppen oder Login-Zustände differenzieren willst, brauchst du JavaScript oder eine App.
• Globale Blocks gibt es, aber nicht jeder Theme nutzt sie. Mit den neueren Shopify Theme Blocks kannst du einen Block einmal im zentralen /blocks-Ordner definieren und sektionsübergreifend wiederverwenden. Ältere Themes, die noch ausschließlich mit sektionseigenen Blocks arbeiten, profitieren davon nicht und führen schnell zu Redundanz.
• Verschachtelte Sections sind nicht möglich. Eine Section kann keine weitere Section enthalten. Wer komplexe Grid-Layouts braucht, stößt hier an Grenzen und muss entweder mit einem Page-Builder-App arbeiten oder die Section entsprechend im Code aufbauen.
• Zu viele Sections verlangsamen den Editor. Wenn eine Seite viele Sections mit je vielen Blocks hat, wird der Theme-Editor spürbar träger. Das ist kein Deal-Breaker, aber etwas, das bei Performance-Audits Shopify Performance-Optimierung auftaucht.

Diese Grenzen sind kein Versagen des Systems. Sie zeigen, wo ein erfahrenes Entwickler-Team gefragt ist, das einschätzen kann, wann das eingebaute System reicht und wann Custom-Code sinnvoller ist.

Sections und Blocks in der Theme-Entwicklung

Wenn du ein Custom-Theme oder Theme-Anpassungen beauftragst, solltest du auf ein paar Dinge achten. Gut entwickelte Sections haben sinnvolle Standardwerte für alle Einstellungen, klare Labels im Editor ohne kryptische Variablennamen, sinnvolle Begrenzungen für Block-Anzahl und Block-Typen sowie eine konsistente Namensgebung im Schema.

Eine Section, die im Editor verwirrend aussieht, wird nicht genutzt. Wir sehen in der Praxis immer wieder Themes, bei denen Händler Sections gar nicht erst anfassen, weil die Beschriftungen im Editor unverständlich sind. Das ist vermeidbarer Aufwand. Eine gute Theme-Architektur, wie sie mit Shopify Liquid möglich ist, denkt den Editor-Nutzer von Anfang an mit.

Häufige Fragen

Kann ich Sections auf allen Seiten meines Shops nutzen?

Ja, seit Online Store 2.0. Vorher war das auf die Startseite beschränkt. Heute kannst du dynamische Sections auf Produkt-, Kollektions-, Blog- und Custom-Seiten hinzufügen. Ausnahmen sind systemseitige Seiten wie der Checkout, der ein eigenes Anpassungssystem hat.

Was passiert, wenn ich eine App deinstalliere, die App Blocks verwendet?

App Blocks, die über Theme App Extensions eingebunden wurden, werden beim Deinstallieren der App automatisch aus dem Theme entfernt. Du musst nichts manuell bereinigen. Bei älteren Apps, die ihren Code direkt in Liquid-Dateien eingefügt haben, ist das leider anders. Da bleibt toter Code zurück, den du manuell entfernen musst.

Wie viele Sections kann eine Seite haben?

Es gibt technisch eine Obergrenze von 25 Sections pro Template, aber in der Praxis solltest du weit darunter bleiben. Zu viele Sections erhöhen die Seitenkomplexität und können die Ladezeit negativ beeinflussen. Ein gut strukturiertes Layout kommt mit 6 bis 10 Sections pro Seite aus.

Müssen Sections in jedem Theme gleich aufgebaut sein?

Nein. Jedes Theme definiert seine eigenen Sections mit eigenen Einstellungen und Blocks. Wenn du das Theme wechselst, verlierst du alle im Editor vorgenommenen Einstellungen. Inhalte wie Produkte und Kollektionen bleiben erhalten, aber Layout-Anpassungen musst du im neuen Theme neu konfigurieren. Das ist ein oft unterschätzter Aufwand beim Theme-Wechsel.

---

Wenn du dir unsicher bist, ob ein Standard-Theme mit seinen Sections für deine Anforderungen ausreicht oder ob Custom-Entwicklung sinnvoller wäre, hilft ein kurzes Gespräch mehr als langes Ausprobieren. Auf unserer Seite zu Shopify-Shop-Erstellung und -Entwicklung findest du, wie wir das angehen, und was dabei üblicherweise dranhängt.