Die Template Sprache hinter Shopify: Liquid

Unternehmen, die einen Onlineshop erstellen möchten, finden bei Shopify eine große Auswahl an Themes, die sie für das Design ihres Shops verwenden können. Doch nicht immer passen die von Shopify angebotenen Themes zu 100% zu den Bedürfnissen, die die Unternehmen an ihren Shop stellen.

Grundsätzlich ist es mit etwas Know-How möglich, die von Shopify zur Verfügung gestellten Themes an die eigenen Anforderungen anzupassen. Dazu muss man sich jedoch mit Liquid – quasi der „Programmiersprache“ von Shopify – vertraut machen. Um Dir den Einstieg in diese Materie zu erleichtern, beschäftigen wir uns im heutigen Beitrag unseres Blogs also mit dem Code, der hinter Shopify steckt.

Um ein grundlegendes Verständnis von Liquid zu bekommen, sieh dir gerne unser YouTube Tutorial an:

Ein Einstieg: Die Basics zum Shopify Liquid Code

Obwohl es auch manchmal als Programmiersprache bezeichnet wird, handelt es sich bei dem vom Shopify entworfenen Liquid Code in erster Linie um eine Template-Sprache. Während Template Sprachen es dem Anwender in der Regel lediglich ermöglichen, durch den Einsatz von Templates Inhalte zu transformieren, verfügt Liquid Code u. a. über Logik, Ausgaben und Schleifen. Ihre drei Hauptfunktionen sind jedoch Objekte (objects), Tags (tags) und Filter (filters):

Liquid – objects

Objects repräsentieren verschiedene Elemente eines Shopify Shops und können dabei einen einzelnen Datenpunkt (z.B. einen Preis, ein Datum oder einen Vornamen) darstellen, können aber auch komplexere Elemente mit mehreren Datenpunkten abbilden (z.B. einen Warenkorb, einen Kunden oder einen Blog). Eine Liste mit allen verfügbaren Objekten findest du in der offiziellen Shopify Dokumentation.

Objekte werden in Liquid Code mit doppelt geschweiften Klammern dargestellt: {{ ‚objekt‘ }}.
Um die Eigenschaft eines Objekts anzugeben, wird in der Syntax von Liquid zunächst das Objekt und dann – getrennt durch einen Punkt – die jeweilige Eigenschaft angeben:

{{ 'objekt'.'eigenschaft' }}

// Beispiel

{{ product.price }}

Liquid – tags

Logiken werden im Liquid Code in sogenannten „Tags“ angegeben. Diese werden in der Syntax des Codes innerhalb von geschweiften Klammern mit Prozentzeichen angezeigt: {% ‚tag‘ %}.

Ein typisches Beispiel für eine solche Logik sind Bedingungen. So lässt sich mit einem Tag beispielsweise abfragen, ob Objekte bestimme Bedingungen erfüllen. Um eine Bedingung in Form einer if-Anweisung darzustellen, könnte die Syntax folgendermaßen lauten:

{% if 'objekt'.'eigenschaft'.'parameter' = 100 %}

{% endif %}

// Beispiel

{% if product.compare_at_price > product.price %}
   Das Produkt ist im Sale!
{% endif %}

Mit Tags können Bedingungslogiken abgebildet werden, aber auch Iterationen, Speichern von Informationen in Variablen und mehr. Alle Tags findest hier in der offiziellen Shopify Dokumentation zu Liquid Tags.

Liquid – filters

Die „Filter“ werden in Liquid Code zur Modifizierung der Objekte verwendet. So werden sie zum Beispiel zur Formatierung der Schrift verwendet. Filter werden in der Syntax von Liquid Code durch die Verwendung von Pipes dargestellt und stehen dem Objekt nach:

{{'object' | 'filter':'parameter'}

// Beispiele

// Input
{{ product.price | money_with_currency }}

// Output
$25 USD

// Input
{{ "learn!" | remove: "l" }}

// Output
earn!

Nicht selten werden Filter im Liquid Code auch mit Tags kombiniert. Durch diese Kombination ergibt sich die Möglichkeit, komplexe Logiken im Code darzustellen.

Filter stehen für viele Dinge zur Verfügung: Sowohl für Shopify-eigene Elemente wie Cart, Customer oder Collection als auch für typische Elemente aus der Programmierung wie String, Math oder Array. Alle verfügbaren Filter findest du in der Shopify Dokumentation.

Einsatzmöglichkeiten: Wie Du Liquid Code für Deinen Onlineshop nutzen kannst

Liquid steht als Open Source Code frei zur Verfügung und kann somit prinzipiell von jedem und sogar außerhalb von Shopify verwendet werden. Innerhalb von Shopify kannst Du den Code nutzen, um Deinen Shop individuell an Deine Bedürfnisse und Anforderungen anzupassen:

• Anpassen von Shopify Themes: Wie oben bereits erwähnt, kann Liquid Code u.a. zum Erstellen und Anpassen von Shopify Themes verwendet werden. Ein Theme ist i.d.R. in der textbasierten Auszeichnungssprache HTML geschrieben und kann durch Liquid-Abschnitte ergänzt werden, um Teile des Themes dynamisch zu gestalten.
• Anpassen von Shopify Emails: Ähnlich wie bei Themes hast Du mit Liquid auch die Möglichkeit, Deine Shopify Emails anzupassen und benutzerdefinierte Elemente wie z.B. Bilder in Deine Mails einzubauen.
• Hinzufügen von Funktionen/Web Apps: Um Deinem Onlineshop bestimmte Funktionen hinzuzufügen, kannst Du Shopify Apps verwenden. Da einige Apps ihren Code direkt in Themes einfügen, kannst Du mit Liquid den App-Code einiger Apps direkt in den Theme-Editor hinzufügen und anpassen.
• Programmieren von Themes/Funktionen: Wenn Du Liquid Code beherrschst und Dich auch sonst gut mit der Logik von Shopify auskennst, hast Du mit Liquid die Möglichkeit, Dir selbst ganz individuelle Themes und Apps für zu erstellen und so das Design und die Funktionalität Deines Shopify Shops individuell zu gestalten.

Solltest Du bisher wenig Erfahrung mit Programmiersprachen haben oder fehlt es Dir schlicht an der Zeit, Dich in Liquid einzuarbeiten, kannst Du auch auf Shopify-Experten zurückgreifen, die auf das Programmieren und Anpassen von Shopify Shops spezialisiert sind und Dir nach Deinen Vorgaben eine neue Version Deiner Website und Deines Shops erstellen können. Wenn Du bisher noch keine eigene Online-Seite haben, kannst Du Dir diese auch direkt von einem Shopify-Experten erstellen lassen. Das hat den Vorteil, dass Ihr den neuen Shop von Anfang an individuell an den Bedürfnissen Deines Unternehmens und Deiner Kunden ausrichten könnt.

‍