Shopify-Theme anpassen statt Apps installieren: Wann Liquid passt
Eine Anpassung im Shopify-Theme mit Liquid ist besser als eine App, wenn es um Darstellung geht: Inhalte, Layout und Bausteine, die der Shop aus eigenen Daten zeigt. Eine App braucht es für Logik außerhalb des Themes, etwa Schnittstellen, Abos oder Aufgaben nach der Bestellung.
Jede App im Shopify-Shop bringt einen weiteren Anbieter mit eigener Abrechnung, eigenen Updates und eigenem Code im Shop. Für vieles ist das der richtige Weg, denn Shopify hat dafür eine klare Schnittstelle gebaut. Für einen Abschnitt mit Markengeschichte, eine Tabelle mit Produktdetails oder ein Banner mit Liefertermin kann eine App aber mehr sein, als die Aufgabe verlangt. Solche Bausteine lassen sich als Section direkt im Theme bauen, in der Template-Sprache Liquid, und im Theme-Editor pflegen wie jeder andere Abschnitt.
Apps
Was Apps im Shop kosten
Der Preis einer App steht im App Store und hängt vom gewählten Tarif der App ab, deshalb nennen wir hier keinen. Die Kosten, die neben dem Preis entstehen, beschreibt Shopify selbst in der Hilfe zum Deinstallieren. Wer eine kostenpflichtige App entfernt, beendet damit die künftigen wiederkehrenden Gebühren, der laufende Abrechnungszeitraum kann trotzdem berechnet werden. Manche Apps rechnen außerhalb von Shopify ab; diese Kosten stehen nicht auf der Shopify-Rechnung und enden nicht mit der Deinstallation. Und manche Apps fügen dem Theme Code hinzu, der beim Deinstallieren nicht automatisch verschwindet.
Für einen Prüfschritt reicht der Code-Editor: Öffnen Sie im Theme „Code bearbeiten“ und suchen Sie nach dem Namen einer App, die Sie längst entfernt haben. Treffer in snippets oder in layout/theme.liquid sind Reste, die bei jedem Seitenaufruf mitgeladen werden können.
Dazu kommt die Abhängigkeit. Ändert der Anbieter Preis oder Funktionsumfang oder stellt er die App ein, hängt ein Teil des Shops daran. Wie sich solche Bindungen über die Zeit summieren, beschreibt Vendor-Lock-in: Auch Cloud ist eine Falle am Beispiel der Cloud; bei Shop-Apps ist das Muster dasselbe.
Sections
Custom Sections im Theme
In Online-Store-2.0-Themes besteht eine Seite aus Sections, die Händler im Theme-Editor hinzufügen, sortieren und einstellen. Eine Section ist eine Liquid-Datei im Ordner sections. Am Ende steht ein Block {% schema %} mit JSON, das festlegt, welche Einstellungen der Editor anzeigt. Damit die Section unter „Abschnitt hinzufügen“ erscheint, braucht sie ein Preset; ohne Preset muss sie von Hand in die JSON-Vorlage eingetragen werden.
Für eine D2C-Gründerin in München haben wir mehrere Anpassungen am Shopify-Theme direkt im Liquid-Code umgesetzt, darunter Custom Sections für Marken-Story und Produktdetail, und dabei wo immer möglich auf zusätzliche Apps verzichtet. Den Auftrag beschreibt die Case Study Cloud-Setup und Shopify-Theming aus einer Hand. Das folgende Beispiel zeigt den Aufbau einer solchen Section; es ist für diesen Beitrag geschrieben und nicht der Code aus dem Projekt.
Eine Section für die Markengeschichte mit Bild, Text, bis zu sechs Fakten-Blöcken und Platz für App-Blöcke.
<div class="brand-story brand-story--{{ section.settings.image_position }}">
{%- if section.settings.image != blank -%}
<div class="brand-story__media">
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', widths: '400, 800, 1200', sizes: '(min-width: 750px) 50vw, 100vw' }}
</div>
{%- endif -%}
<div class="brand-story__text">
{%- if section.settings.heading != blank -%}
<h2>{{ section.settings.heading | escape }}</h2>
{%- endif -%}
{{ section.settings.text }}
<div class="brand-story__facts">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'fact' -%}
<p class="brand-story__fact" {{ block.shopify_attributes }}>
<strong>{{ block.settings.label | escape }}</strong>
{{ block.settings.value | escape }}
</p>
{%- when '@app' -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "Brand story",
"tag": "section",
"class": "section-brand-story",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Our story" },
{ "type": "richtext", "id": "text", "label": "Text", "default": "<p>How the brand started and what makes the products different.</p>" },
{ "type": "image_picker", "id": "image", "label": "Image" },
{
"type": "select",
"id": "image_position",
"label": "Image position",
"options": [
{ "value": "image-left", "label": "Left" },
{ "value": "image-right", "label": "Right" }
],
"default": "image-left"
}
],
"blocks": [
{
"type": "fact",
"name": "Fact",
"settings": [
{ "type": "text", "id": "label", "label": "Label", "default": "Made in" },
{ "type": "text", "id": "value", "label": "Value", "default": "Munich" }
]
},
{ "type": "@app" }
],
"max_blocks": 6,
"presets": [
{ "name": "Brand story", "blocks": [{ "type": "fact" }, { "type": "fact" }] }
]
}
{% endschema %}
Editor
Was die Section im Editor ergibt
Die Einstellungen im Schema werden im Theme-Editor zu Feldern. text ergibt ein Textfeld, richtext einen Editor mit Formatierung, dessen Standardwert in p- oder ul-Tags stehen muss, image_picker eine Bildauswahl, die leer nil liefert, und select eine Auswahl. Die Section prüft deshalb mit „!= blank“, ob ein Bild oder eine Überschrift gesetzt ist, bevor sie Markup ausgibt. Die Beschriftungen stehen im Beispiel auf Englisch; für einen deutschen Editor gehören sie in die Übersetzungsdateien des Themes.
Die Blöcke vom Typ fact kann die Händlerin hinzufügen, löschen und sortieren, höchstens sechs, weil max_blocks das begrenzt. block.shopify_attributes gibt die Datenattribute aus, mit denen der Editor einen Block beim Anklicken findet. Der Block vom Typ @app ist der Platz für App-Blöcke: Wer später doch eine App für Bewertungen oder Siegel braucht, setzt deren Block hier ein, ohne den Code zu ändern. Shopify erlaubt nur ein Schema je Section, außerhalb anderer Liquid-Tags, und Liquid innerhalb des Schemas wird nicht ausgewertet.
Für eine Section dieses Umfangs planen wir 1 bis 1,5 Personentage: einen halben Tag für Markup und Schema, einen halben für die Darstellung auf allen Bildschirmgrößen und den Test im Theme-Editor mit leeren und vollen Feldern, und bis zu einem halben für Abstimmung und Übernahme in das veröffentlichte Theme. Multipliziert mit dem Tagessatz aus Ihrem Angebot ergibt das einen einmaligen Betrag, den Sie neben die Gebühren legen, die eine App für dieselbe Aufgabe über zwei oder drei Jahre kostet.
Updates
Was mit dem Theme reist
Anpassungen im Theme-Code liegen in den Dateien des Themes und nicht in der Konfiguration einer fremden App. Bei einem Update aus dem Theme Store übernimmt Shopify alle Einstellungen aus dem Theme-Editor in die neue Version. Code-Änderungen werden übernommen, wenn sie nicht mit dem Update kollidieren; die Theme-Karte zeigt danach an, ob das gelungen ist. Wurden sie nicht übernommen, müssen sie von Hand in die neue Version kopiert werden. Das Update landet als „Updated copy of ...“ in der Theme-Bibliothek und ändert das veröffentlichte Theme nicht, bis Sie es veröffentlichen.
Eine eigene Datei wie sections/brand-story.liquid ist dabei der unkritischste Fall, weil das Update sie nicht berührt. Schwieriger sind Änderungen in Dateien, die der Theme-Hersteller selbst weiterentwickelt, etwa in der Produktseite. Deshalb lohnt die Regel, neue Bausteine als eigene Section anzulegen, statt bestehende Dateien umzuschreiben.
Apps gehen einen anderen Weg. Über Theme App Extensions binden sie App-Blöcke in Sections ein oder App-Embeds vor dem schließenden head- oder body-Tag, ohne den Theme-Code zu ändern. App-Blöcke funktionieren nur in Themes mit JSON-Vorlagen und Sections, die Blöcke vom Typ @app zulassen; App-Embeds laufen auch in älteren Vintage-Themes.
Grenzen
Grenzen von Liquid
Liquid gibt aus, was der Shop schon weiß: Produkte, Kollektionen, Einstellungen, Texte. Es kann keine Daten aus fremden Systemen abholen, keine Aufgaben nach einer Bestellung anstoßen und nichts speichern. Abos, Bewertungen mit Moderation, Verbindungen zu Warenwirtschaft oder Versanddienstleister bleiben deshalb Sache von Apps oder eigener Entwicklung über die Schnittstellen von Shopify.
Dazu kommen feste Grenzen der Theme-Architektur: Eine JSON-Vorlage zeigt höchstens 25 Sections, eine Section höchstens 50 Blöcke. Variablen, die außerhalb einer Section entstehen, sind darin nicht verfügbar, außer den globalen Objekten. Wer viele Sections mit denselben Daten füllen will, landet deshalb schnell bei Theme-Einstellungen oder Metafeldern statt bei kopiertem Code.
Übergabe
Dokumentieren für die eigene Pflege
Eine Section ist erst dann ein Gewinn gegenüber einer App, wenn jemand im Unternehmen sie ohne Entwickler pflegen kann. In unserem Projekt gehörte zur Lieferung eine kompakte Dokumentation, mit der die Gründerin kleinere Theme-Anpassungen selbst weiterführt: pro Baustein ein Absatz, was er ist, wofür er da ist, wo die Konfiguration liegt und welche kleinen Anpassungen sie selbst vornehmen kann.
Für eine Section heißt das: Dateiname, auf welchen Seiten sie verwendet wird, welche Einstellung was bewirkt, welche Bildgröße passt und was bei einem Theme-Update zu prüfen ist. Eine halbe Seite pro Section reicht, wenn sie neben dem Theme liegt und beim nächsten Update gelesen wird.
Theme und Pflege
Häufige Fragen
-
Einstellungen aus dem Theme-Editor übernimmt Shopify in die neue Version. Code-Änderungen werden übernommen, wenn sie nicht mit dem Update kollidieren, sonst müssen Sie sie selbst übertragen. Eigene Section-Dateien sind dabei unkritischer als Änderungen in Dateien, die der Theme-Hersteller weiterentwickelt.
-
Inhalte, Bilder und Reihenfolge einer Section pflegen Sie im Theme-Editor ohne Code. Für Änderungen am Aufbau, etwa ein neues Feld, braucht es den Code-Editor und Grundkenntnisse in Liquid und JSON. Arbeiten Sie dafür in einer Kopie des Themes und veröffentlichen Sie erst nach der Prüfung.
Welche Apps in Ihrem Shop ließen sich ersetzen?
Legen Sie die Liste Ihrer installierten Apps neben die Seiten, auf denen sie sichtbar sind, und markieren Sie, welche nur etwas anzeigen. Wie wir Onlinehändler bei Shop, Theme und Anbindungen unterstützen, steht auf der Branchenseite.
Nachweise
Quellen und Stand
Stand: 08.10.2026. Das Liquid-Beispiel ist Zeile für Zeile gegen die Shopify-Dokumentation geprüft, nicht in einem Live-Shop ausgeführt; das JSON des Schemas haben wir mit Python auf Gültigkeit geprüft. App-Preise nennen wir nicht, weil sie je App und Tarif verschieden sind; die Personentage für eine Section sind eine Schätzung für das gezeigte Beispiel.
Artikel teilen