Wichtige Erkenntnisse
- Liquid ist die Templating-Sprache von Shopify – sie steuert, welche Inhalte basierend auf den Daten deines Shops gerendert werden.
- Gängige Anwendungsfälle: Inhalte basierend auf Product Tags, Customer Tags, Warenkorbinhalt, Metafeldern oder dem aktuellen Datum anzeigen.
- Grundlegende Liquid-Syntax:
{% if %},{% unless %},{% for %},{{ variable | filter }}.- Füge benutzerdefinierte Liquid-Logik zu Section-Dateien oder Snippets im Code-Editor hinzu. Fudge kann sie für dich schreiben.
Liquid ist das, was Shopify dynamisch macht. Es ist die Templating-Sprache, die die Daten deines Shops – Produkte, Kollektionen, Kunden, Warenkorb – mit dem HTML verbindet, das die Besucher sehen. Wenn du die Grundlagen der Liquid-Logik verstehst, kannst du konditionale Inhalte, Loops und datengesteuerte Anzeigen erstellen, die weit über das hinausgehen, was der Theme Editor bietet.
Liquid-Grundlagen – was du wissen musst
Liquid hat zwei Arten von Tags:
Output tags {{ }} – zeigen einen Wert an:
{{ product.title }}
{{ product.price | money }}
{{ customer.first_name }}Logic tags {% %} – steuern den Ablauf, werden nicht direkt angezeigt:
{% if product.available %}
{% for item in cart.items %}
{% assign sale_price = product.price | times: 0.9 %}Filters – transformieren Ausgabewerte mit dem | Pipe-Symbol:
{{ product.price | money }}
{{ product.description | strip_html | truncatewords: 30 }}
{{ 'base.css' | asset_url }}Inhalte basierend auf Product Tags anzeigen
Product Tags (Produkt-Tags) sind eine flexible Möglichkeit, Produkte mit Attributen zu kennzeichnen und dann Inhalte konditional anzuzeigen.
{% if product.tags contains 'new-arrival' %}
<span class="product-badge">Neu eingetroffen</span>
{% endif %}
{% if product.tags contains 'sale' %}
<span class="sale-badge">Im Angebot</span>
{% elsif product.tags contains 'clearance' %}
<span class="clearance-badge">Räumungsverkauf</span>
{% else %}
<!-- Kein Badge angezeigt -->
{% endif %}Anwendungsfälle: Badges für Neuheiten, Sale-Artikel, Limited Editions; Ein- oder Ausblenden von Sektionen basierend auf der Produktkategorie; Anzeige von Pflegehinweisen nur für bestimmte Produkttypen.
Inhalte basierend auf Customer Tags anzeigen
Customer Tags (Kunden-Tags) funktionieren auf die gleiche Weise – du taggst Kundenkonten in Shopify (Kunden → Kunden auswählen → Tags) und zeigst dann konditional Inhalte an.
{% if customer %}
{% if customer.tags contains 'wholesale' %}
<p>Großhandelspreis: {{ product.price | times: 0.7 | money }}</p>
{% else %}
<p>{{ product.price | money }}</p>
{% endif %}
{% else %}
<p>{{ product.price | money }}</p>
{% endif %}Anwendungsfälle: Unterschiedliche Preise für B2B vs. Einzelhandelskunden, Freischalten von versteckten Inhalten für VIP-Kunden, Anzeige des Treuepunkte-Guthabens für Mitglieder.
Inhalte basierend auf Metafeldern anzeigen
Metafelder speichern benutzerdefinierte Daten, die an Produkte, Kollektionen, Kunden oder deinen Shop angehängt sind. Sobald sie erstellt wurden (über den Shopify-Admin oder eine App), kannst du sie in Liquid ausgeben.
{% if product.metafields.custom.ingredients %}
<div class="ingredients-section">
<h2>Inhaltsstoffe</h2>
{{ product.metafields.custom.ingredients.value }}
</div>
{% endif %}Metafelder erstellen: Einstellungen → Benutzerdefinierte Daten → Produkte → Definition hinzufügen. Lege den Namespace (z. B. custom) und den Schlüssel (z. B. ingredients) fest.
Inhalte basierend auf dem Warenkorbinhalt anzeigen
Du kannst in jeder Theme-Datei auf den aktuellen Warenkorb (Cart) zugreifen:
{% if cart.item_count == 0 %}
<p>Dein Warenkorb ist leer.</p>
{% endif %}
{% if cart.total_price >= 5000 %}
<!-- Warenkorb ist 50€+ (Preise sind in Cents) -->
<p>Du hast Anspruch auf kostenlosen Versand!</p>
{% else %}
{% assign remaining = 5000 | minus: cart.total_price %}
<p>Füge noch {{ remaining | money }} hinzu für kostenlosen Versand.</p>
{% endif %}Hinweis: Shopify speichert Preise in Cents (Integer). 5000 = 50,00 €.
Inhalte basierend auf dem Datum anzeigen
{% assign now = 'now' | date: '%s' | plus: 0 %}
{% assign sale_end = '2026-12-31' | date: '%s' | plus: 0 %}
{% if now < sale_end %}
<div class="sale-banner">Feiertags-Sale endet am 31. Dezember!</div>
{% endif %}date: '%s' wandelt ein Datum in einen Unix-Timestamp (Sekunden seit 1970) um, was Datumsvergleiche unkompliziert macht.
For-Loops – Iterieren über Kollektionen oder Arrays
{% for product in collection.products limit: 4 %}
<div class="product-card">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}Nützliche Parameter:
limit: 4– nur 4 Artikel rendernoffset: 2– die ersten 2 Artikel überspringenreversed– in umgekehrter Reihenfolge iterieren
Wo man benutzerdefinierte Liquid-Logik hinzufügt
Section-Dateien (sections/your-section.liquid) – der richtige Ort für seitenspezifische Logik. Änderungen sind auf diese Sektion beschränkt.
Snippets (snippets/your-snippet.liquid) – wiederverwendbare Logik, die über {% render 'your-snippet' %} in mehreren Sektionen eingefügt werden kann.
theme.liquid – für Logik, die auf jeder Seite ausgeführt werden muss (wie Checks von Customer Tags, die das seitenweite Verhalten beeinflussen). Sparsam verwenden.
Arbeite immer an einem Duplikat deines Themes und teste nach jeder Liquid-Änderung – ein Syntaxfehler in Liquid kann dazu führen, dass deine gesamte Seite leer bleibt.
Unless – das Gegenteil von if
{% unless %} ist die Kurzform für “if not” (wenn nicht):
{% unless customer %}
<a href="/account/login">Einloggen für Mitgliederpreise</a>
{% endunless %}Entspricht {% if customer == false %}, ist aber besser lesbar.
Assign und Capture – Variablen erstellen
assign erstellt eine einfache Variable:
{% assign discount_price = product.price | times: 0.8 %}
{{ discount_price | money }}capture erstellt eine Variable aus einem Inhaltsblock (kann HTML und Liquid enthalten):
{% capture size_label %}
{{ product.variants.first.option1 }} / {{ product.variants.first.option2 }}
{% endcapture %}
<span>{{ size_label }}</span>