Sections und Schema im Liquid-Theme

Jede Section ist eine Datei unter sections/. Sie besteht aus dem HTML-Template mit Liquid und einem {% schema %}-Block am Ende, der die Einstellungen im PageBuilder definiert.

Minimale Section

<section class="meine-section">
  <div class="container">
    <h2>{{ section.settings.heading }}</h2>
  </div>
</section>

{% schema %}
{
  "name": "Meine Section",
  "category": "Inhalt",
  "enabled_on": { "groups": ["body"] },
  "settings": [
    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Hallo Welt" }
  ],
  "presets": [ { "name": "Meine Section" } ]
}
{% endschema %}

Section-Variablen

Variable	Inhalt
`section.id`	Eindeutige ID dieser Instanz – für HTML-IDs nutzen
`section.type`	Dateiname der Section, z. B. `hero`
`section.settings.<id>`	Wert einer Einstellung
`section.blocks`	Aktive Blocks in Reihenfolge (ausgeblendete sind herausgefiltert)
`section.collection`	Nur mit `collection`-Setting: injizierte Datensätze
`section.collection_meta`	Nur mit `collection`-Setting: Metadaten

Schema-Felder

Feld	Pflicht	Bedeutung
`name`	ja	Anzeigename im Editor
`settings`	ja	Einstellungen (darf `[]` sein)
`blocks`	–	Block-Typen
`max_blocks`	–	Maximale Anzahl Blocks (Systemgrenze 50)
`presets`	–	Vorkonfigurierte Varianten
`enabled_on`	–	Einschränkung auf Section Groups
`category`	–	Filterkategorie im Dialog „Section hinzufügen“

Ein Root-Element

Der Editor umrandet die ausgewählte Section an ihrem äußersten Element und setzt dort data-section-id. Hat die Section mehrere Wurzelelemente, funktionieren Auswahl und Hervorhebung nicht zuverlässig.

{# ✅ #}
<section class="hero"> … </section>

{# ❌ zwei Root-Elemente #}
<header> … </header>
<nav> … </nav>

Ungültiges Schema-JSON macht die Section im Editor unkonfigurierbar, ein unbekannter Setting-type erscheint stumm nicht im Inspector. Der Code-Editor validiert das Schema beim Speichern.