Custom Sections erstellen (ohne App)

Was sind Custom Sections in Shopify

Custom Sections sind benutzerdefinierte Abschnitte, die du zu den Seiten deines Shopify-Shops hinzufügen kannst. Sie helfen dir, deine Inhalte individuell zu gestalten, ohne dass du auf eine App oder ein Plugin angewiesen bist. Mit Custom Sections kannst du zum Beispiel neue Textfelder, Bilder, Videos oder andere Elemente auf einer Seite einfügen.

Diese Abschnitte passen sich an dein Design an und können auf verschiedenen Seiten wiederverwendet werden. Du brauchst dafür nur ein wenig Grundwissen über den Aufbau eines Shopify-Themes. Die gute Nachricht ist: Du musst kein Profi sein. Mit etwas Geduld und dem richtigen Vorgehen kommst du ans Ziel.

Warum Custom Sections nützlich sind

Viele Shop-Besitzer möchten ihre Inhalte flexibel gestalten. Aber nicht jede Vorlage bietet genug Möglichkeiten dafür. Custom Sections helfen dir genau dabei. Du kannst deine Marke besser präsentieren. Du kannst Informationen klarer zeigen. Du kannst die Benutzererfahrung verbessern.

Ein Beispiel: Du möchtest auf deiner Startseite einen Abschnitt mit Kundenbewertungen einfügen. Oder du willst auf einer Produktseite eine zusätzliche Tabelle mit Größenangaben anzeigen. Mit einer Custom Section ist das möglich.

Was du brauchst bevor du beginnst

Bevor du loslegst, brauchst du ein paar Dinge. Erstens solltest du ein Shopify-Shop besitzen. Zweitens benötigst du ein Theme, das den Online Store 2.0 unterstützt. Das sind alle neueren Themes, die die flexible Struktur für Abschnitte (Sections) bieten. Drittens brauchst du Zugriff auf den Theme-Editor und den Code-Bereich deines Shops.

Du musst keine App installieren. Auch keine Kosten entstehen. Alles, was du brauchst, ist bereits in deinem Shopify-Adminbereich vorhanden.

Wie Shopify-Themes aufgebaut sind

Ein Shopify-Theme besteht aus verschiedenen Dateien. Im Ordner „Sections“ findest du die Dateien, die für die Erstellung von Custom Sections wichtig sind. Die meisten dieser Dateien haben die Endung .liquid. Das ist eine einfache Template-Sprache, die Shopify verwendet.

Diese Dateien beinhalten den HTML-Code für die Anzeige sowie Variablen, mit denen du Inhalte dynamisch anzeigen lassen kannst. Außerdem gibt es ein JSON-Dateiformat, das Layouts und Einstellungen speichert.

Erstellen einer neuen Custom Section

Um eine neue Section zu erstellen, gehst du in den Theme-Editor im Adminbereich. Klicke auf „Online-Shop“, dann auf „Themes“, und anschließend auf „Bearbeiten“ im Bereich „Code bearbeiten“.

Im Ordner „Sections“ erstellst du eine neue Datei. Gib ihr einen klaren Namen, zum Beispiel „kundenbewertungen.liquid“. Nun fügst du den Grundcode ein. Hier ein einfaches Beispiel:

{% raw %}{% schema %}

{

„name“: „Kundenbewertungen“,

„settings“: [

{

„type“: „textarea“,

„id“: „bewertung_text“,

„label“: „Bewertungstext“

}

],

„presets“: [

{

„name“: „Kundenbewertung“

}

]

}

{% endschema %}

{% endraw %}

Mit diesem Code entsteht ein einfacher Abschnitt mit einem Textfeld. Du kannst diesen Text später im Editor einfügen und ändern.

Section im Theme verfügbar machen

Nachdem du die Datei erstellt hast, kannst du die Section in deinen Seiten verwenden. Gehe dazu wieder in den Theme-Editor. Öffne eine Seite wie die Startseite. Klicke auf „Abschnitt hinzufügen“. Dort solltest du nun deine neue Section „Kundenbewertung“ sehen.

Füge sie der Seite hinzu. Jetzt kannst du im Editor deinen Text eingeben, speichern und auf der Seite anzeigen lassen. So einfach ist das.

Mehrere Elemente in einer Section

Du kannst auch mehrere Eingabefelder hinzufügen. Zum Beispiel für einen Titel, ein Bild und einen Button. Dafür erweitert man den schema-Teil des Codes. So sieht das aus:

{% raw %}{% schema %}

{

„name“: „Infobox“,

„settings“: [

{

„type“: „text“,

„id“: „box_title“,

„label“: „Titel“

},

{

„type“: „image_picker“,

„id“: „box_image“,

„label“: „Bild“

},

{

„type“: „url“,

„id“: „box_link“,

„label“: „Link“

}

],

„presets“: [

{

„name“: „Infobox“

}

]

}

{% endschema %}

{% endraw %}

Mit diesem Beispiel kannst du eine Infobox mit Bild und Link erstellen. Alles steuerbar über den Editor. Du brauchst also nicht mehr in den Code zurück, wenn du es später anpassen willst.

Custom Sections auf anderen Seiten einsetzen

Standardmäßig sind Sections nur für bestimmte Seiten verfügbar. Zum Beispiel die Startseite. Aber du kannst sie auch auf anderen Seiten wie Produktseiten oder Informationsseiten nutzen.

Dazu musst du „Templates“ anpassen. Diese findest du im Ordner „Templates“ deines Themes. Wenn du eine neue Vorlage erstellen willst, klickst du auf „Neue Vorlage“. Dann wählst du z. B. „Seite“ und gibst ihr einen Namen, etwa „info-mit-box“.

Danach kannst du diese Vorlage mit deiner Section verknüpfen und in einer Seite im Editor aktivieren.

Wie du Inhalte wiederverwenden kannst

Wenn du eine Section erstellt hast, die du öfter brauchst, kannst du sie mehrfach einsetzen. Du kannst sogar eine Vorlage mit mehreren dieser Sections bauen. So sparst du Zeit und sorgst für ein einheitliches Layout.

Wichtig ist dabei, dass du die Daten pro Einsatzpunkt anpassen kannst. Jede Section-Instanz hat ihre eigenen Einstellungen. So bleibt alles flexibel.

Häufige Fehler und wie man sie vermeidet

Manchmal kann es passieren, dass ein Fehler im Code auftaucht. Shopify zeigt dir dann eine Fehlermeldung in der Vorschau. Häufige Ursachen sind fehlende Kommas im JSON-Bereich, falsch geschlossene Klammern oder Tippfehler bei den IDs.

Wenn etwas nicht funktioniert, lies den Code langsam durch. Nutze ein Tool wie einen JSON-Validator, um die schema-Struktur zu prüfen. Oder kopiere den funktionierenden Code aus einer anderen Section und passe ihn Schritt für Schritt an.

Wie du deine Section optisch aufwertest

Die meisten Themes nutzen CSS für das Design. Wenn du möchtest, dass deine neue Section gut aussieht, kannst du eigene CSS-Klassen hinzufügen. Diese trägst du in die Datei „base.css“ oder „theme.css“ ein, je nachdem, wie dein Theme aufgebaut ist.

Zum Beispiel:

.infobox { padding: 20px; background: #f9f9f9; border-radius: 8px; }

So wird deine Infobox optisch ansprechender. Du kannst Farben, Abstände und Schriftgrößen frei gestalten, solange du dabei die Struktur deines Themes beachtest.

Was ist der Unterschied zu Blocks

Innerhalb einer Section kannst du auch Blocks verwenden. Das sind wiederholbare Einheiten, wie etwa eine Liste von Logos oder mehrere Teammitglieder. Blocks lassen sich im Editor hinzufügen und verschieben.

Ein Beispiel: Du möchtest mehrere Kundenstimmen in einer Section anzeigen. Dann nutzt du Blocks. Jeder Block enthält einen Namen, ein Zitat und ein Bild. Im Code sieht das so aus:

{% raw %}{% schema %}

{

„name“: „Kundenstimmen“,

„blocks“: [

{

„type“: „stimme“,

„name“: „Stimme“,

„settings“: [

{

„type“: „text“,

„id“: „name“,

„label“: „Name“

},

{

„type“: „textarea“,

„id“: „zitat“,

„label“: „Zitat“

}

]

}

],

„presets“: [

{

„name“: „Kundenstimmen anzeigen“

}

]

}

{% endschema %}

{% for block in section.blocks %}

{% endfor %}{% endraw %}

Damit kannst du beliebig viele Einträge im Editor anlegen, ohne den Code zu ändern. Das spart Zeit und ist sehr flexibel.

Best Practices für Custom Sections

Arbeite immer mit einer Kopie deines aktiven Themes, wenn du Änderungen machst. So kannst du bei Fehlern leicht zurückspringen. Benutze klare Namen für deine Dateien und IDs. Das hilft dir später beim Wiederfinden.

Teste deine Section auf verschiedenen Geräten. Achte auf mobiles Layout und Lesbarkeit. Wenn du CSS nutzt, verwende Klassen deines bestehenden Themes, um ein stimmiges Design zu behalten.

Wann du doch eine App brauchst

In manchen Fällen reichen Custom Sections nicht aus. Zum Beispiel, wenn du eine komplexe Funktion wie einen Produktkonfigurator brauchst. Oder wenn du externe Daten automatisch einbinden willst. Dann kann eine App sinnvoll sein.

Aber für viele Layout-Anpassungen und einfache Inhalte reichen Custom Sections völlig aus. Besonders wenn du individuelle Inhalte zeigen möchtest, ohne die ganze Seite neu zu bauen.

Wie du bestehende Sections anpassen kannst

Du musst nicht immer eine neue Section erstellen. Manchmal ist es besser, eine vorhandene Section zu erweitern. Öffne dazu die gewünschte Datei im Abschnitt „Sections“. Suche die Stelle, die du ändern möchtest.

Füge neue Felder hinzu oder ändere das Layout nach deinen Vorstellungen. Auch hier gilt: Teste die Änderungen zuerst in einer Kopie deines Themes, bevor du live gehst.

Was sich mit Online Store 2.0 geändert hat

Früher war es schwer, benutzerdefinierte Abschnitte auf Seiten zu verwenden. Nur die Startseite ließ sich mit Sections bearbeiten. Mit dem Update auf Online Store 2.0 hat sich das geändert. Jetzt kannst du auf fast jeder Seite Sections einsetzen. Das macht es viel einfacher, Inhalte zu gestalten.

Diese neue Freiheit ermöglicht dir, deinen Shop individueller und strukturierter zu gestalten. Und das ganz ohne Programmierkenntnisse.

Wie du deine Sections organisierst

Wenn du viele Sections anlegst, kann es schnell unübersichtlich werden. Achte deshalb auf eine gute Struktur. Nutze Ordner und benenne die Dateien eindeutig. Du kannst auch Kommentare im Code einfügen, um den Zweck einer Section zu beschreiben.

So behältst du den Überblick. Besonders dann, wenn du später Anpassungen machen willst oder jemand anderes deinen Shop übernimmt.

Shop individuell gestalten

Custom Sections sind eine einfache Möglichkeit, deinen Shopify-Shop individuell zu gestalten. Du brauchst dafür keine App und kein tieferes Fachwissen. Mit ein bisschen Übung kannst du neue Inhalte flexibel erstellen und bearbeiten. Die Arbeit lohnt sich: Dein Shop wird übersichtlicher, ansprechender und besser auf deine Kunden abgestimmt.

Wichtig ist, dass du sauber arbeitest, deinen Code regelmäßig sicherst und neue Elemente testest. So behältst du die Kontrolle über das Design und den Inhalt deines Shops. Und das Beste: Du kannst jederzeit selbst entscheiden, was auf deinen Seiten erscheint.