Eine gute Shopify-Section ist wie ein wiederverwendbarer Baukasten: Das Layout bleibt stabil, während Texte und Reihenfolge im Theme-Editor geändert werden. Dafür brauchst du keine zusätzliche App.
Hier bauen wir eine kleine Vorteile-Section mit beliebig sortierbaren Karten. Sie passt zu einer Firmen- oder Produktseite und demonstriert die wichtigsten Grundlagen: section.settings, section.blocks, block.shopify_attributes und presets.
Was wir bauen
Die Section besteht aus einer Überschrift und einer Liste einzelner Vorteile:
- Überschrift: „Darum bei uns bestellen“.
- Je Karte: kurzer Titel und Beschreibung.
- Reihenfolge und Anzahl: im Theme-Editor veränderbar.
- Ohne JavaScript, ohne externe Bibliothek.
Die Ausgabe verwendet eine semantische Liste. Das ist für kurze gleichartige Vorteile häufig sinnvoller als mehrere unverbundene div-Elemente.
Vollständige Section: sections/benefit-grid.liquid
Lege in einer Kopie deines Themes die folgende Datei an. Shopify erwartet im schema-Tag gültiges JSON; Liquid-Ausdrücke gehören außerhalb dieses Blocks.
<section class="benefit-grid" id="benefit-grid-{{ section.id }}">
<div class="benefit-grid__inner">
{%- if section.settings.heading != blank -%}
<h2>{{ section.settings.heading | escape }}</h2>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<ul class="benefit-grid__list">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'benefit' -%}
{%- assign title = block.settings.title -%}
{%- assign text = block.settings.text -%}
{%- if title != blank or text != blank -%}
<li class="benefit-grid__item" {{ block.shopify_attributes }}>
{%- if title != blank -%}
<h3>{{ title | escape }}</h3>
{%- endif -%}
{%- if text != blank -%}
<p>{{ text | escape }}</p>
{%- endif -%}
</li>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</ul>
{%- endif -%}
</div>
</section>
{% schema %}
{
"name": "Vorteile",
"tag": "section",
"class": "shopify-section--benefits",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Überschrift",
"default": "Darum bei uns bestellen"
}
],
"blocks": [
{
"type": "benefit",
"name": "Vorteil",
"settings": [
{
"type": "text",
"id": "title",
"label": "Titel",
"default": "Gut durchdacht"
},
{
"type": "textarea",
"id": "text",
"label": "Beschreibung"
}
]
}
],
"max_blocks": 6,
"presets": [
{
"name": "Vorteile",
"blocks": [
{
"type": "benefit",
"settings": {
"title": "Klare Produktangaben",
"text": "Alle relevanten Informationen auf einen Blick."
}
},
{
"type": "benefit",
"settings": {
"title": "Einfach bestellen",
"text": "Ein übersichtlicher Weg vom Produkt zum Warenkorb."
}
}
]
}
]
}
{% endschema %}Wichtig: Diese Texte sind neutrale Demo-Inhalte. Ersetze sie im Shop durch Aussagen, die du tatsächlich belegen kannst.
Warum diese Liquid-Struktur?
section.settings.heading
Der Wert stammt aus einem Einstellungselement der Section. Ein blank-Check verhindert eine leere Überschrift. Der Filter escape schützt die Ausgabe eines einfachen Textfelds vor HTML-Markup.
section.blocks
Die Schleife erzeugt eine Karte je Block. Der Blocktyp benefit kann später um andere Typen ergänzt werden. max_blocks begrenzt die Anzahl auf sechs, damit die Darstellung überschaubar bleibt.
block.shopify_attributes
Dieses Attribut unterstützt den Theme-Editor dabei, den konkreten Block auf der Seite zu erkennen und zu fokussieren. Deshalb gehört es auf das umschließende HTML-Element des Blocks. Shopify dokumentiert das unter Liquid – block.
presets
Das Preset macht die Section im „Section hinzufügen“-Dialog des Theme-Editors verfügbar und liefert einen nachvollziehbaren Beispielzustand. Ohne passendes Preset können Sections in JSON-Templates nicht einfach über denselben Editor-Ablauf hinzugefügt werden.
Quelle: Shopify – Section Schema.
CSS ohne JavaScript
Lege die Styles im vorhandenen Theme-CSS ab – abhängig vom Theme zum Beispiel in einem dedizierten Asset, das die Section lädt. Der folgende Code ist bewusst klein und ohne fest verdrahtete Farbvorgaben gehalten.
.benefit-grid__inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.benefit-grid__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
}
.benefit-grid__item {
min-width: 0;
padding: 1.25rem;
border: 1px solid currentColor;
}
.benefit-grid__item h3 { margin: 0 0 .5rem; }
.benefit-grid__item p { margin: 0; overflow-wrap: anywhere; }Das responsive Grid verhindert, dass eine Karte wegen einer festen Breite den mobilen Viewport sprengt. Passe Farben, Fokuszustände und Abstände an dein bestehendes Designsystem an.
Fünf Tests vor dem Livegang
- Theme-Kopie nutzen: Nicht direkt im veröffentlichten Theme experimentieren.
- Editor testen: Section hinzufügen, Karten sortieren, löschen und neu anlegen.
- Leere Werte prüfen: Keine leeren
h2-,h3- oder Listen-Container ausgeben. - Responsive prüfen: Schmale Displays, Zoom auf 200 % und lange Titel testen.
- HTML prüfen: Überschriftenhierarchie und semantische Liste im gerenderten DOM kontrollieren.
Bei mehreren Sections auf derselben Seite müssen ihre CSS-Regeln unabhängig funktionieren. Deshalb sind spezifische Klassen besser als globale Selektoren wie section h2.
Wann wäre eine App Extension sinnvoller?
Diese Section ist im Theme verankert. Soll derselbe Funktionsbaustein über viele Shops als eigenständige App bereitstehen, lohnt der Blick auf Theme App Extension oder Section.
Für Daten je Produkt kannst du die Section außerdem mit Shopify-Metafeldern und Metaobjekten verbinden. Für individuelle Shop-Layouts findest du weitere Informationen unter Shopify-Webdesign und Entwicklung.
Fazit
Die Kombination aus klarer Liquid-Ausgabe, validem Schema, Editor-Attributen und einem Preset schafft eine überschaubare, gut wartbare Shopify-Section. Beginne mit wenigen Optionen. Jede zusätzliche Einstellung sollte einen echten Zweck erfüllen.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten