Wie funktioniert Shopify Liquid?

Wie funktioniert Shopify Liquid
Ecommerce, Shopify

Liquid ist eine von Shopify entwickelte Open-Source-Templating-Sprache, die in Ruby geschrieben ist. Liquid ist die Schnittstelle zwischen der HTML-Struktur Ihres Shopify-Themes und den dynamischen Daten Ihres Shops, wie z. B. Produktdaten, Informationen im Warenkorb, Informationen über den Kunden usw. Es ist die Engine hinter den dynamischen Teilen jedes Shopify-Themes.

Wie funktioniert Liquid in einem Shopify-Theme?

Liquid verwendet Platzhalter, Logik und Schleifen, um dynamische Inhalte zu rendern. So funktioniert es:

  • Shopify ruft Daten aus Ihrem Shop ab (wie Produkttitel, Preise, Bilder).
  • Liquid fügt diese Daten mithilfe spezieller Tags und einer speziellen Syntax in die HTML-Vorlage ein.
  • Das Ergebnis ist eine vollständige HTML-Datei, die an den Browser gesendet wird.

Wichtige Bestandteile von Flüssigkeiten

Es gibt drei Haupttypen von Syntax in Liquid:

  1. Objekte
    Objekte geben Daten aus dem Shopify-Shop aus. Sie sind in doppelte geschweifte Klammern eingeschlossen: {{ }}
    Beispiel:
    {{ product.title }}
  2. Tags
    Tags werden in geschweifte Klammern und Prozentzeichen eingeschlossen: {% %} Sie steuern die Logik und den Ablauf, beispielsweise Bedingungen und Schleifen.
    Beispiel:
    If condition:
    {% if product.available %} This product is in stock. {% endif %}

    For loop:
    {% for product in collection.products %}
    {{ product.title }}
    {% endfor %}
  3. Filters
    Filter werden verwendet, um die Ausgabe zu ändern. Sie wenden sie mithilfe des Pipe-Symbols auf Objekte an |.
    Beispiel:
    {{ product.price | money }}

Flüssigkeit in Aktion: Rendern einer Produktseite

Angenommen, Sie befinden sich auf einer Produktseite. Hier ist, was Liquid hinter den Kulissen tun könnte:

Shopify Code

Dieser Code ruft dynamisch den Titel, das Bild und die Beschreibung des Produkts aus dem Backend von Shopify ab und blendet die Schaltfläche „In den Warenkorb“ je nach Verfügbarkeit ein oder aus.

Wo Sie Liquid Files sehen werden

Flüssigkeit wird in fast jeder Datei eines Shopify-Themes verwendet:

  • .Flüssigkeitsdateien in den Ordnern /templates, /sections und /snippets.
  • Es lässt sich mit HTML und CSS kombinieren, um voll funktionsfähige Webseiten zu erstellen.
  • Sie werden häufig Variablen wie {{ shop.name }}, {{ cart.total_price }}, usw.

Warum Flüssigkeit verwenden?

  • Dynamischer Inhalt: Lädt automatisch neue Daten (z. B. Produktbestand, Preise).
  • Wiederverwendbar: Kann Arrays durchlaufen oder Blöcke bedingt rendern.
  • Themenfreundlich: Entwickelt, um Inhalte vom Design zu trennen, sodass Themen flexibel sind.

Was Liquid nicht kann

  • Kein Backend-Zugriff: Liquid kommuniziert nicht direkt mit Datenbanken und führt auch keine serverseitigen Skripte wie PHP oder Node.js aus.
  • Keine Änderungen in Echtzeit: Änderungen werden einmalig gerendert und an den Browser übertragen. Keine dynamische Aktualisierung ohne JavaScript.

Abschließende Gedanken

Shopify Liquid ist eine hervorragende Ressource für die Erstellung dynamischer, variabler Storefronts, ohne sich zu tief in den Backend-Code einarbeiten zu müssen. Von der Anpassung eines Themes bis hin zur Erstellung eines neuen Themes – das Verständnis von Liquid ist für die Shopify-Entwicklung unerlässlich.

Fangen Sie klein an – optimieren Sie einen Produkttitel oder durchlaufen Sie eine Kollektion. Sobald Sie sich damit vertraut gemacht haben, werden Sie feststellen, dass Liquid Ihnen umfassende Kontrolle über das Erscheinungsbild Ihres Shops bietet.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns an unter +91-8800519180 / +91-9582784309 für jegliche Unterstützung im Zusammenhang mit Shopify. Sie können auch die Shopify-Entwicklungsseite um die von uns angebotenen Dienstleistungen zu prüfen.