Das Design deines Shopify-Shops basiert auf einem sogenannten Theme. Davon hat Shopify mittlerweile eine große Auswahl im Repertoire, nicht wenige auch kostenlos. Aber selbst das schickste Theme möchte man eventuell an die eigenen Bedürfnisse anpassen. Die meisten der erfolgreichsten Shopify Shops nutzen selbstentwickelte Themes, oder haben vorhandene Themes sehr stark angepasst. Dafür muss man die Scriptsprache Liquid verstehen und beherrschen. Zum Einstieg haben wir eine Orientierungshilfe geschrieben, dank der die Logik von Liquid leicht verständlich nachzulesen ist.
Grundsätzlich arbeiten wir im Theme mit HTML und bauen damit alle statischen Elemente. Wer also mit Liquid arbeiten möchte, sollte sich mit der Auszeichnungssprache HTML auskennen. Liquid kommt immer dann zum Einsatz, wenn wir einzelne Teile dynamisch darstellen wollen. Man kann sich Liquid-Tags also als Platzhalte vorstellen, die Shopify entsprechend mit Inhalten füllt.
Syntax von Liquid
Liquid lässt sich ganz leicht von anderen Sprachen unterscheiden. Dateien im Shopify-Theme enden ungekürzt mit „.liquid“. Unabhängig davon erkennt man Tags und Objekte ganz einfach an geschwungenen Klammern. Dabei gibt es zwei charakteristische Tags, die verschiedene Funktionen beinhalten:
- Für die Ausgabe verwenden wir doppelte geschweifte Klammern: {{ }}
- Logische Elemente wie if-Anweisungen werden mit {% %} gekennzeichnet.
Objekte, Filter und Tags
Die Scriptsprache ist zwar einfach gestaltet, aber in ihrer Tiefe sehr mächtig. Für die Übersichtilichkeit verfügt Liquid über drei Hauptfunktionen: Objekte, Tags und Filter. Mit ihrer Hilfe wird das gesamte Shopify-Theme dynamisch dargestellt.
Shopify Objekte
Objekte, in anderen Scriptsprachen besser als Variablen bekannt, stehen für einen oder mehrere Werte. Sie sind Platzhalter für viele verschiedene Inhalte. Sowohl Texte, Zahlen, Ergebnisse aus Berechnungen oder auch aus Datenbankabfragen können mit Objekten in Shopify dargestellt oder weiterverarbeitet werden. Da sie als Daten abgerufen werden, wird ein Objekt in doppelten geschweiften Klammern dargestellt. Dabei wird in der Syntax erst das Objekt genannt und dann, getrennt von einem Punkt, die darauffolgende Eigenschaft. Für den Titel einer Seite kann das beispielsweise so aussehen: {{ page.title }} Dabei ist page das Objekt und title die Eigenschaft des Objekts, das ausgegeben werden soll.
Filter
Mithilfe von Filtern können wir die Ausgabe von Objekten modifizieren. Um einen Filter zu definieren, benötigen wir eine sogenannte Pipe: „|“. Wir nehmen noch einmal das Beispiel {{ page.title }}. Wenn wir nun sichergehen wollen, dass der Titel in Großbuchstaben ausgegeben wird, können wir den Filter uppercase nutzen: {{ page.title | uppercase }}.
Filter können aber noch viel komplexer werden und sind, wenn man sie kennt, sehr nützlich. Mit append können wir beispielsweise Elemente, inklusive Objekte, an ein Element anhängen und mit except einen Auszug eines Objekts ausgeben.
Tags
Logiken werden als Tags dargestellt. Dabei handelt es sich um die Elemente mit einer geschweiften Klammer und einem Prozentzeichen. Sie werden häufig verwendet, um Bedingungen zu verfassen. Dadurch können Elemente beispielsweise nur dargestellt werden, wenn vordefinierte Bedingungen erfüllt sind.
Ein sehr typisches Beispiel für einen solchen Tag ist die Abfrage, ob überhaupt Inhalte bestehen. Das wird mit {% if page.content.size > 0 %} definiert. Für eine if-Anweisung reicht es den Tag innerhalb der Klammer mit if zu beginnen. Danach folgt das Objekt samt Eigenschaften, genau so wie in den Objekten. Hier schauen wir uns das Objekt Seite an und prüfen die Eigenschaft Inhalte. Diese Eigenschaft verfügt noch über eigene Parameter, hier die Größe. Ist der Inhalt größer als 0, wird dank des Tags etwas dargestellt. Was genau, müssen wir danach festhalten. Der Tag dient nur der Abfrage, nicht der Darstellung. Dafür müssten wir auf ein Objekt zurückgreifen.
Beispiel Liquid
Grundsätzlich empfehlen wir das aktive Theme nicht einfach zu bearbeiten, sondern ein Duplikat davon anzulegen. Dazu gehst du im Backend deines Stores auf Themes und klickst auf „Actions“. Im Kontextmenu kannst du dann mit „Duplicate“ eine Kopie des Themes erstellen und sorgenfrei bearbeiten.
Für ein Beispiel einer auf Liquid basierenden Section kannst du auch diesem Beitrag von uns folgen: Shopify Section unglaublich einfach selbst erstellen
