Liquid – Die Template-Sprache von Shopify

Aktuelle Shopify-Themes bieten dir vielfältige Möglichkeiten zu individuellen Anpassungen deines Shopify-Storefronts – ganz ohne Programmierkenntnisse. Sobald deine Anforderungen aber spezieller werden, musst du ein wenig tiefer in die Materie eintauchen. Wenn du Lösungswege für bestehende Anforderungen an deinen Shopify-Shop recherchierst, triffst du mit Sicherheit schnell auf Liquid. Was Liquid ist und welche Möglichkeiten sich aus der Kombination von Liquid und Metafeldern ergeben, beleuchten wir in diesem Blogartikel.

Was ist Liquid?

Liquid ist eine Template-Sprache, die von Shopify entwickelt und in der Programmiersprache Ruby geschrieben wurde. Damit bildet Liquid die Grundlage aller Shopify-Themes und wird zur Einbindung dynamischer Inhalte, wie beispielsweise Produktdaten, im Shopify-Storefront benötigt. Von Shopify wird Liquid bereits seit 2006 produktiv eingesetzt. Mittlerweile wird es auch von einigen anderen Webanwendungen verwendet.

Liquid ist also eine essentielle Grundlage eines jeden Shopify-Shops. Wenn du Wert auf ein individuelles Erscheinungsbild und zielgruppenspezifische Funktionalitäten legst, kannst du mit Liquid eigene, vollkommen individuelle Shopify-Themes erstellen und – was in vielen Fällen noch spannender ist – das Theme deines Shopify-Shops hinsichtlich deiner Anforderungen gezielt anpassen.

Wichtige Grundlagen

Liquid wird vor allem zur dynamischen Ausgabe von Objekten und deren Eigenschaften verwendet. Dies lässt sich anhand eines Beispiels am einfachsten verdeutlichen. Stell dir also vor, du möchtest den Titel eines Produkts ausgeben. In diesem Beispiel handelt es sich bei dem Produkt um das Objekt und bei dem Titel um eine Eigenschaft des Objekts. Für die Ausgabe von Objekten und ihren Eigenschaften werden bei Liquid geschweifte Klammern gesetzt: Möchtest du stattdessen die Beschreibung einer Kategorie ausgeben, kannst du die Anforderung wie folgt umsetzen: Um sinnvolle Elemente zu schaffen, kannst du deine Liquid-Ausgaben in dein HTML, CSS oder JavaScript einfügen. Wenn du beispielsweise den Autor einer Shopseite in einem HTML-Paragraphen ausgeben möchtest, würde die Umsetzung so erfolgen: Die reine Ausgabe von Objekten und ihren Eigenschaften ist selbstverständlich in vielen Fällen nicht ausreichend, daher stellt Liquid eine Vielzahl von Filtern zur Verfügung, mit deren Hilfe du die Ausgaben modifizieren kannst. Wenn du zum Beispiel einen Preis eines Produktes als Währung ausgeben möchtest, kann du das wie folgt erledigen: Selbstverständlich kannst du mehrere Filter kombinieren. Solltest du also aus unerfindlichen Gründen den Titel einer Shopseite zunächst umkehren, dann in Kleinbuchstaben umwandeln und anschließend als MD5-Hash ausgeben wollen, stellt das absolut kein Problem dar: Auch wenn die Kombination von Filtern bereits sehr mächtig ist, gibt es viele Anforderungen, bei denen die Umsetzung den Einsatz von Steuerstrukturen erfordert. Mit Liquid sind alle gängigen Steuerstrukturen problemlos abbildbar. So kannst du beispielsweise if-elseif-else-Konstrukte wie folgt umsetzen: Falls du dich an dieser Stelle fragst, woher du wissen sollst, welche Filter zur Verfügung stehen, wie die Steuerstrukturen angewendet werden, welche Objekte existieren und wie die Eigenschaften der Objekte heißen, haben wir eine gute Nachricht für dich: Shopify bietet für Liquid nämlich nicht nur eine umfangreiche Dokumentation, sondern auch ein praktisches Cheat Sheet, so dass du die benötigten Informationen schnell und einfach lokalisieren kannst.

Beispielhafte Umsetzungen

Grundsätzlich kannst du Liquid an zwei Stellen im Shopify-Backend einsetzen: im Theme-Editor und direkt im Code deines Themes. Wir raten dir, immer zuerst eine Lösung über den Theme-Editor zu suchen, bevor du direkte Anpassungen am Code deines Themes vornimmst. Öffne dazu den Theme-Editor und lade das gewünschte Template. Jetzt kannst du, je nach Anwendungsfall, einen neuen Custom Liquid Abschnitt hinzufügen oder einen Custom Liquid Block innerhalb des Abschnitts verwenden. Sagen wir, du möchtest die Lieferzeit deiner Produkte auf der Produktdetailseite ausgeben – aber nur, wenn das Produkt auch auf Lager ist. Zur Umsetzung kannst du, wenn das Theme deines Shopify-Shops das ermöglicht, einfach in dem entsprechenden Abschnitt einen Custom Liquid Block hinzufügen und die Anforderung beispielsweise wie folgt erfüllen: In einigen Fällen ist eine Umsetzung im Theme-Editor nicht möglich, weil das Theme in dem betreffenden Abschnitt keine Custom Liquid Blöcke ermöglicht. Dies ist beispielsweise bei der Anpassung des Produktformulars der Fall. Stell dir vor, du möchtest Schulranzen verkaufen, auf denen der Name des Kindes gedruckt werden soll. Dazu müssen deine Kunden den Namen des Kindes am Produkt angeben können. Du könntest dafür selbstverständlich eine der unzähligen Personalisierungs-Apps einsetzen und damit monatliche Kosten und möglicherweise auch eine Erhöhung der Ladezeiten in Kauf nehmen – allerdings ist die Anforderung so einfach, dass sie auch über eine Anpassung des Codes deines Themes mit sehr überschaubarem Aufwand umsetzbar ist. Dazu öffnest du zunächst die Datei, die den Code des Produktformulars enthält. In dem Shopify-Standard-Theme “Dawn” ist beispielsweise der Code des Produktformulars in dem Abschnitt “main-product.liquid” enthalten. Jetzt musst du nur noch die richtigen Code-Zeilen lokalisieren und das folgende HTML-Snippet einfügen – und schon können deine Kunden den gewünschten Namen am Produkt angeben. Im letzten Beispiel wird deutlich, dass Liquid-Kenntnisse dir auch helfen, den Code von Shopify-Themes zu lesen. Diese Fähigkeit ist sehr wertvoll, denn nur wenn du das Theme deines Shopify-Shops auch tatsächlich verstehst, kannst du Anpassungen schnell und zielgerichtet durchführen, ohne schwerwiegende Fehler zu verursachen.

Liquid und Metafelder

Mit Metafeldern kannst du das Erscheinungsbild und die Funktionalität deines Shopify-Shops modifizieren, indem du beispielsweise zusätzliche Informationen zu Produkten, Varianten oder Kategorien hinzufügst. Stell dir vor, du betreibst einen Online-Shop für exklusiven Champagner und möchtest auf den Produktdetailseiten zusätzliche Informationen wie die Anbauart, die Region und den Jahrgang tabellarisch darstellen. Zur Umsetzung dieser Anforderungen legst du zunächst drei Metafelder mit der Inhaltsart “Einzeiliger Text” für Produkte an, hinterlegst dann die entsprechenden Werte an den jeweiligen Produkten und realisierst abschließend die Ausgabe per HTML und Liquid: Metafelder kannst du zum Beispiel auch nutzen, um zu steuern, ob bestimmte Informationen ausgegeben werden sollen. Stell dir vor, du möchtest auf deiner Produktdetailseite eine Seite mit Größenangaben verlinken – jedoch nur bei Textilprodukten. Du könntest natürlich ein zweites Produkt-Template anlegen, um die Anforderung zu erfüllen – dann müsstest du zukünftig aber auch zwei Produkt-Templates pflegen. Eleganter ist es daher, ein Metafeld auf Produktebene mit der Inhaltsart “wahr oder falsch” anzulegen und abhängig vom Status des Metafelds die Verlinkung auszugeben: Da Metafelder für unterschiedliche Shopify-Objekte eingerichtet werden können, diverse Inhaltsarten verfügbar sind und Liquid eine gleichsam flexible wie mächtige Syntax bietet, ist in vielen Fällen die Buchung einer Drittanbieter-App oder die Entwicklung einer Custom-App gar nicht notwendig, da du die Anforderungen bereits mit der Einrichtung von Metafeldern und der Anpassung oder Erweiterung des Themes per Liquid umsetzen kannst.

Fazit

Mit Liquid kannst du das Theme deines Shopify-Shops anpassen, um ein individuelles und überzeugendes Einkaufserlebnis für deine Kunden zu schaffen. Insbesondere in Kombination mit Metafeldern bietet Liquid umfassende Möglichkeiten, deinen Shop gezielt auf die speziellen Anforderungen deiner Zielgruppe anzupassen. Falls du dabei Unterstützung benötigst, komm gerne auf uns zu!