Du möchtest Sternebewertungen, Produktvorteile, einen Hinweisblock oder eine interaktive Funktion in Shopify einbauen. Technisch gibt es verschiedene Wege. Am häufigsten stehen sich eine Liquid-Section direkt im Theme und ein App Block aus einer Theme App Extension gegenüber.
Beide können im Theme-Editor erscheinen. Sie gehören aber zu unterschiedlichen Architekturen. Deshalb sollte die Entscheidung vor dem Programmieren fallen.
Die Unterschiede im Überblick
| Frage | Theme-Section | Theme App Extension |
|---|---|---|
| Wo liegt der Code? | Im jeweiligen Shopify-Theme | In einer Shopify-App mit Extension |
| Typische Nutzung | Individuelles Layout oder Funktion eines Shops | Wiederverwendbare App-Funktion für einen oder mehrere Shops |
| Einbindung | Über Theme-Editor oder Theme-Dateien | Über App Block oder App Embed im Theme-Editor |
| Aktualisierung | Theme-Code pro Shop pflegen und verteilen | Extension-Versionen über App-Veröffentlichung verwalten |
| Benötigt eine App? | Nein | Ja |
| Beispiel | Hero, FAQ, Referenzraster | Sternebewertung, externe Produktfunktion, globales Widget |
Eine App Extension ist keine normale Section-Datei mit anderem Namen. Shopify beschreibt Theme App Extensions als App-Ressourcen mit Liquid-Blocks, Assets und Snippets, die sich ohne direkte Bearbeitung des Theme-Quellcodes einbinden lassen: Shopify – Theme App Extensions.
Wann ist eine klassische Section die bessere Wahl?
Für einen einzelnen Shop sind native Sections oft die einfachste Lösung. Beispiele:
- Hero-Bereich mit Bild und Button.
- Unternehmensvorteile mit frei sortierbaren Textblöcken.
- Referenzgalerie oder individuelles FAQ.
- Ein Shop-spezifisches Layout ohne eigenes App-Backend.
Eine Section befindet sich typischerweise unter sections/feature-grid.liquid. Ihre Einstellungen stehen im {% schema %}-Block. Der Theme-Editor kann damit Inhalte pflegen und Sections auf geeigneten JSON-Templates hinzufügen.
Der Vorteil ist die geringe Systemkomplexität. Es gibt keinen zusätzlichen App-Lebenszyklus. Der Nachteil: Wird die Funktion in zehn Shops gebraucht, existieren unter Umständen zehn getrennte Theme-Versionen.
Für konkrete Schritte lies Shopify Sections mit Blocks aufbauen.
Wann lohnt sich eine Theme App Extension?
Eine Theme App Extension wird interessant, wenn du eine Funktion als Produkt betreiben möchtest.
Denk an ein Sternebewertungs-Widget, das von vielen Shops genutzt werden soll. Es könnte eine einheitliche Konfiguration, Produktdaten und eigene Versionsstände benötigen.
Dafür bietet sich ein App Block an:
- App mit Shopify CLI entwickeln.
- Theme App Extension hinzufügen.
- Einen App Block als Liquid-Datei in der Extension anlegen.
- Einstellungen und gegebenenfalls Assets definieren.
- App installieren und Block im Theme-Editor platzieren.
- Veröffentlichung und Kompatibilität mit unterschiedlichen Themes testen.
Shopify unterscheidet dabei App Blocks und App Embeds.
App Block: sichtbares Element an bestimmter Stelle
Ein App Block ist passend, wenn der Shopbetreiber ein sichtbares Element im Layout positionieren soll – zum Beispiel Bewertungen unter der Produktbeschreibung.
In einer Theme App Extension verwendet ein solcher Block einen Schema-Eintrag mit Ziel section. Der Merchant fügt ihn im Editor an einer unterstützten Stelle hinzu. Die Installation einer App allein bedeutet nicht automatisch, dass der Block im Theme sichtbar wird. Siehe Shopify – Theme App Extension konfigurieren.
App Embed: eher global oder überlagernd
Ein App Embed eignet sich eher für Funktionen, die unabhängig von einer bestimmten Inhalts-Section arbeiten, beispielsweise eine schwebende Oberfläche oder ein globales Skript.
Entscheide nicht pauschal „App = Embed“. Wenn ein Element genau zwischen zwei Produktinformationen stehen soll, ist ein positionierbarer App Block häufig die bessere UX.
Wichtig: Nicht jedes Theme unterstützt App Blocks überall
Eine Theme-Section muss die Einbindung von @app-Blocks unterstützen. Shopify dokumentiert dafür einen Eintrag im Section-Schema. Statisch gerenderte Sections unterstützen diese App Blocks nicht.
Ein vereinfachter Ausschnitt aus einer passenden Theme-Section:
{
"name": "Produktinformationen",
"blocks": [
{ "type": "@app" }
],
"presets": [
{ "name": "Produktinformationen" }
]
}Das ist ein Schema-Ausschnitt, keine vollständige Section. In einer echten Datei wird er vom {% schema %}-Tag eingeschlossen. Die Ausgabe und die tatsächliche Kompatibilität müssen zum jeweiligen Theme passen.
Quelle: Shopify – App Blocks für Themes.
Wartung und Performance: Nicht nur die Codeform zählt
Eine Extension macht eine Funktion nicht automatisch schneller. Auch App Blocks können CSS, JavaScript, API-Aufrufe und externe Ressourcen laden.
Prüfe deshalb immer:
- Wird JavaScript nur geladen, wenn die Funktion gebraucht wird?
- Sind Bilder und Styles auf den tatsächlichen Einsatz begrenzt?
- Funktioniert die Darstellung auf schmalen Viewports?
- Bleibt die Hauptfunktion mit Tastatur und Screenreader bedienbar?
- Was passiert, wenn der externe Dienst nicht erreichbar ist?
- Wie verhalten sich Aktualisierungen oder eine App-Deinstallation?
Bei einer nativen Theme-Section gelten ähnliche Regeln. Die Verantwortung für Performance und sauberes HTML verschwindet nicht durch die Wahl der Architektur.
Entscheidungshilfe für drei Projekte
Projekt A – individuelle Startseite: Eine maßgeschneiderte Hero-Section für einen einzigen Shop? Eine klassische Section ist meist ausreichend.
Projekt B – Bewertungsfunktion für viele Shops: Ein skalierbares Widget mit eigenen Einstellungen und späterer Abrechnung? Eine Theme App Extension ist ein sinnvoller Baustein. Weitere App-Funktionen und gegebenenfalls ein Backend können notwendig werden.
Projekt C – Kombination: Ein Shopify-Theme kann sein eigenes Layout behalten und an geeigneten Stellen App Blocks aufnehmen. Das ist oft der beste Mittelweg.
Fazit
Theme-Section für das shop-spezifische Layout, Theme App Extension für die verteilbare App-Funktion. Entscheidend sind Wartung, Positionierbarkeit und der geplante Produktumfang – nicht das Schlagwort „App“.
Wenn du eine wiederverwendbare Funktion planst, beginne mit einer klaren Komponenten-Grenze, einem Test-Theme und einem sauberen Berechtigungsmodell. Mehr zur individuellen Shopify-Entwicklung und zur Datenmodellierung findest du im Beitrag Metafelder oder Metaobjekte.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten