So fügst du benutzerdefinierte Liquid-Logik in Shopify hinzu (2026)

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:

Verwandt: Add Custom Labels on Shopify Product Pages.

Verwandt: Build a Custom Section in Shopify.

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 sind eine flexible Möglichkeit, Produkte mit Attributen zu kennzeichnen und Inhalte dann bedingt anzuzeigen.

Verwandt: So erstellen Sie einen neuen Sektionstyp in Shopify von Grund auf (2026).

Verwandt: So fügst du Metafelder zu Shopify-Produkten hinzu (2026).

Verwandt: So fügen Sie individuelle Labels auf Shopify-Produktseiten hinzu (2026).

{% if product.tags contains 'new-arrival' %}
  <span class="product-badge">New Arrival</span>
{% endif %}

{% if product.tags contains 'sale' %}
  <span class="sale-badge">On Sale</span>
{% elsif product.tags contains 'clearance' %}
  <span class="clearance-badge">Clearance</span>
{% else %}
  <!-- No badge shown -->
{% endif %}

Anwendungsfälle: Badges für Neuheiten, Sale-Artikel, Limited Editions; Ein- oder Ausblenden von Sections 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.

Verwandt: Add a New Section Type in Shopify From Scratch.

Verwandt: Add Metafields to Shopify Products.

{% 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 rendern
• offset: 2 – die ersten 2 Artikel überspringen
• reversed – 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 beziehen sich nur auf diese Section.

Snippets (snippets/your-snippet.liquid) — wiederverwendbare Logik, die über {% render 'your-snippet' %} in mehreren Sections eingebunden werden kann.

theme.liquid — für Logik, die auf jeder Seite ausgeführt werden muss (wie Checks von Customer Tags, die das Verhalten der gesamten Website beeinflussen). Sparsam einsetzen.

Arbeiten Sie immer an einem Duplikat Ihres Themes und testen Sie nach jeder Liquid-Änderung — ein Syntaxfehler in Liquid kann dazu führen, dass Ihre gesamte Seite leer bleibt.

Verwandt: So erstellst du eine benutzerdefinierte Section in Shopify (2026).

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>