{"id":17414,"date":"2025-08-18T15:17:58","date_gmt":"2025-08-18T09:32:58","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17414"},"modified":"2025-09-24T11:23:42","modified_gmt":"2025-09-24T05:38:42","slug":"wie-funktioniert-shopify-liquid","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-funktioniert-shopify-liquid\/","title":{"rendered":"Wie funktioniert Shopify Liquid?"},"content":{"rendered":"\n<p>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 \u00fcber den Kunden usw. Es ist die Engine hinter den dynamischen Teilen jedes Shopify-Themes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wie funktioniert Liquid in einem Shopify-Theme?<\/h3>\n\n\n\n<p>Liquid verwendet Platzhalter, Logik und Schleifen, um dynamische Inhalte zu rendern. So funktioniert es:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Shopify ruft Daten aus Ihrem Shop ab (wie Produkttitel, Preise, Bilder).<\/li><li>Liquid f\u00fcgt diese Daten mithilfe spezieller Tags und einer speziellen Syntax in die HTML-Vorlage ein.<\/li><li>Das Ergebnis ist eine vollst\u00e4ndige HTML-Datei, die an den Browser gesendet wird.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wichtige Bestandteile von Fl\u00fcssigkeiten<\/h3>\n\n\n\n<p>Es gibt drei Haupttypen von Syntax in Liquid:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Objekte<\/strong><br>Objekte geben Daten aus dem Shopify-Shop aus. Sie sind in doppelte geschweifte Klammern eingeschlossen: <code>{{ }}<\/code> <br>Beispiel:<br><code>{{ product.title }}<\/code><\/li><li><strong>Tags<\/strong><br>Tags werden in geschweifte Klammern und Prozentzeichen eingeschlossen: {% %} Sie steuern die Logik und den Ablauf, beispielsweise Bedingungen und Schleifen. <br>Beispiel:<br><strong>If condition:<\/strong><br><code>{% if product.available %} This product is in stock. {% endif %}<\/code><br><br><strong>For loop:<\/strong><br><code>{% for product in collection.products %}<\/code><br><code> {{ product.title }} <\/code><br><code>{% endfor %}<\/code><\/li><li><strong>Filters<\/strong><br>Filter werden verwendet, um die Ausgabe zu \u00e4ndern. Sie wenden sie mithilfe des Pipe-Symbols auf Objekte an |. <br>Beispiel:<br><code>{{ product.price | money }}<\/code><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Fl\u00fcssigkeit in Aktion: Rendern einer Produktseite<\/h3>\n\n\n\n<p>Angenommen, Sie befinden sich auf einer Produktseite. Hier ist, was Liquid hinter den Kulissen tun k\u00f6nnte:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/07\/Screenshot_11.png\" alt=\"Shopify Code\" class=\"wp-image-15536\"\/><\/figure>\n\n\n\n<p>Dieser Code ruft dynamisch den Titel, das Bild und die Beschreibung des Produkts aus dem Backend von Shopify ab und blendet die Schaltfl\u00e4che \u201eIn den Warenkorb\u201c je nach Verf\u00fcgbarkeit ein oder aus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wo Sie Liquid Files sehen werden<\/h3>\n\n\n\n<p>Fl\u00fcssigkeit wird in fast jeder Datei eines Shopify-Themes verwendet:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>.Fl\u00fcssigkeitsdateien in den Ordnern \/templates, \/sections und \/snippets.<\/li><li>Es l\u00e4sst sich mit HTML und CSS kombinieren, um voll funktionsf\u00e4hige Webseiten zu erstellen.<\/li><li>Sie werden h\u00e4ufig Variablen wie {{ shop.name }}, {{ cart.total_price }}, usw.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Warum Fl\u00fcssigkeit verwenden?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Dynamischer Inhalt:<\/strong> L\u00e4dt automatisch neue Daten (z. B. Produktbestand, Preise).<\/li><li><strong>Wiederverwendbar:<\/strong>\u00a0Kann Arrays durchlaufen oder Bl\u00f6cke bedingt rendern.<\/li><li><strong>Themenfreundlich:<\/strong> Entwickelt, um Inhalte vom Design zu trennen, sodass Themen flexibel sind.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Was Liquid nicht kann<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Kein Backend-Zugriff<\/strong>: Liquid kommuniziert nicht direkt mit Datenbanken und f\u00fchrt auch keine serverseitigen Skripte wie PHP oder Node.js aus.<\/li><li><strong>Keine \u00c4nderungen in Echtzeit<\/strong>: \u00c4nderungen werden einmalig gerendert und an den Browser \u00fcbertragen. Keine dynamische Aktualisierung ohne JavaScript.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Abschlie\u00dfende Gedanken<\/h3>\n\n\n\n<p><a href=\"https:\/\/shopify.dev\/docs\/api\/liquid\">Shopify Liquid<\/a> ist eine hervorragende Ressource f\u00fcr die Erstellung dynamischer, variabler Storefronts, ohne sich zu tief in den Backend-Code einarbeiten zu m\u00fcssen. Von der Anpassung eines Themes bis hin zur Erstellung eines neuen Themes \u2013 das Verst\u00e4ndnis von Liquid ist f\u00fcr die Shopify-Entwicklung unerl\u00e4sslich.<\/p>\n\n\n\n<p>Fangen Sie klein an \u2013 optimieren Sie einen Produkttitel oder durchlaufen Sie eine Kollektion. Sobald Sie sich damit vertraut gemacht haben, werden Sie feststellen, dass Liquid Ihnen umfassende Kontrolle \u00fcber das Erscheinungsbild Ihres Shops bietet.<\/p>\n\n\n\n<p><strong>Bitte kontaktieren Sie uns unter\u00a0<a href=\"mailto:manish@bay20.com\" target=\"_blank\" rel=\"noreferrer noopener\">manish@bay20.com<\/a>\u00a0oder rufen Sie uns an unter\u00a0<a href=\"https:\/\/api.whatsapp.com\/send?phone=+918800519180&amp;text=Hi,%20I%20contacted%20you%20through%20your%20website.\" target=\"_blank\" rel=\"noreferrer noopener\">+91-8800519180<\/a>\u00a0\/\u00a0<a href=\"https:\/\/api.whatsapp.com\/send?phone=919582784309\" target=\"_blank\" rel=\"noreferrer noopener\">+91-9582784309<\/a><\/strong>\u00a0<strong>f\u00fcr jegliche Unterst\u00fctzung im Zusammenhang mit Shopify. Sie k\u00f6nnen auch die\u00a0<a href=\"https:\/\/www.bay20.com\/de\/shopify-entwicklungsunternehmen\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify-Entwicklungsseite<\/a>\u00a0um die von uns angebotenen Dienstleistungen zu pr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u00fcber den Kunden usw. Es ist die Engine hinter den dynamischen Teilen jedes Shopify-Themes. Wie funktioniert Liquid in einem Shopify-Theme? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17415,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,45],"tags":[],"class_list":["post-17414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","category-shopify"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17414"}],"version-history":[{"count":1,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17414\/revisions"}],"predecessor-version":[{"id":17416,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17414\/revisions\/17416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17415"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}