app block vs liquid section
App Blocks vs. Liquid Sections in Shopify
App block or Liquid section? A side-by-side of how each renders, what a theme update does to each, when to pick which, and the honest trade-off of both.
Theme App Extensions von Shopify, erklärt
Was eine Shopify Theme App Extension ist, wie App-Blöcke in ein Theme rendern, warum sie Theme-Updates überstehen und welche Theme-Berechtigung Apps brauchen.
Eine Theme App Extension ist der Weg, auf dem eine Shopify-App Sektionen, Blöcke und Skripte zu einem Storefront hinzufügt — ohne in die eigenen Dateien des Themes zu schreiben. Die App liefert eine Extension aus; das Theme referenziert sie über einen stabilen Satz an Slots; der Händler platziert die Blöcke der App im Theme-Editor genauso wie native. Der Code wird nie Teil des Themes.
Diese eine architektonische Tatsache — App-Code lebt in der App, nicht im Theme
— ist der Grund, warum dieses Thema weit über „wie Apps integrieren" hinaus
zählt. Es ist der Grund, warum App-Blöcke Theme-Updates überstehen, die von Hand
eingefügte .liquid-Dateien überschreiben, und es ist das Modell, das
SectionGuard nutzt, um Sektionen zu rendern, die ein Theme-Update
oder -Wechsel nicht anfassen kann.
Das ist der Hub für das gesamte Thema. Er behandelt, was eine Extension
tatsächlich ist, wie ihre Blöcke rendern, wie sie sich von einer Liquid-Sektion
unterscheidet, die du in sections/ schreibst, die API, die App-Sektionen
funktionieren lässt, und die Theme-Berechtigung, die eine App anfragt. Jeder
Abschnitt verlinkt zu einem tieferen Guide für deine konkrete Frage.
Was eine Theme App Extension ist
Technisch ist eine Theme App Extension ein Ordner in der Codebasis einer App —
historisch extensions/<name>/ in einer Shopify-CLI-App —, der Blöcke und
Snippets in Liquid enthält, dazu statische assets und einen
locales-Ordner. Wenn die App deployt wird, hostet Shopify diese Extension.
Themes auf Basis von Online Store 2.0 stellen benannte Slots bereit, in denen
diese Blöcke erscheinen können, sodass der Block der App im Menü „Block
hinzufügen" oder „Sektion hinzufügen" des Theme-Editors neben den eigenen des
Themes auftaucht.
Es gibt zwei Formen von Block:
- App-Blöcke — platziert innerhalb einer Sektion, die App-Blöcke
unterstützt (das Schema der Sektion enthält
{ "type": "@app" }in ihremblocks-Array). Ein Bewertungs-Widget, ein Größentabellen-Block oder ein Upsell, das ins Produkt-Template eingefügt wird, ist ein App-Block. - App-Embed-Blöcke — schwebende Blöcke, die global im Panel App-Embeds
des Theme-Editors aktiviert werden, für Dinge, die nicht an eine Stelle im
Layout gebunden sind: ein Cookie-Banner, ein Chat-Starter oder
Analytics-
<script>-Tags im<head>.
Beide rendern über dieselbe Extension, und beide werden vom Händler im Theme-Editor konfiguriert, ohne Code anzufassen. Was sie nie tun, ist die Dateien des Themes zu verändern.
Wie App-Blöcke rendern
Der Mechanismus ist es wert, verstanden zu werden, weil er die Beständigkeit erklärt. Die JSON-Templates und Sektionen eines 2.0-Themes deklarieren, wo App-Blöcke erlaubt sind. Wenn der Storefront rendert, schlägt Shopify nach, welche App-Blöcke der Händler in diese Slots eingefügt hat, holt das entsprechende Liquid aus der Extension der installierten App und rendert es inline — als wäre es Teil der Seite —, während die Quelle bei der App gehostet bleibt.
Weil das Liquid, CSS und JavaScript des Blocks aus der Extension geliefert und vom Theme lediglich referenziert werden, enthält die Theme-Datei selbst nur einen Verweis, nicht dein Markup. Das ist der ganze Trick. Für die tiefere Erklärung der API, die Sektions-Markup auflöst und zurückgibt, siehe Die Section Rendering API.
App-Blöcke vs. Liquid-Sektionen
Wenn du schon einmal eine Sektion von Hand geschrieben hast, kennst du das
andere Modell: eine .liquid-Datei im sections/-Ordner des Themes mit einem
{% schema %}-Block. Es ist die flexibelste Route und die, die die meisten
Tutorials lehren — Schritt für Schritt behandelt in
So erstellst du eine eigene Sektion.
Der Unterschied liegt nicht in der Fähigkeit; beide können dasselbe Ergebnis auf dem Bildschirm erzeugen. Der Unterschied liegt in Zugehörigkeit und Lebenszyklus:
- Eine Liquid-Sektion, die du schreibst, lebt in einer Theme-Version. Aktualisiere oder ersetze das Theme, und Shopify veröffentlicht eine frische Kopie der Theme-Dateien — deine Datei wird nicht übernommen.
- Ein App-Block lebt in der App. Ein Theme-Update oder -Wechsel ändert die Dateien des Themes, aber die App und ihre Blöcke bleiben unberührt; der Händler behält sie, ohne verlorenen Code wiederherstellen zu müssen.
Keines ist im Abstrakten „richtig" — ein einmaliger Kniff ist von Hand geschrieben in Ordnung; eine Sektion, auf die du langfristig angewiesen bist, ist sicherer app-gerendert. Der vollständige Kompromiss, samt der ehrlichen Kehrseite (ein App-Block verschwindet, wenn die App deinstalliert wird), steht in App-Blöcke vs. Liquid-Sektionen.
Die Section Rendering API
App-Sektionen und dynamische Sektions-Updates stützen sich auf die Section Rendering API — den Endpunkt, der das gerenderte HTML einer bestimmten Sektion für sich zurückgibt, sodass eine Seite eine einzelne Sektion aktualisieren kann (ein Warenkorb-Drawer, ein gefiltertes Produktraster, ein Varianten-Wechsel), ohne die ganze Seite neu zu laden. Das zu verstehen klärt sowohl, wie app-gerenderte Sektionen ausgeliefert werden, als auch, wie man schnelle, partielle UI-Updates in einem Theme baut.
Die Form der Anfrage, die Parameter sections und section_id sowie
ausgearbeitete JavaScript-Beispiele stehen in
Die Section Rendering API.
Berechtigungen: der write_themes-Scope
Eine App, die eine Theme App Extension ausliefert, braucht einen Weg, mit dem
Theme des Händlers zu interagieren. Genau hier kommt der
write_themes-Zugriffsscope ins Spiel. Es ist die Berechtigung, die eine App
anfragt, um über die API mit Theme-Assets zu arbeiten — und es ist ein
vernünftiges Anliegen, das verstehen zu wollen, bevor man es gewährt.
Die ehrliche Version: Extensions sind der nicht-destruktive Integrationsweg
(genau das ist ihr Sinn), und der Scope, den eine App deklariert, sollte zu dem
passen, was sie tatsächlich tut. Was read_themes und write_themes jeweils
erlauben, warum eine extension-basierte App sie anfragt und wie du die Scopes
einer App vor der Installation prüfst, steht in
Was ist der write_themes-Scope?.
Wie es weitergeht
Die Cluster-Guides unten führen jede Frage einen Schritt weiter. Beginne mit der, die zu dem passt, was du gerade tust:
- App-Blöcke vs. Liquid-Sektionen — ein direkter Vergleich der beiden Modelle, was in jedem kaputtgeht und wann du welches wählst.
- Die Section Rendering API — der Endpunkt, der das HTML einer einzelnen Sektion zurückgibt, mit Anfrage-Beispielen.
- Was ist der write_themes-Scope? — die Theme-Berechtigung, die Apps anfragen, was sie gewährt und wie du sie prüfst.
Wenn deine eigentliche Frage lautet „Wie behalte ich meine Sektionen, wenn sich das Theme ändert?", lies diese Säule zusammen mit Theme aktualisieren, ohne Anpassungen zu verlieren und dem ehrlichen Vergleich von datei-basierten vs. app-basierten Sektionen — gemeinsam erklären sie, warum extension-gerenderte Sektionen Updates überstehen, die Theme-Dateien überschreiben, und wo SectionGuard hineinpasst.
In diesem Guide
Schritt-für-Schritt-Anleitungen und Erklärungen zu diesem Thema.
shopify section rendering api
The Shopify Section Rendering API
How the Shopify Section Rendering API returns a single section's HTML, the sections and section_id parameters, and worked fetch examples.
shopify write_themes scope
What Is the write_themes Scope in Shopify?
What the Shopify write_themes access scope grants, how it differs from read_themes, why extension apps request it, and how to check an app's scopes.
In der App ansehen
Baue Sektionen, die dein nächstes Theme-Update überstehen.
SectionGuard rendert deine eigenen Sektionen über eine Theme App Extension — dein Theme bleibt sauber und voll aktualisierbar.
Kostenlos für bis zu 3 Sektionen · Keine Kreditkarte · Läuft auf OS 2.0 & Horizon.