Shopify OS 2.0 & Sections Everywhere: Der komplette Entwickler-Guide (2026)

Online Store 2.0 war das größte Update in der Geschichte der Shopify-Theme-Entwicklung. Das Kern-Feature "Sections Everywhere" hat die Art, wie Shops gebaut werden, grundlegend verändert. Trotzdem nutzen viele Händler und Entwickler nur einen Bruchteil der Möglichkeiten.

Dieser Guide zeigt Ihnen alles – von der grundlegenden Architektur bis zu fortgeschrittenen Patterns, die Ihren Shop auf ein neues Level heben.

Was hat sich mit OS 2.0 geändert?

Vorher: Liquid Templates (OS 1.0)

templates/
├── product.liquid          ← Statisches Template
├── collection.liquid       ← Alles hardcoded
├── page.liquid             ← Keine Sections möglich
└── index.liquid            ← Einzige Seite mit Sections

Händler konnten nur auf der Startseite Abschnitte (Sections) hinzufügen und sortieren. Auf Produktseiten, Collections und statischen Seiten war das Layout in Stein gemeißelt – jede Änderung erforderte einen Entwickler.

Nachher: JSON Templates (OS 2.0)

templates/
├── product.json            ← Dynamisch, Sections überall
├── collection.json         ← Händler baut selbst
├── page.json               ← Volle Freiheit
├── page.about.json         ← Seitenspezifisches Template
├── page.landing.json       ← Für Marketing-Landingpages
└── index.json              ← Wie vorher, aber besser

Der Unterschied: Templates definieren nicht mehr das Layout – sie definieren, welche Sections in welcher Reihenfolge erscheinen. Händler können im Theme Customizer alles selbst arrangieren.

JSON Templates: Aufbau und Architektur

Anatomie eines JSON Templates

{
  "name": "Product",
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {
        "show_vendor": true,
        "enable_sticky_info": true
      },
      "blocks": {
        "title": { "type": "title" },
        "price": { "type": "price" },
        "variant_picker": { "type": "variant_picker" },
        "quantity": { "type": "quantity_selector" },
        "buy_buttons": { "type": "buy_buttons" },
        "description": { "type": "description" },
        "share": { "type": "share" }
      },
      "block_order": ["title", "price", "variant_picker", "quantity", "buy_buttons", "description", "share"]
    },
    "recommendations": {
      "type": "product-recommendations",
      "settings": {
        "heading": "Das könnte Ihnen auch gefallen",
        "products_to_show": 4
      }
    },
    "recently_viewed": {
      "type": "recently-viewed",
      "settings": {}
    },
    "newsletter": {
      "type": "newsletter",
      "settings": {
        "heading": "10% Rabatt sichern",
        "subheading": "Melden Sie sich für unseren Newsletter an."
      }
    }
  },
  "order": ["main", "recommendations", "recently_viewed", "newsletter"]
}

Wichtige Punkte:

sections definiert alle verfügbaren Abschnitte
order bestimmt die Reihenfolge
Jede Section hat settings und optional blocks
Blocks sind wiederum sortierbar

Alternative Templates erstellen

Sie können mehrere Templates pro Seitentyp erstellen:

templates/
├── product.json              ← Standard für alle Produkte
├── product.with-video.json   ← Für Produkte mit Produktvideo
├── product.bundle.json       ← Für Bundle-Produkte
├── page.json                 ← Standard für Seiten
├── page.landing.json         ← Clean-Layout ohne Navigation
├── page.contact.json         ← Mit Kontaktformular-Section
└── page.faq.json             ← Mit Accordion-Section

Zuweisung im Admin: Produkte → Produkt bearbeiten → Template-Suffix auswählen

SEO-Bonus: Verschiedene Templates ermöglichen verschiedene Structured Data, unterschiedliche Content-Layouts und optimierte User Journeys pro Produkttyp.

Sections richtig entwickeln

Section-Anatomie

Eine Section besteht aus drei Teilen:

{%- comment -%} 1. Schema-Definition (JSON) {%- endcomment -%}
{% schema %}
{
  "name": "Feature Grid",
  "tag": "section",
  "class": "feature-grid-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift",
      "default": "Unsere Features"
    },
    {
      "type": "select",
      "id": "columns",
      "label": "Spalten",
      "options": [
        { "value": "2", "label": "2 Spalten" },
        { "value": "3", "label": "3 Spalten" },
        { "value": "4", "label": "4 Spalten" }
      ],
      "default": "3"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Farbschema",
      "default": "scheme-1"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Titel"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Beschreibung"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feature Grid",
      "blocks": [
        { "type": "feature" },
        { "type": "feature" },
        { "type": "feature" }
      ]
    }
  ]
}
{% endschema %}

{%- comment -%} 2. Liquid/HTML Template {%- endcomment -%}
<div class="feature-grid page-width">
  {% if section.settings.heading != blank %}
    <h2 class="feature-grid__heading h1">{{ section.settings.heading }}</h2>
  {% endif %}
  
  <div class="grid grid--{{ section.settings.columns }}-col">
    {% for block in section.blocks %}
      <div class="feature-card" {{ block.shopify_attributes }}>
        {% if block.settings.icon %}
          {{ block.settings.icon | image_url: width: 100 | image_tag: 
             class: 'feature-card__icon', 
             loading: 'lazy' }}
        {% endif %}
        
        <h3 class="feature-card__title h3">{{ block.settings.title }}</h3>
        
        {% if block.settings.description != blank %}
          <div class="feature-card__description rte">
            {{ block.settings.description }}
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>

{%- comment -%} 3. Section-spezifisches CSS {%- endcomment -%}
{% style %}
  .feature-grid {
    padding: 4rem 0;
  }
  .feature-grid__heading {
    text-align: center;
    margin-bottom: 2rem;
  }
  .grid--3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  @media (max-width: 749px) {
    .grid--3-col {
      grid-template-columns: 1fr;
    }
  }
{% endstyle %}

Section Best Practices

Immer block.shopify_attributes setzen – Ermöglicht click-to-edit im Customizer
Blank-Checks – Zeigen Sie leere Elemente nicht an
Responsive Defaults – Mobile-First CSS
Color Schemes nutzen – Seit OS 2.0 eingebaut
Presets definieren – Damit die Section im "Add Section" Dialog erscheint
Performance beachten – Keine schweren Assets in jeder Section laden

Metafields: Dynamische Inhalte

Metafields sind der zweite Game-Changer von OS 2.0. Sie erlauben Custom-Datenfelder für Produkte, Collections, Kunden, Bestellungen und den Shop.

Standard-Metafields erstellen

Einstellungen → Metafelder → Produkt-Metafelder
Definition erstellen:
- Namespace: custom
- Key: care_instructions
- Typ: Rich Text

Metafields in Sections nutzen

Der Clou: Metafields können dynamisch an Section-Settings gebunden werden:

{% schema %}
{
  "settings": [
    {
      "type": "text",
      "id": "content",
      "label": "Inhalt"
    }
  ]
}
{% endschema %}

{%- comment -%} 
  Im Customizer kann der Händler das Text-Feld 
  mit einem Metafield verbinden (Dynamic Sources).
  So zeigt jedes Produkt automatisch seine eigenen Daten.
{%- endcomment -%}
<div class="care-instructions">
  {{ section.settings.content }}
</div>

Metafield-Typen für E-Commerce

Metafield-Typ	Anwendungsfall	Beispiel
`single_line_text`	Kurze Infos	Materialzusammensetzung
`multi_line_text`	Längere Texte	Pflegehinweise
`rich_text`	Formatierter Text	Detaillierte Beschreibung
`number_integer`	Zahlen	Garantie in Monaten
`number_decimal`	Dezimalzahlen	Gewicht in kg
`boolean`	Ja/Nein	"Ist personalisierbar?"
`date`	Datum	"Verfügbar ab"
`url`	Links	Größentabelle-PDF
`file_reference`	Dateien	Datenblatt, Zertifikat
`product_reference`	Produktverknüpfung	"Passt zu:"
`collection_reference`	Collection-Link	Verwandte Kategorie
`json`	Komplexe Daten	Nährstofftabelle

Metaobjects: Komplexe Datenstrukturen

Seit 2023 gibt es Metaobjects – eigenständige Content-Typen:

Beispiel: "Designer" Metaobject

Metaobject: Designer
├── Name (text)
├── Bio (rich_text)
├── Foto (file_reference)
├── Website (url)
└── Produkte (list.product_reference)

Jetzt können Sie auf einer Produktseite dynamisch den Designer anzeigen – mit Foto, Bio und Link zu weiteren Produkten. Ohne eine einzige Zeile Code zu ändern.

App Blocks: Apps ohne Code-Injection

Das Problem mit alten Apps

Alte Shopify-Apps injecten Code direkt in Ihre theme.liquid oder product.liquid. Das führt zu:

Theme-Update bricht die App
App-Deinstallation hinterlässt Code-Reste
Multiple Apps verursachen Konflikte
Performance sinkt mit jeder App

Die Lösung: App Blocks

OS 2.0 Apps nutzen App Blocks – eine Section, die von der App bereitgestellt wird:

✅ Im Customizer ein-/ausschaltbar
✅ Sauber deinstallierbar (kein Code-Rest)
✅ Theme-Updates brechen nichts
✅ Händler kontrolliert die Position

Beim App-Kauf: Achten Sie darauf, dass "OS 2.0 App Block Support" oder "Theme App Extension" gelistet ist. Vermeiden Sie Apps, die manuell Code in Ihr Theme einfügen.

Migration von OS 1.0 zu OS 2.0

Wann migrieren?

Sofort migrieren wenn:

Theme-Updates regelmäßig Anpassungen überschreiben
Händler ständig Entwickler für Layout-Änderungen brauchen
Apps Code in das Theme injecten
Sie Performance-Probleme durch Altlast haben

Migration planen wenn:

Stark customized Theme mit vielen Liquid-Anpassungen
Laufende A/B-Tests
Peak-Season (Black Friday, Weihnachten)

Migrations-Schritte

Schritt 1: Template-Konvertierung

# Vorher
templates/product.liquid

# Nachher
templates/product.json
sections/main-product.liquid

Der gesamte Inhalt von product.liquid wandert in eine neue Section main-product.liquid. Das JSON-Template verweist dann auf diese Section.

Schritt 2: Sections aus Snippets erstellen

# Vorher: Hardcoded in Template
{% include 'testimonials' %}
{% include 'newsletter-signup' %}

# Nachher: Eigenständige Sections
sections/testimonials.liquid     → mit {% schema %}
sections/newsletter-signup.liquid → mit {% schema %}

Schritt 3: Statische Werte durch Settings ersetzen

{%- comment -%} Vorher: Hardcoded {%- endcomment -%}
<h2>Unsere Bestseller</h2>

{%- comment -%} Nachher: Editierbar {%- endcomment -%}
<h2>{{ section.settings.heading | default: 'Unsere Bestseller' }}</h2>

{% schema %}
{
  "settings": [
    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Unsere Bestseller" }
  ]
}
{% endschema %}

Schritt 4: Metafields zu Sections verbinden

Ersetzen Sie hardcoded Produktattribute durch dynamische Metafield-Quellen.

Zeitaufwand (realistisch)

Theme-Komplexität	Aufwand	Kosten (Entwickler)
Standard-Theme (wenig Custom)	8-16h	€800 - €1.600
Mittel customized	24-40h	€2.400 - €4.000
Stark customized	60-100h	€6.000 - €10.000

Performance-Vorteile von OS 2.0

JSON-Templates sind nicht nur flexibler – sie sind auch schneller:

Schnelleres Parsing – JSON ist deutlich schneller zu parsen als Liquid
Lazy Section Loading – Sections können bei Bedarf geladen werden
Weniger JavaScript – App Blocks ersetzen injected Scripts
Besseres Caching – Section-basiertes Rendering ermöglicht granulares Caching

Messwerte: Shops, die von OS 1.0 auf 2.0 migrieren, sehen typischerweise eine Verbesserung des LCP um 15-25% – allein durch die sauberere Architektur.

Für weitere Performance-Tipps lesen Sie meinen Performance-Optimierung Guide.

Weiterführende Ressourcen

Shopify App entwickeln – Custom Apps bauen, die App Blocks nutzen
SEO für Shopify – SEO-Vorteile von OS 2.0 Templates nutzen
Shopify Performance Optimierung – Core Web Vitals verbessern

Fazit: Shopify OS 2.0 ist kein optionales Upgrade – es ist die Basis für jeden modernen Shopify Store. Sections Everywhere, Metafields und App Blocks geben Händlern die Kontrolle über ihr Layout, ohne Entwickler für jede Änderung zu brauchen. Wenn Sie noch auf OS 1.0 Templates setzen, ist jetzt der richtige Zeitpunkt für die Migration.

Sie brauchen Hilfe bei der Migration auf OS 2.0? Buchen Sie ein kostenloses 15-Minuten Audit – ich analysiere Ihr Theme und erstelle einen konkreten Migrations-Plan.