So erstellst du eine Custom Section in Shopify (2026)

Das Wichtigste in Kürze

• Shopify-Abschnitte (Sections) sind Liquid-Dateien im sections/-Ordner mit einem {% schema %}-Block, der ihre Einstellungen definiert.
• Die im Schema definierten Einstellungen erscheinen automatisch im rechten Panel des Theme-Editors.
• Füge dem Schema einen presets-Schlüssel hinzu, um den Abschnitt unter “Abschnitt hinzufügen” verfügbar zu machen, ohne das Template manuell bearbeiten zu müssen.
• Fudge generiert komplette benutzerdefinierte Abschnitte aus einer einfachen Beschreibung – inklusive HTML, CSS, JavaScript und Schema.

Jeder Abschnitt im Theme-Editor ist eine Liquid-Datei mit einem Schema. Das Schema macht ihn ohne Code bearbeitbar – es definiert, welche Einstellungen im rechten Panel erscheinen, welchen Eingabetyp jede Einstellung hat und was die Standardwerte sind.

So erstellst du eine benutzerdefinierte Section in Shopify

Schritt 1 - Dupliziere dein aktives Theme. Onlineshop → Themes → Drei-Punkte-Menü → Duplizieren.

Schritt 2 - Öffne den Code-Editor des duplizierten Themes.

Schritt 3 - Navigiere zum Ordner sections/.

Schritt 4 - Klicke auf das ”+” oder den Button “Neuen Abschnitt hinzufügen”. Gib deiner Section einen Namen (z. B. custom-promo-banner). Shopify erstellt sections/custom-promo-banner.liquid.

Schritt 5 - Schreibe den Inhalt und das Schema deiner Section.

Der Aufbau einer Shopify-Section

Eine Abschnittsdatei besteht aus zwei Hauptteilen: HTML/Liquid-Inhalt und einem {% schema %}-Block.

<!-- Der sichtbare Inhalt -->
<div class="promo-banner" style="background-color: {{ section.settings.background_color }};">
  <div class="page-width">
    <p class="promo-banner__text">{{ section.settings.text }}</p>
    <a href="{{ section.settings.button_link }}" class="button">
      {{ section.settings.button_label }}
    </a>
  </div>
</div>

{% schema %}
{
  "name": "Promo Banner",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Banner text",
      "default": "Kostenloser Versand für Bestellungen über 50 €"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Jetzt einkaufen"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner"
    }
  ]
}
{% endschema %}

Wie Schema-Einstellungen funktionieren:

• "type" — der Eingabetyp (text, color, url, image_picker, select, range, etc.)
• "id" — der Variablenname, der in Liquid verwendet wird: {{ section.settings.text }}
• "label" — was im Theme-Editor angezeigt wird
• "default" — der Startwert, wenn der Abschnitt zum ersten Mal hinzugefügt wird

Für eine ausführlichere Anleitung, lies dir durch, wie du einen neuen Abschnittstyp in Shopify hinzufügst.

Häufige Schema-Einstellungstypen

Blöcke hinzufügen — wiederkehrende Elemente

Mit Blöcken (Blocks) können Händler wiederkehrende Inhalte hinzufügen – Testimonials, FAQs, Feature-Elemente. Jeder Block hat sein eigenes Schema.

{% for block in section.blocks %}
  <div class="testimonial" {{ block.shopify_attributes }}>
    <p>{{ block.settings.quote }}</p>
    <cite>{{ block.settings.author }}</cite>
  </div>
{% endfor %}

Füge im Schema einen "blocks"-Schlüssel hinzu:

"blocks": [
  {
    "type": "testimonial",
    "name": "Testimonial",
    "settings": [
      {
        "type": "textarea",
        "id": "quote",
        "label": "Quote"
      },
      {
        "type": "text",
        "id": "author",
        "label": "Author name"
      }
    ]
  }
],
"max_blocks": 6

{{ block.shopify_attributes }} ist erforderlich, damit der Theme-Editor jeden Block erkennt und die Bearbeitung ermöglicht.

So taucht deine Section unter “Abschnitt hinzufügen” auf

Der "presets"-Schlüssel im Schema sorgt dafür, dass dein Abschnitt im Menü “Abschnitt hinzufügen” des Theme-Editors erscheint. Ohne Presets funktioniert der Abschnitt nur, wenn er manuell zu einer Template-JSON-Datei hinzugefügt wird.

Ein Preset kann auch Startblöcke hinzufügen. Für den Testimonial-Abschnitt aus dem obigen Block-Beispiel fügt dieses Preset ein Testimonial hinzu, wenn der Abschnitt hinzugefügt wird:

"presets": [
  {
    "name": "Testimonials",
    "blocks": [
      {
        "type": "testimonial"
      }
    ]
  }
]

Der "name" in den Presets ist das Label, das im Menü “Abschnitt hinzufügen” angezeigt wird.

Weitere Informationen zu Blöcken findest du unter wie man Blöcke zu einem Shopify-Abschnitt hinzufügt.

CSS und JavaScript zu einer Section hinzufügen

Verwende {% stylesheet %}- und {% javascript %}-Blöcke am Ende der Section-Datei (nach dem Schema):

{% stylesheet %}
  .promo-banner {
    padding: 12px 0;
    text-align: center;
  }

  .promo-banner__text {
    font-size: 14px;
    margin: 0 0 8px;
  }
{% endstylesheet %}

{% javascript %}
  // Section-specific JavaScript here
  // Automatically bundled and deferred by Shopify
{% endjavascript %}

Shopify bündelt alle Stylesheets und Skripte von Sections automatisch — du musst für einfache Sections keine separaten CSS- oder JS-Dateien erstellen.

Fudge nutzen, um benutzerdefinierte Sections zu generieren

Abschnitte manuell zu erstellen, erfordert ein Verständnis von Liquid, der JSON-Schema-Syntax und der Abschnittsarchitektur von Shopify. Fudge, der KI-Operator für Shopify-Shops, beseitigt diese Hürde. Beschreibe den Abschnitt einfach im Store-Editor:

“Erstelle einen Testimonial-Abschnitt mit einer Überschrift, einem Untertitel und bis zu 6 Testimonial-Blöcken. Jeder Block soll ein Zitat (Textbereich), den Namen des Autors, den Titel des Autors und eine Sternebewertung (1-5) haben. Zeige sie in einem 3-Spalten-Grid auf dem Desktop und in 1 Spalte auf Mobile an.”

Fudge generiert die komplette Abschnittsdatei – HTML, Schema, CSS und JavaScript – als Entwurf zur Überprüfung. Er liest zuerst dein Theme, sodass der Abschnitt deine Schriftarten, Farben und Abstände verwendet, und er funktioniert weiterhin, falls du Fudge jemals deinstallierst.

FAQ