Shopify Liquid: die Template-Sprache für Einsteiger

Wer einen Shopify-Theme anpassen will, kommt früher oder später an Liquid nicht vorbei. Die Template-Sprache steckt in jeder .liquid-Datei deines Themes, bestimmt was gerendert wird und wie Daten aus deinem Shop in HTML fließen. Dieser Artikel legt das Fundament: Was Liquid ist, wie es aufgebaut ist und wo du als Einsteiger anfangen solltest, ohne dich zu verrennen.

Was ist Liquid überhaupt?

Liquid ist eine Open-Source-Template-Sprache, die Shopify ursprünglich selbst entwickelt hat und die heute auch außerhalb von Shopify eingesetzt wird. In einem Shopify-Theme liegen alle Seiten, Layouts und Snippets als .liquid-Dateien vor. Der Shopify-Server verarbeitet diese Dateien, ersetzt die Liquid-Ausdrücke durch echte Daten aus deinem Shop und liefert fertiges HTML an den Browser aus.

Das bedeutet: Liquid läuft vollständig serverseitig. Im Browser kommt am Ende normales HTML an, kein Liquid-Code. Das ist wichtig, weil es erklärt, warum du Liquid nicht mit JavaScript mischen oder im Browser debuggen kannst.

Die drei Grundbausteine

Liquid kennt drei Arten von Ausdrücken, erkennbar an ihren Klammern:

Ausgabe-Tags {{ }} geben einen Wert aus. Beispiel:

{{ product.title }}

Das gibt den Produktnamen aus, wie er im Shopify Admin hinterlegt ist.

Logik-Tags {% %} steuern den Programmfluss. Sie geben selbst nichts aus, sondern definieren Schleifen, Bedingungen oder Variablen:

{% if product.available %}
  <button>In den Warenkorb</button>
{% else %}
  <p>Nicht auf Lager</p>
{% endif %}

Kommentar-Tags {% comment %} schließen Text aus der Ausgabe aus. Nützlich zum temporären Deaktivieren von Code-Abschnitten.

Objekte: die Datenbasis

Liquid-Objekte sind die Variablen, über die du auf Shopdaten zugreifst. Die wichtigsten in der täglichen Arbeit:

• product mit allen Feldern eines Produkts (Titel, Beschreibung, Varianten, Bilder, Metafelder)
• collection für Kategorieseiten mit ihren Produkten
• cart für Warenkorb-Inhalt, Summen und Attribute
• customer für Kundendaten in Login-Bereichen
• shop für globale Shopinformationen wie Name, Währung oder Kontaktdaten
• request für Metadaten der aktuellen Anfrage (Seiten-Typ, Locale)

Auf Eigenschaften greifst du mit einem Punkt zu: product.price, cart.item_count, shop.name. Tiefer verschachtelte Objekte funktionieren genauso: product.featured_image.src liefert die URL des Hauptbildes.

Filter: Ausgaben transformieren

Filter modifizieren einen Wert, bevor er ausgegeben wird. Sie werden mit dem Pipe-Zeichen | angehängt:

{{ product.price | money }}
{{ product.title | upcase }}
{{ product.description | truncate: 150 }}

Der money-Filter formatiert den Preis entsprechend der Shop-Währung und -Locale. truncate kürzt einen Text auf eine angegebene Zeichenzahl. Filter lassen sich auch verketten:

{{ product.title | downcase | replace: ' ', '-' }}

In der Praxis baut man damit zum Beispiel URL-Slugs oder CSS-Klassen aus Produktdaten, ohne JavaScript zu benötigen.

Nützliche Filter, die in fast jedem Theme auftauchen:

• img_url (veraltet) bzw. image_url + image_tag für responsive Bilder mit korrekten srcset-Attributen
• asset_url für Theme-Assets wie CSS- oder JS-Dateien
• t für Übersetzungen aus den Locale-Dateien
• json für die Ausgabe von Daten als JSON-String (z.B. für JavaScript-Zugriff)

Kontrollstrukturen: if, for, case

Bedingungen

{% if cart.item_count > 0 %}
  Du hast {{ cart.item_count }} Artikel im Warenkorb.
{% endif %}

unless ist das Gegenteil von if und macht manche Bedingungen lesbarer:

{% unless customer %}
  <a href="/account/login">Anmelden</a>
{% endunless %}

Für mehrere Verzweigungen nutzt du elsif und else:

{% if product.available %}
  ...
{% elsif product.variants.first.inventory_quantity == 0 %}
  ...
{% else %}
  ...
{% endif %}

Schleifen

{% for product in collection.products %}
  <p>{{ product.title }}</p>
{% endfor %}

Nützliche Loop-Erweiterungen: limit begrenzt die Anzahl der Durchläufe, offset überspringt eine Anzahl Elemente. Die Variable forloop.index liefert den aktuellen Zähler. Mit break und continue steuerst du den Schleifenfluss.

Snippets und Sections: Liquid im Theme-Kontext

Liquid-Dateien sind im Online Store 2.0 in drei Typen unterteilt:

• Layouts (layout/) liefern den HTML-Rahmen, der um jede Seite gelegt wird.
• Templates (templates/) legen fest, welche Sections auf einer Seite erscheinen.
• Snippets (snippets/) sind wiederverwendbare Liquid-Fragmente, eingebunden mit {% render 'snippet-name' %}.

Sections und Blocks sind der modernere Weg, um Seiten flexibel zusammenzubauen. Eine Section ist eine eigenständige .liquid-Datei mit einem {% schema %}-Block am Ende, der im JSON-Format definiert, welche Einstellungen Händler im Theme-Editor vornehmen können. Das schema-Block ist pures JSON, kein Liquid.

Beispiel-Schema-Ausschnitt:

{% schema %}
{
  "name": "Ankündigung",
  "settings": [
    {
      "type": "text",
      "id": "announcement_text",
      "label": "Ankündigungstext",
      "default": "Kostenloser Versand ab 50 €"
    }
  ]
}
{% endschema %}

Im Liquid-Code der Section greifst du auf diesen Wert mit {{ section.settings.announcement_text }} zu.

Metafields in Liquid ausgeben

Seit Online Store 2.0 kannst du Metafields direkt in Liquid-Dateien nutzen. Metafields sind zusätzliche Felder, die du Produkten, Kollektionen oder anderen Ressourcen anhängst. Zugriff über object.metafields.namespace.key:

{{ product.metafields.custom.material | escape }}

Ob und wie du Metafields im Theme nutzen kannst, ohne eine App oder Custom-Code zu schreiben, hängt von deinem Plan ab. Für komplexere Datenstrukturen lohnt ein Blick auf Metafields und Metaobjects.

Liquid und App-Erweiterungen

Liquid deckt Themes ab, aber viele Shopify-Funktionen gehen darüber hinaus. Shopify Functions erlauben eigene Logik im Backend (Checkout, Rabatte, Versand), ohne dass Liquid dafür ausreicht. App Blocks können Liquid-Code in Sections einbetten, ohne das Theme direkt zu verändern. Ein Überblick dazu steht im Artikel Shopify erweitern: Liquid, Apps und Functions.

Für maßgeschneiderte Lösungen, die über Theme-Anpassungen hinausgehen, ist Shopify App-Entwicklung der richtige Weg.

Häufige Fragen

Muss ich Liquid komplett lernen, um meinen Shop anzupassen?

Nein. Für einfache Anpassungen reicht es, die Grundmuster zu kennen: Ausgabe mit {{ }}, Bedingungen mit {% if %} und Schleifen mit {% for %}. Wer nur einen Text austauscht oder ein Banner einbaut, kommt mit einem Snippet-Verständnis weit. Für eigene Sections oder komplexe Filter-Logik lohnt sich eine tiefere Einarbeitung.

Kann ich Liquid mit JavaScript kombinieren?

Ja, aber mit klarer Trennung. Liquid läuft serverseitig und generiert HTML. Dieses HTML kann JavaScript-Attribute oder inline <script>-Blöcke enthalten, die du mit Liquid befüllst. Ein häufiges Muster: Produktdaten per Liquid als JSON in ein data--Attribut schreiben, das JavaScript dann ausliest. Beide Ebenen nicht zu vermischen macht den Code wartbar.

Gibt es eine Entwicklungsumgebung für Liquid?

Ja. Das Shopify CLI erlaubt lokales Theme-Development mit Live-Reload. Themes werden dabei gegen einen echten Development-Store gespiegelt. Die Liquid-Vorschau läuft immer serverseitig auf Shopify, nicht lokal, was bedeutet, dass du eine aktive Internetverbindung zum Shopify-Server brauchst.

Wo finde ich alle Liquid-Objekte und Filter?

Die vollständige Referenz liegt unter shopify.dev/docs/api/liquid. Dort sind alle Objekte, Filter und Tags mit Parametern, Rückgabetypen und Beispielen dokumentiert. Diese Seite ist die verlässlichste Quelle, da Shopify sie aktiv pflegt.

Weiterführend

Liquid ist der Einstieg, aber Theme-Arbeit in Shopify hat mehrere Schichten. Das Online Store 2.0-System baut auf Liquid auf und gibt dir mit Sections, Blocks und dem Theme-Editor eine strukturierte Umgebung. Wer regelmäßig Shopify-Themes anpasst oder eigene Themes entwickelt, profitiert von einer professionellen Begleitung. Auf unserer Shopify-Betreuungsseite findest du, wie das bei uns aussieht.