Eigene Shopify-Sektionen: Der komplette Guide

Eine eigene Sektion ist der Weg, einen Shopify-Storefront über das Layout hinaus zu gestalten, das dein Theme mitbringt — ein Hero, ein Bewertungsraster, eine FAQ, eine Größentabelle, ein Upsell-Block. In einem Online-Store-2.0-Theme sind Sektionen die Einheit, die Händler im Theme-Editor hinzufügen, umsortieren und konfigurieren — und die Einheit, zu der Entwickler greifen, wenn ein Design etwas braucht, das das Theme nicht schon mitliefert.

Das ist der Hub für das gesamte Thema. Er erklärt, was eine Sektion wirklich ist, die drei Wege, eine hinzuzufügen, samt ihrer Kompromisse, das Theme-Update-Problem, das still und leise viel handgebaute Arbeit löscht, und wo es für deine konkrete Aufgabe weitergeht.

Was eine Shopify-Sektion ist

Eine Sektion ist ein wiederverwendbarer, in sich geschlossener Baustein einer Seite. Technisch ist sie eine .liquid-Datei im sections/-Ordner deines Themes, die Markup (Liquid und HTML) mit einem {% schema %}-Block verbindet. Das Schema ist ein kleines Stück JSON, das den Namen der Sektion und ihre bearbeitbaren Einstellungen deklariert — Textfelder, Bildauswahl, Farbfelder und so weiter.

Genau dieses Schema lässt eine Sektion wie einen erstklassigen Teil von Shopify wirken. Sobald eine Sektion im Theme existiert, taucht sie im Menü „Sektion hinzufügen" des Theme-Editors auf. Ein Händler kann sie auf ein Template ziehen, ihre Einstellungen ausfüllen, sie umsortieren und ausblenden — alles, ohne Code anzufassen. Sektionen können außerdem Blöcke enthalten: kleinere, wiederholbare Elemente (eine einzelne Slide, eine FAQ-Zeile, ein Testimonial), die ein Händler innerhalb der Sektion hinzufügt und umsortiert.

Ein paar verwandte Begriffe lohnt es sich früh zu trennen:

• Sektion — ein konfigurierbarer Block, den du auf einer Seite platzierst (worum es in diesem Guide geht).
• Template — die Datei auf Seitenebene (templates/product.json, templates/index.json), die auflistet, welche Sektionen auf dieser Seite erscheinen und in welcher Reihenfolge.
• App-Block — eine sektionsähnliche Einheit, die von einer App statt von einer Datei in deinem Theme gerendert wird. Sie erscheint im selben Editor-Menü, lebt aber außerhalb deines Theme-Codes. Genau um diese Unterscheidung dreht sich der Abschnitt zum Theme-Update weiter unten.

Die drei Wege, eine Sektion hinzuzufügen

Es gibt drei praktische Routen zu einer neuen Sektion, und sie unterscheiden sich vor allem darin, wie viel Kontrolle du bekommst gegenüber dem, was später kaputtgehen kann.

Der Theme-Editor (ohne Code)

Viele Themes enthalten bereits flexible Sektionen — oft eine „Custom Liquid"-, „Mehrspaltig"-, „Rich Text"- oder „Bild mit Text"-Sektion. Du fügst eine aus dem Editor hinzu, konfigurierst ihre Einstellungen, und bist fertig. Das ist der schnellste Weg und braucht keine Entwicklung, aber du bist auf das beschränkt, was die eingebauten Sektionen des Themes hergeben. Für ein wirklich neues Layout reichen die Einstellungen meist nicht weit genug.

Code (eine Sektionsdatei in deinem Theme)

Für volle Kontrolle schreibst du die Sektion selbst: eine neue .liquid-Datei in sections/, mit deinem Markup und einem {% schema %}, das genau die Einstellungen definiert, die du willst. Das ist die flexibelste Route und die, die die meisten Tutorials lehren. Die Schritt-für-Schritt-Anleitung findest du hier: So erstellst du eine eigene Sektion in Shopify.

Der Haken ist die Zugehörigkeit: Die Datei lebt nun in deinem Theme. Das ist in Ordnung, bis du das Theme aktualisierst oder ersetzt — genau das Problem, das weiter unten behandelt wird.

Eine App

Eine Sektion kann auch von einer Shopify-App als App-Block oder als app-eingebettete Sektion geliefert werden, gerendert über eine Theme App Extension. Du installierst die App, und ihre Sektionen erscheinen im Editor neben denen des Themes. Weil das Markup in der App lebt — nicht in deinen Theme-Dateien — wird es beim Theme-Update nicht angefasst. Genau diesen Mechanismus nutzt SectionGuard, und er wird ausführlich erklärt in Theme App Extensions von Shopify, erklärt.

Das Theme-Update-Problem

Hier ist das Problem, das entscheidet, ob deine Arbeit überlebt. Wenn du eine Sektion hinzufügst, indem du Theme-Dateien bearbeitest — eine neue .liquid-Datei oder eingefügtes Markup in einer „Custom Liquid"-Box —, wird dieser Code Teil genau dieser Theme-Version. Shopify führt deine Änderungen nicht in ein Theme-Update zusammen. Wenn du eine neue Version des Themes installierst (oder das Theme komplett wechselst), veröffentlicht das Update eine frische Kopie der Theme-Dateien, und alles, was du der alten Kopie von Hand hinzugefügt hast, wird nicht übernommen.

In der Praxis heißt das: Ein Shop-Betreiber kann Stunden mit dem Bau einer eigenen Sektion verbringen, das Theme Monate später aktualisieren, um einen Bugfix oder ein neues Feature zu bekommen — und die Sektion ist weg. Die Sektions-Einstellungen, die ein Händler im Editor konfiguriert hat, werden pro Template gespeichert, also können auch die verloren gehen, wenn die Sektion, auf die sie sich bezogen, nicht mehr existiert.

Es gibt zwei ehrliche Wege, das zu vermeiden:

1. Halte einen disziplinierten Update-Workflow ein — duplizieren vor dem Aktualisieren, eigene Dateien in einer dokumentierten Liste führen und sie auf das neue Theme erneut anwenden. Das funktioniert, hängt aber ganz vom Prozess ab. Die vollständige Methode steht in Shopify-Theme aktualisieren, ohne Anpassungen zu verlieren.
2. Rendere die Sektion außerhalb des Themes — über eine Theme App Extension, sodass ein Theme-Update oder -Wechsel sie nie berührt. Diesen Ansatz vergleichen wir im Detail in Datei-basierte vs. app-basierte Sektionen.

Keine der beiden Routen ist im Abstrakten „die richtige". Ein einmaliger Kniff an einem Theme, das du selten anfasst, kann ruhig von Hand geschrieben werden. Eine Sektion, auf die du über Theme-Wechsel hinweg angewiesen bist, ist sicherer aus einer App gerendert. Der ehrliche Vergleich legt offen, was ein Theme-Update übersteht und was eine App-Deinstallation übersteht, damit du mit offenen Augen wählen kannst.

Wie es weitergeht

Die Cluster-Guides unten decken jede Aufgabe Schritt für Schritt ab. Beginne mit der, die zu dem passt, was du gerade tust:

• So erstellst du eine eigene Sektion in Shopify — baue eine von Grund auf, mit der Datei, dem Schema und Beispiel-Markup.
• So fügst du eine Sektion zu einer Seite hinzu — platziere eine bestehende Sektion auf einem Template und konfiguriere sie.
• So fügst du eigenes CSS zu einer Sektion hinzu — style eine Sektion, ohne den Rest des Themes kaputtzumachen.
• Sektions-Schema und Blöcke — eine tiefere Referenz zu Einstellungen, Blöcken und Presets.

Wenn deine eigentliche Frage lautet „Wie behalte ich diese Sektionen beim Theme-Wechsel?", lies Theme App Extensions zusammen mit dem Vergleich — gemeinsam erklären sie, warum app-gerenderte Sektionen Updates überleben, die Theme-Dateien überschreiben, und wo SectionGuard hineinpasst.