Shopify Liquid: Das umfassende Nachschlagewerk für Händler und Entwickler

Shopify Liquid ist die Open-Source-Templating-Sprache, die jeden Shopify-Storefront antreibt. Sie verbindet die Backend-Daten Ihres Shops (Produkte, Kollektionen, Warenkorb, Kunde) mit dem HTML, das Ihre Käufer sehen, indem sie drei primitive Konzepte nutzt: Objekte, Tags und Filter. Diese drei Dinge richtig einzusetzen ist der Unterschied zwischen einem Theme, das konvertiert, und einem, das Sie jeden Monat in App-Abonnements und Entwickler-Tickets kostet.

Wichtigste Erkenntnisse

• Die drei Primitive von Liquid sind Objekte {{ }}, Tags {% %} und Filter |. Jede Anpassung, die Sie an einem Shopify-Theme vornehmen, läuft über diese drei.
• Das {% render %} Tag hat 2019 das {% include %} Tag ersetzt und ist das einzige Include-Tag, das Online Store 2.0 unterstützt. Der Austausch der beiden ist immer noch der schnellste Performance-Gewinn bei Legacy-Themes.
• Neue Filter, die 2025-2026 hinzugefügt wurden, umfassen image_tag mit fetchpriority und sizes Attributen sowie metafield_tag für strukturiertes Metafeld-Rendering.
• Eine unoptimierte Collection-Schleife mit verschachtelten Tag-Überprüfungen kann 2-4 Sekunden zur LCP hinzufügen und kostet etwa 7% des mobilen Umsatzes pro Sekunde Verlangsamung.
• Das Ersetzen von 3-5 mittleren Apps durch native Liquid-Abschnitte spart typischerweise 100-300 Dollar pro Monat und entfernt 150-600 KB JavaScript von Drittanbietern pro Seite.

Was ist Shopify Liquid?

Liquid ist eine Template-Sprache, mit der Sie ein einziges Template erstellen können, um statische Inhalte zu hosten und Informationen je nach Kontext dynamisch einzufügen. Eine Produktvorlage, zum Beispiel, enthält alle Standard-Produktattribute und tauscht dynamisch den richtigen Inhalt für jede Produkt-URL aus.

Shopifys Liquid-Variante erweitert die Open-Source-Version um Shop-spezifische Objekte (product, collection, cart, customer, shop) und Filter, die für E-Commerce entwickelt wurden (money, image_url, metafield_tag). Seit dem 13. Januar 2026 hat Shopify auch aktualisiert, wie es Liquid-Code intern verarbeitet, um Theme-Rendering zuverlässiger zu machen, ohne dass Händler etwas tun müssen.

Die drei Primitive

1. Objekte

Objekte geben dynamische Daten mit doppelten geschwungenen Klammern aus:

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

Wichtige globale Objekte, die Sie bei jedem Theme-Aufbau verwenden werden:

Objekte können einen einzelnen Wert darstellen oder mehrere Eigenschaften offenlegen. Das request Objekt ist besonders nützlich für bedingtes Rendering basierend auf dem Seitentyp.

2. Tags

Tags fügen Logik und Steuerungsfluss mit {% %} Syntax hinzu. Die Kategorien, die Sie kennen müssen:

Steuerungsfluss liquid {% if product.available %} <button>In den Warenkorb</button> {% else %} <button disabled>Ausverkauft</button> {% endif %}

Iteration liquid {% for product in collection.products limit: 24 %} {% render 'product-card', product: product %} {% endfor %}

Variablenzuweisung liquid {% assign sale_price = product.compare_at_price | minus: product.price %} {% capture button_label %}Hinzufügen {{ product.title }}{% endcapture %}

Theme-Tags (Abschnitte, Snippets, Layouts) liquid {% render 'product-card', product: product, show_vendor: true %} {% section 'announcement-bar' %} {% layout 'checkout' %}

3. Filter

Filter ändern die Ausgabe mit dem Pipezeichen |. Mehrere Filter verketten sich von links nach rechts:

{{ product.title | upcase | truncate: 50 }}
{{ product.price | money }}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '200,400,600,800' }}

Kritische Filter-Kategorien:

• Geldfilter: | money, | money_with_currency, | money_without_trailing_zeros. Codieren Sie Währungssymbole niemals hart. Der | money Filter respektiert Währung, Sprache und Formatierungseinstellungen Ihres Shops. Ein hart codiertes $ Symbol funktioniert nicht mehr, sobald Sie Multi-Währung in Shopify Markets aktivieren.
• Bildfilter: | image_url: width: X gefolgt von | image_tag. Die modernen image_url und image_tag Filter ersetzten die älteren img_url und img_tag und liefern responsive Bilder mit korrekten srcset, sizes, Lazy Loading und fetchpriority Attributen in einer einzigen Kette.
• Array-Filter: | where, | map, | sort, | uniq, | join, | concat. Verwenden Sie | where um Arrays ohne Schleifen zu filtern.
• String-Filter: | upcase, | downcase, | truncate, | strip_html, | escape, | split.
• Mathematik-Filter: | plus, | minus, | times, | divided_by, | ceil, | floor, | round.
• Farbfilter: | color_lighten, | color_darken, | color_mix, | color_contrast. Der color_contrast Filter gibt das Kontrastverhältnis zwischen zwei Farben zurück, was für das zugängliche Design von Badges und Schaltflächen unerlässlich ist.
• Lokalisierungsfilter: | t (Übersetzung), | format_address, | currency_selector.

Ein Hinweis zur | where Falle: Der Filter ist case-sensitiv. | where: 'tags', 'Sale' stimmt nicht mit einem Tag von 'sale' überein. Verwenden Sie | downcase vor dem Vergleich.

Abschnitte und das {% schema %} Tag

Online Store 2.0 machte Abschnitte überall verfügbar, nicht nur auf der Homepage. Jeder Abschnitt, den Sie erstellen, sollte einen vollständigen {% schema %} Block haben, damit Händler Inhalte im Theme-Editor bearbeiten können, ohne eine Code-Datei zu öffnen.

Jeder Abschnitt kann nur ein einzelnes {% schema %} Tag haben, das gültiges JSON enthalten muss. Wenn Sie mehr als eines haben oder es in ein anderes Liquid-Tag verschachteln, erzeugt dies einen Syntaxfehler.

Ein minimales aber vollständiges Abschnittsschema:

{% schema %}
{
  "name": "Feature Banner",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift",
      "default": "Unser Versprechen"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Hintergrundbild"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature-Element",
      "settings": [
        { "type": "text", "id": "feature_text", "label": "Feature", "default": "Versandkostenfrei" }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "Feature Banner" }]
}
{% endschema %}

Kritische Regel: Behandeln Sie Setting id Werte wie Datenbankspaltennamen. Sie werden zu persistenten Schlüsseln in Template-JSON in jedem Shop, der Ihren Abschnitt installiert. Das Umbenennen einer id verwaist vorhandene Werte. Das Ändern einer text Einstellung zu image_picker migriert Daten nicht. Präfixieren Sie, wenn Abschnitte groß werden: Verwenden Sie hero_heading statt heading, wenn Sie auch card_heading in Blöcken haben.

Abschnitte mit Presets sollten nicht statisch gerendert werden. Statisch gerenderte Abschnitte können von Händlern nicht entfernt oder neu angeordnet werden.

Das {% render %} Tag (und warum {% include %} tot ist)

Das {% render %} Tag ist die einzige Möglichkeit, Snippets in modernen Shopify-Themes einzubinden. {% include %} teilte Variablenumfang über Snippets, was zu Benennungskonflikten führte und Performance-Profiling unzuverlässig machte. {% render %} erstellt einen isolierten Umfang: Snippets können nicht auf übergeordnete Variablen zugreifen, es sei denn, sie werden als benannte Parameter übergeben.

{# VERALTET - teilt übergeordneten Umfang #}
{% include 'product-card' %}

{# KORREKT - isolierter Umfang, explizite Eingaben #}
{% render 'product-card', product: product, show_vendor: true %}

{# Schleifenform #}
{% render 'product-card' for collection.products as product %}

Isolierter Umfang bedeutet, dass Snippets über Produktdetailseiten, Suchergebnisse, AJAX-Warenkorb-Antworten und Section Rendering API-Anfragen ohne Umschreibungen sicher wiederverwendbar sind. Das Ersetzen von {% include %} mit {% render %} löscht auch jeden Theme Check-Fehler, der Shopify Theme Store-Einreichung blockiert.

Metafelder in Liquid

Metafelder lassen Sie Shopifys Datenmodell mit benutzerdefinierten Daten erweitern (Größentabellen, Zutaten, Pflegeanweisungen, Spezifikationen), ohne Apps. Die leistungsfähigsten Metafeld-Typen für Liquid-Entwicklung sind:

• JSON für strukturierte Daten (Rendering mit | metafield_tag oder Wert parsen)
• Angereicherte Text für von Händler bearbeitbaren HTML-Body-Text
• Dateiverweis für Bilder und Videos, die an Produkte angehängt sind
• Produkt/Collection-Verweis für explizite Beziehungen zwischen Ressourcen

Zugriffsmuster:

{% assign size_chart = product.metafields.custom.size_chart %}
{% if size_chart != blank %}
  {{ size_chart.value | metafield_tag }}
{% endif %}

Die != blank Schutzvorrichtung ist nicht verhandelbar. Überspringen Sie es und Produkte ohne eine Größentabelle rendern eine leere <table>, die das Layout auf mobilen Safari-Geräten zerstört.

Erstellen Sie immer Metafeld-Definitionen über Einstellungen > Benutzerdefinierte Daten im Shopify-Admin, nie ad-hoc über die API. Definitionen geben Ihnen Typvalidierung, benutzerfreundliche Labels und Admin-Sichtbarkeit. Apps von Drittanbietern wie Yotpo und Klaviyo lesen diese Definitionen, daher speist ein sauberes Schema Ihren gesamten Stack.

Performance-Muster, die wirklich zählen

Schleifen-Optimierung

Verschachtelte Schleifen sind der häufigste Performance-Killer in den Liquid-Themes, die ich überprüfe. Eine äußere Schleife über 50 Produkte kombiniert mit einer inneren Schleife über 20 Tags pro Produkt führt zu 1.000 Iterationen pro Page-Render. Verwenden Sie stattdessen den contains Operator:

{# SCHLECHT: O(n*m) - 50 Produkte x 20 Tags = 1.000 Iterationen #}
{% for product in collection.products %}
  {% for tag in product.tags %}
    {% if tag == 'featured' %}...{% endif %}
  {% endfor %}
{% endfor %}

{# GUT: ein Durchgang, contains-Überprüfung ist O(1) #}
{% for product in collection.products limit: 24 %}
  {% if product.tags contains 'featured' %}...{% endif %}
{% endfor %}

Fügen Sie immer limit: zu Collection-Schleifen hinzu. Eine unoptimierte Schleife kann 2-4 Sekunden zur LCP auf Mobilgeräten hinzufügen.

Bild-Rendering

{# SCHLECHT: keine Dimensionen, kein srcset, Browser kann keinen Platz reservieren (CLS) #}
<img src="{{ product.featured_image | img_url: 'master' }}">

{# GUT: srcset, Lazy Loading, expliziter Breitenhint #}
{{ product.featured_image
  | image_url: width: 800
  | image_tag:
      loading: 'lazy',
      widths: '200,400,600,800',
      sizes: '(min-width: 768px) 400px, 100vw',
      alt: product.title }}

Das image_tag Filter macht in einer Zeile, was vorher drei Zeilen HTML mit manueller srcset-Konstruktion erforderte.

Whitespace-Steuerung

Liquid gibt Whitespace um jeden Tag aus. Bei großen Templates bläht das HTML auf und verlangsamt TTFB. Verwenden Sie den - Modifier, um es zu entfernen:

{%- for product in collection.products -%}
  {{- product.title -}}
{%- endfor -%}

Section Rendering API

Die Section Rendering API ermöglicht, dass Abschnitte unabhängig über AJAX gerendert werden, was schnellere Page-Übergänge und dynamische Warenkorb-Updates ohne vollständige Seiten-Neuladen ermöglicht. Dies ist die Grundlage für App-ähnliche Erfahrungen innerhalb von Standard-Liquid-Themes, ohne den Overhead, headless zu gehen.

Theme Check und Tools

Theme Check 2.0 ist jetzt in der Shopify CLI eingebaut und erkennt Performance-Probleme, Zugriffsprobleme und veraltete Musternutzung, bevor Sie bereitstellen. Führen Sie es bei jedem Commit aus. Es kennzeichnet:

• {% include %} Aufrufe (veraltet)
• Fehlende alt Attribute auf Image-Tags
• img_url Nutzung (ersetzt durch image_url)
• Schleifen ohne limit:
• Fehlender content_for_header in theme.liquid

Die Theme Inspector Überlagerung zeigt Liquid-Rendering-Zeiten direkt auf Ihrem Storefront, damit Sie sehen können, welche Abschnitte, Snippets und Schleifen langsam sind, bevor Sie optimieren.

Ab 2026 ermöglicht Shopifys Dev MCP auch, dass AI-Agenten validiertes Liquid-Code generieren und Section-Schemas gerüsten können, was Boilerplate-Arbeit beschleunigt. Behandeln Sie AI-Ausgabe als ersten Entwurf und überprüfen Sie immer auf Shopify-spezifische Fallstricke.

App-Ersatz: Was Liquid nativ kann

Das Ersetzen von 3-5 Apps pro Theme durch native Liquid-Abschnitte spart typischerweise 100-300 Dollar pro Monat und entfernt 150-600 KB JavaScript von Drittanbietern. App-Übergewicht kostet 40-200 ms pro Drittanbieter-Skript auf Mobilgeräten, was genau der Bereich ist, der Lighthouse-Mobile-Scores von 80 auf 60 fallen lässt.

Funktionen, die Liquid nativ handhabt (keine App erforderlich):

• Countdown-Banner mit Schema-kontrollierten Enddatumswerte
• FAQ-Akkordeons mit Block-pro-Frage-Architektur
• Zeugnis-Gitter mit Sternbewertungen und Metafeld-gespeicherten Bewertungen
• Sticky Add-to-Cart-Balken via IntersectionObserver plus ein Liquid-Produktabschnitt
• Feature-Vergleichstabellen mit JSON-Metafeldern
• Vorher/Nachher-Bild-Slider mit Vanilla JS und zwei Image-Picker-Einstellungen

Abschnitte schlagen Apps auf drei Achsen: Sie rendern vor dem Paint (kein Layout-Shift), sie leben in Ihrem Theme-Repository (Versionskontrolle ist trivial) und sie offenbaren Schema-Einstellungen, damit Händler Inhalte ohne einen Entwickler bearbeiten können.

Liquid vs. Hydrogen: die ehrliche Antwort

Liquid bleibt die richtige Wahl für die überwiegende Mehrheit der Shopify-Shops, da es schnellere Entwicklung, niedrigere Wartungskosten und vollständigen Zugriff auf Shopifys CDN und Hosting-Infrastruktur liefert. Headless (Hydrogen/Oxygen) macht Sinn für Marken mit dedizierten Frontend-Engineering-Teams und komplexen Multi-Storefront-Architekturen.

Gehen Sie headless, wenn Sie ein dediziertes Frontend-Team haben, drei oder mehr Storefronts, die ein Backend teilen, oder ein Interaktionsmodell, das Liquid wirklich nicht erreichen kann. Für alle anderen lautet die Frage nicht "Liquid oder Hydrogen", sondern "Wie schreibe ich Liquid, das mich in zwei Jahren nicht beschämt?"

Wenn Sie Hilfe bei der Überprüfung oder beim Aufbau eines Themes nach diesen Standards benötigen, siehe die Shopify Theme Developer Service-Seite, oder erkunden Sie Shopify Speed Optimization, wenn Performance der spezifische Engpass ist.

Quick-Reference Cheat Sheet

Ausgabesyntax

{{ product.title }}              {# String-Ausgabe #}
{{ product.price | money }}      {# gefilterte Ausgabe #}
{{- product.title -}}            {# Whitespace entfernt #}

Steuerungsfluss

{% if %} / {% elsif %} / {% else %} / {% endif %}
{% unless %} / {% endunless %}
{% case product.type %}{% when 'Apparel' %}...{% endcase %}

Schleifen

{% for item in array limit: 24 offset: 0 %}
  {{ forloop.index }} von {{ forloop.length }}
{% else %}
  Keine Elemente gefunden.
{% endfor %}

Am meisten verwendete Filter auf einen Blick

| money               {# währungssichere Preisausgabe #}
| image_url: width: X {# CDN-vergrößerte Bild-URL #}
| image_tag           {# vollständiges responsives <img> Tag #}
| metafield_tag       {# rendert Metafeld-Wert mit korrektem HTML #}
| where: 'key', val   {# Array ohne Schleife filtern #}
| map: 'property'     {# Eigenschaft aus Array von Objekten herausziehen #}
| json                {# sichere JSON-Ausgabe für Script-Tags #}
| t                   {# Übersetzungsschlüssel-Nachschlag #}
| handleize          {# String zu URL-sicherer Behandlung #}
| date: '%B %d, %Y'  {# formatierte Datumsausgabe #}

Markieren Sie die offizielle Liquid-Referenz neben diesem Beitrag. Die offiziellen Dokumente behandeln jede Objekteigenschaft und Filterparameter vollständig.