Eigene Section hinzufügen in Shopify

Was du brauchst

• Einen Shopify-Shop und die Berechtigung, sein Theme zu bearbeiten (Shop-Inhaber oder Mitarbeiter mit Zugriff auf Themes).
• Den Code der Section – eine .liquid-Datei, die mit einem {% schema %}-Tag endet. Schreib ihn selbst, generier ihn mit Klorr oder nimm einen aus dem Marktplatz.
• Ein Online Store 2.0 Theme, wenn die Section auch auf anderen Seiten als der Startseite erscheinen soll.

1. Zuerst dein Theme duplizieren

   Geh in deinem Shopify-Adminbereich zu Onlineshop → Themes. Öffne neben deinem aktuellen Theme das …-Menü und wähl Duplizieren. Arbeite an der Kopie, damit dein Live-Shop unberührt bleibt, bis alles passt.

2. Den Code-Editor öffnen

   Öffne bei der Kopie wieder das …-Menü und wähl Code bearbeiten. Links siehst du die Ordner des Themes – layout, sections, snippets, assets und die übrigen.

3. Die Section-Datei anlegen

   Wähl im sections-Ordner Neuen Abschnitt hinzufügen (im neueren Editor das + neben dem Ordner, dann Neue Datei). Benenn sie nach ihrer Funktion, etwa countdown-banner. Shopify legt sections/countdown-banner.liquid mit etwas Beispielcode an.

4. Code einfügen und speichern

   Markier alles in der neuen Datei, ersetz es durch den Code deiner Section – inklusive des {% schema %}-Blocks am Ende – und klick auf Speichern. Zeigt Shopify einen Fehler, findest du die Lösungen weiter unten.

5. Im Theme-Editor hinzufügen

   Geh zurück zu Themes und klick bei der Kopie auf Anpassen. Öffne die gewünschte Seite – Startseite, ein Produkt, eine Kollektion – und klick in der linken Seitenleiste auf Abschnitt hinzufügen. Deine Section steht dort unter dem Namen aus ihrem Schema.

6. Einrichten und veröffentlichen

   Füll die Einstellungen der Section aus – Texte, Bilder, Farben –, zieh sie an die richtige Stelle und klick auf Speichern. Wenn die Vorschau stimmt, veröffentliche die Kopie über die Themes-Seite mit Veröffentlichen.

Eine komplette Section zum Ausprobieren

Füg das in eine neue Section-Datei ein, um den ganzen Ablauf in Aktion zu sehen. Eine Überschrift, eine Textzeile und ein Button – alles im Theme-Editor bearbeitbar.

<div class="promo-{{ section.id }}">
  <h2>{{ section.settings.heading | escape }}</h2>
  <p>{{ section.settings.text | escape }}</p>
  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
  {% endif %}
</div>

{% style %}
  .promo-{{ section.id }} {
    padding: 48px 20px;
    text-align: center;
    background: {{ section.settings.background }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Promo banner",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
    { "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
  ],
  "presets": [{ "name": "Promo banner" }]
}
{% endschema %}

Schema-Generator →

Warum eine Section ohne App hinzufügen

• Keine monatliche Gebühr – die Section ist Teil deines Themes, kein Abo.
• Nichts lädt zusätzlich – das Skript einer App kann auf jeder Seite laufen; der Code einer Section läuft nur dort, wo die Section ist.
• Sie bleibt, wenn Apps gehen – eine deinstallierte App kann Lücken in den Seiten hinterlassen, die sie gebaut hat. Eine Section-Datei bleibt, bis du sie löschst.

Verwandte Themen