So erstellst du eine benutzerdefinierte Section in Shopify (2026)

Wichtige Erkenntnisse

• Shopify-Sections sind Liquid-Dateien im Ordner sections/ mit einem {% schema %}-Block, der ihre Einstellungen definiert.
• Im Schema definierte Einstellungen erscheinen automatisch in der rechten Seitenleiste des Theme Editors.
• Füge dem Schema einen presets-Key hinzu, um die Section in “Abschnitt hinzufügen” verfügbar zu machen, ohne das Template manuell bearbeiten zu müssen.
• Fudge erstellt komplette benutzerdefinierte Sections aus einer einfachen Beschreibung auf Englisch — inklusive HTML, CSS, JavaScript und Schema.

Jede Section im Theme Editor ist eine Liquid-Datei mit einem Schema. Das Schema macht sie ohne Code bearbeitbar — es definiert, welche Einstellungen in der rechten Seitenleiste erscheinen, welcher Input-Typ jede Einstellung ist und was die Standardwerte sind.

Wenn du diese Struktur verstehst, kannst du alles bauen.

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 “Einen neuen Abschnitt hinzufügen”. Benenne deine Section (z. B. custom-promo-banner). Shopify erstellt sections/custom-promo-banner.liquid.

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

Die Anatomie einer Shopify-Section

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

Verwandt: Homepage-Sections in Shopify hinzufügen.

Verwandt: Benutzerdefinierte Liquid-Logik in Shopify hinzufügen.

Weitere Details findest du in unserem Guide zum Hinzufügen eines neuen Section-Typs in Shopify von Grund auf.

<!-- The visible content -->
<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": "Free shipping on orders over $50"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Shop Now"
    },
    {
      "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, usw.)
• "id" — der Variablenname, der in Liquid verwendet wird: {{ section.settings.text }}
• "label" — was im Theme-Editor angezeigt wird
• "default" — der Startwert beim ersten Hinzufügen

Gängige Typen für Schema-Einstellungen

Blöcke hinzufügen — sich wiederholende Elemente

Blöcke ermöglichen es Händlern, sich wiederholende Inhalte hinzuzufügen — Testimonials, FAQs, Feature-Listen. 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"-Key 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.

Verwandt: Add Homepage Sections in Shopify.

Einen verwandten Ansatz finden Sie in Add Blocks to a Shopify Section.

Deine Section unter “Abschnitt hinzufügen” anzeigen

Der "presets"-Key im Schema sorgt dafür, dass Ihre Section im Menü „Abschnitt hinzufügen“ des Theme Editors erscheint. Ohne Presets funktioniert die Section nur dann, wenn sie manuell zu einer Template-JSON-Datei hinzugefügt wird.

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

Der "name" in den Presets ist das Label, das im Menü „Abschnitt hinzufügen“ erscheint.

Einen verwandten Ansatz finden Sie unter add blocks to a shopify section.

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 %}
  // Sektionsspezifisches JavaScript hier
  // Von Shopify automatisch gebündelt und verzögert (deferred) geladen
{% endjavascript %}

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

Fudge verwenden, um benutzerdefinierte Sections zu generieren

Sections manuell zu erstellen erfordert ein Verständnis von Liquid, JSON-Schema-Syntax und der Section-Architektur von Shopify. Fudge beseitigt diese Hürde:

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

Fudge generiert die komplette Section-Datei — HTML, Schema, CSS und JavaScript — als Entwurf zur Überprüfung. Kein langes Suchen nach Schemas, keine Liquid-Syntaxfehler.

FAQ

Verwandt: Fudge Page Builder.