Eigene Shopify Sections erstellen: Schritt für Schritt mit Codebeispiel

Du willst eigene Shopify Sections erstellen, weil dein Theme genau den einen Baustein nicht mitbringt, den du brauchst? Gute Nachricht: Eine eigene Section ist überschaubarer, als viele denken. Du brauchst eine einzige Liquid-Datei mit etwas HTML, ein paar Liquid-Ausgaben und einem Schema-Block – danach taucht deine Section im Theme-Editor auf und lässt sich wie jede Standard-Section per Klick einfügen und konfigurieren. In dieser Anleitung baust du Schritt für Schritt eine vollständige Section mit Settings und Blocks, inklusive Codebeispiel zum Kopieren.

Was ist eine Shopify Section – und wie hängt sie mit dem Theme zusammen?

Eine Section ist ein modularer Inhaltsbaustein deines Themes: eine Liquid-Datei im Ordner sections/, die Markup, optionale Logik und ein Schema enthält. Das Schema beschreibt, welche Einstellungen Händler im Theme-Editor sehen – Texte, Farben, Bilder, Links – und welche wiederholbaren Blocks die Section unterstützt. Seit der aktuellen Theme-Architektur lassen sich Sections auf praktisch jedem Seitentyp einsetzen; die Grundlagen dazu findest du im Beitrag Shopify Online Store 2.0: Was dahinter steckt.

Wichtig fürs Verständnis: Die Section rendert das Frontend, das JSON-Template deiner Seite referenziert sie nur. Deshalb kannst du eine einmal gebaute Section auf beliebig vielen Seiten wiederverwenden.

Voraussetzungen: Das brauchst du vor dem Start

Bevor du loslegst, stelle sicher, dass drei Dinge gegeben sind:

• Ein Duplikat deines Themes: Arbeite nie direkt im Live-Theme. Dupliziere es im Admin unter "Onlineshop > Themes" und entwickle im unveröffentlichten Duplikat.
• Zugriff auf den Code-Editor: "Bearbeiten des Codes" im Theme-Menü reicht für den Einstieg. Für größere Projekte lohnt sich die Shopify CLI mit lokaler Entwicklung und Git.
• Liquid-Grundlagen: Du solltest wissen, was {{ ... }} (Ausgabe) und {% ... %} (Logik) bedeuten. Welche Basis dein Theme mitbringt und wann sich ein Themewechsel lohnt, liest du im Artikel über Shopify Themes.

Schritt für Schritt: Deine erste eigene Section erstellen

1. Neue Section-Datei anlegen: Öffne den Code-Editor, klicke im Ordner sections/ auf "Neue Section hinzufügen" und nenne sie z. B. text-mit-button. Shopify erstellt die Datei text-mit-button.liquid.
2. Markup schreiben: Baue das HTML-Gerüst und gib die späteren Einstellungen über section.settings aus.
3. Schema ergänzen: Füge am Dateiende den {% schema %}-Block mit Name, Settings, Blocks und Preset hinzu – erst das Preset macht die Section im Editor per "Section hinzufügen" auswählbar.
4. Speichern und testen: Öffne den Theme-Editor im Duplikat, füge die Section auf einer Seite hinzu und prüfe alle Einstellungen.
5. Live nehmen: Wenn alles passt, veröffentlichst du das Duplikat oder überträgst die Datei ins Live-Theme.

So sieht die komplette Beispiel-Section aus:

<div class="text-mit-button" style="text-align: {{ section.settings.ausrichtung }};">
  {% if section.settings.ueberschrift != blank %}
    <h2>{{ section.settings.ueberschrift }}</h2>
  {% endif %}

  {% for block in section.blocks %}
    <p {{ block.shopify_attributes }}>{{ block.settings.text }}</p>
  {% endfor %}

  {% if section.settings.button_text != blank %}
    <a class="button" href="{{ section.settings.button_link }}">
      {{ section.settings.button_text }}
    </a>
  {% endif %}
</div>

{% schema %}
{
  "name": "Text mit Button",
  "settings": [
    { "type": "text", "id": "ueberschrift", "label": "Überschrift", "default": "Deine Überschrift" },
    { "type": "select", "id": "ausrichtung", "label": "Ausrichtung",
      "options": [
        { "value": "left", "label": "Links" },
        { "value": "center", "label": "Zentriert" }
      ],
      "default": "left" },
    { "type": "text", "id": "button_text", "label": "Button-Text" },
    { "type": "url", "id": "button_link", "label": "Button-Link" }
  ],
  "blocks": [
    { "type": "absatz", "name": "Textabsatz",
      "settings": [
        { "type": "textarea", "id": "text", "label": "Text" }
      ] }
  ],
  "max_blocks": 6,
  "presets": [
    { "name": "Text mit Button" }
  ]
}
{% endschema %}

Das Schema verstehen: Settings, Blocks und Presets

Das Schema ist das Herzstück jeder Section. Die drei wichtigsten Bereiche:

• settings: Einstellungen, die einmal pro Section gelten – im Beispiel Überschrift, Ausrichtung und Button. Gängige Typen sind text, textarea, richtext, image_picker, url, select, checkbox, range und color.
• blocks: Wiederholbare Unterelemente, die Händler im Editor hinzufügen, sortieren und löschen können – hier einfache Textabsätze. Das Attribut block.shopify_attributes im Markup sorgt dafür, dass der Editor den Block beim Anklicken korrekt markiert. Mit max_blocks begrenzt du die Anzahl.
• presets: Der Eintrag, unter dem die Section im "Section hinzufügen"-Dialog erscheint. Ohne Preset lässt sich die Section nur über statische Einbindung oder direkt im Template nutzen.

Ein häufiger Stolperstein: Das Schema muss valides JSON sein – ein überzähliges Komma reicht, und Shopify lehnt das Speichern mit einer Fehlermeldung ab.

Best Practices für saubere, wartbare Sections

Damit deine Section langfristig Freude macht statt Probleme, beachte ein paar Grundregeln:

1. CSS scopen: Nutze eine eindeutige Klasse oder #shopify-section-{{ section.id }} als Prefix, damit deine Styles keine anderen Theme-Bereiche beeinflussen.
2. Leere Zustände abfangen: Prüfe Eingaben mit != blank, bevor du sie ausgibst – sonst rendern halb leere Elemente.
3. Performance im Blick behalten: Lade Bilder über image_url mit passenden Größen und verzichte auf externe Skripte, wo es geht.
4. Verständliche Labels schreiben: Die Settings bedient später jemand ohne Code-Kenntnisse – deutsche, klare Bezeichnungen sparen Rückfragen.
5. Wiederverwendbarkeit planen: Baue Sections generisch (Text, Bild, Button konfigurierbar) statt für genau einen Anwendungsfall.

Wenn du komplexere Anforderungen hast – etwa Sections mit Metafeld-Anbindung, Filterlogik oder mehrsprachigen Inhalten –, ist das klassische Freelancer-Arbeit. Einen Überblick über meine Angebote findest du auf der Leistungsseite, oder du buchst direkt ein kostenloses 30-Minuten-Gespräch und wir klären, was dein Shop braucht.

FAQ zum Erstellen von Shopify Sections

Kann ich eine Section erstellen, ohne programmieren zu können?

Ein Grundverständnis von HTML und Liquid brauchst du. Für eine einfache Section wie im Beispiel reicht es aber, den Code zu kopieren und die Labels sowie das Markup anzupassen. Alles Weitere – Inhalte, Farben, Reihenfolge – passiert danach im Theme-Editor ohne Code.

Was ist der Unterschied zwischen einer Section und einem Block?

Die Section ist der Rahmen mit eigener Datei und eigenem Schema. Blocks sind wiederholbare Elemente innerhalb dieser Section, die Händler im Editor hinzufügen und sortieren. Eine FAQ-Section ist z. B. der Rahmen, jede einzelne Frage ein Block.

Überschreibt ein Theme-Update meine eigene Section?

Ein klassisches Theme-Update ersetzt das Theme durch eine neue Version – eigene Dateien musst du dann in die neue Version übernehmen. Deshalb gilt: Eigene Sections sauber benennen (z. B. mit Prefix custom-), Änderungen dokumentieren und vor Updates sichern.

Wo finde ich alle verfügbaren Setting-Typen?

Shopify dokumentiert sämtliche Input-Settings (text, richtext, image_picker, video, collection, product u. v. m.) in der offiziellen Entwicklerdokumentation unter shopify.dev. Ein Blick in die Sections des Standard-Themes Dawn ist ebenfalls eine hervorragende Lernquelle.

Fazit: Eigene Sections sind der schnellste Weg zu einem individuellen Theme

Eine eigene Shopify Section besteht aus drei Teilen: Markup, Liquid-Ausgaben und Schema. Mit dem Codebeispiel aus diesem Artikel hast du eine funktionierende Vorlage, die du beliebig erweitern kannst – vom simplen Textbaustein bis zur konfigurierbaren Content-Landschaft für dein gesamtes Sortiment. Wenn du dir Umsetzung oder Erweiterung nicht selbst zutrauen möchtest oder es schlicht schneller gehen soll: Vereinbare ein unverbindliches Erstgespräch – ich baue dir Sections, die zu deinem Theme und deinem Team passen.