Shopify Liquid

Was ist Liquid und wofür wird es benutzt?

Liquid steuert in jedem Shopify-Theme, wie aus Rohdaten — Produkte, Kollektionen, Kundendaten, Warenkorb — fertiges HTML wird. Die Sprache wurde von Shopify selbst entwickelt und ist quelloffen, wird aber inzwischen auch außerhalb von Shopify eingesetzt (etwa bei Jekyll). Innerhalb von Shopify ist Liquid die einzige Möglichkeit, serverseitig auf Shop-Daten zuzugreifen und sie im Theme auszugeben.

Liquid-Code steht in .liquid-Dateien und mischt normales HTML mit Liquid-Syntax in zwei Formen:

• {{ }} für Ausgabe — z. B. {{ product.title }} gibt den Produktnamen aus
• {% %} für Logik — z. B. {% if product.available %} für Bedingungen, Schleifen, Zuweisungen

Die drei Bausteine: Objects, Tags, Filter

Objects sind vordefinierte Datenstrukturen, die Shopify bei jedem Seitenaufruf bereitstellt — je nach Seitentyp (Produktseite, Kollektionsseite, Checkout) stehen unterschiedliche Objects zur Verfügung. Tags steuern den Kontrollfluss und binden wiederverwendbare Theme-Bausteine wie Sections und Snippets ein. Filter werden mit dem Pipe-Symbol | an Ausgaben angehängt und formatieren Werte, etwa Preise in Währungsformat oder Bilder in bestimmten Auflösungen.

Wie passt man ein Shopify-Theme mit Liquid an?

Moderne Shopify-Themes (Online Store 2.0) sind in Sections und Blocks gegliedert — wiederverwendbare, im Theme-Editor konfigurierbare Bausteine, die selbst wieder Liquid-Code enthalten. Das erlaubt Anpassungen auf zwei Ebenen:

1. Ohne Code: Sections per Drag-and-Drop im Theme-Editor anordnen, Einstellungen über Schemas (JSON-Konfiguration am Ende jeder Section-Datei) ändern.
2. Mit Code: eigene Sections, Snippets oder Custom-Liquid-Blocks schreiben, um Layouts oder Logik umzusetzen, die der Theme-Editor nicht abbildet.

Für Produktdaten, die über Standardfelder hinausgehen — etwa technische Spezifikationen oder GPSR-Pflichtangaben — nutzt man Metafelder, die in Liquid über product.metafields ausgelesen werden. Das ist konzeptionell vergleichbar mit dem, wie in JTL-Shop-Templates wie NOVA zusätzliche Wawi-Felder eingebunden werden, nur mit anderer Syntax.

Grenzen von Liquid

Liquid ist bewusst eingeschränkt: keine externen API-Calls, keine komplexe serverseitige Programmlogik, kein direkter Datenbankzugriff. Das ist Absicht — Shopify trennt Theme-Rendering strikt von Backend-Logik, die über Apps oder die Storefront-API läuft. Wer deutlich mehr Kontrolle über Rendering und Datenflüsse braucht, landet oft bei einer Headless-Commerce-Architektur mit eigenem Frontend statt klassischem Liquid-Theme.

Liquid im Vergleich zu anderen Shop-Templatesprachen

Wer aus dem JTL-Umfeld kommt, kennt ein ähnliches Prinzip aus dem NOVA-Template: Auch dort wird Ausgabelogik von der eigentlichen Geschäftslogik getrennt, allerdings über Smarty statt Liquid. Der grundlegende Unterschied liegt im Ökosystem — Liquid ist untrennbar mit Shopifys Theme-Store, Apps und Storefront-API verzahnt, während JTL-Templates direkt auf die Wawi-Datenbank aufsetzen. Für Entwicklerteams, die beide Systeme betreuen, bedeutet das: unterschiedliche Syntax, aber ähnliche Best Practices — Kernfunktionen nicht anfassen, eigene Erweiterungen sauber kapseln, Updates testen statt live zu riskieren.

Performance-Aspekte von Liquid-Themes

Da Liquid serverseitig gerendert wird, bevor die Seite an den Browser geht, hat die Struktur des Codes direkten Einfluss auf die Ladezeit. Verschachtelte Schleifen über Collections mit hunderten Produkten, unnötig viele Snippet-Includes pro Seite oder ungefilterte Bildgrößen sind die häufigsten Ursachen für langsame Themes. Shopify liefert mit den Theme-Store-Vorgaben und dem integrierten Performance-Score im Theme-Editor eine erste Orientierung, ersetzt aber keine gezielte Code-Optimierung bei komplexeren Themes.

Typische Fehler bei der Liquid-Entwicklung

1. Direkte Änderungen an Theme-Store-Dateien statt eigenen Sections — Updates des Basis-Themes überschreiben dann die eigene Arbeit.
2. Zu viel Logik in Liquid statt in Metafeldern oder Apps abgebildet — macht Templates unübersichtlich und schwer wartbar.
3. Fehlendes Caching-Bewusstsein — aufwendige Schleifen über große Produktlisten ({% for %} über hunderte Varianten) verlangsamen das Rendering spürbar.
4. Metafelder ohne einheitliches Namensschema — wächst das Sortiment, wird die Zuordnung zwischen Liquid-Code und Metafeld-Namen schnell unübersichtlich, besonders bei großen Katalogen ohne zentrales PIM-System.
5. Theme-Änderungen ohne Testtheme — Liquid-Fehler live im Produktivtheme zu debuggen, führt schnell zu sichtbaren Ausfällen im Live-Shop.

Liquid-Entwicklung als Teil der Shopify-Umsetzung

Saubere Liquid-Architektur entscheidet über Ladezeit, Wartbarkeit und wie einfach sich der Shop später erweitern lässt. Wir entwickeln individuelle Shopify-Themes und Section-Bibliotheken als Shopify Agentur und beraten auch zur grundsätzlichen Frage, ob ein klassisches Shopify-Theme oder ein Headless-Setup die bessere Basis ist.