Blog für Webdesign und Webentwicklung

Mehr als Drag & Drop: Wie du den Code von Shopify-Themes anpasst

Shopify bietet fertige Themes (so nennen wir Designvorlagen) für viele unterschiedliche Branchen und Geschäftsmodelle. Sie lassen sich einfach konfigurieren, sodass Händler schnell damit starten können. Aber was ist, wenn man ein individuelles Layout benötigt, um seinen Shop bestmöglich in Szene zu setzen?

Hier kommt die Theme-Sprache Liquid ins Spiel: Sie erlaubt es dir, den zugrundeliegenden Code deines Shops genau nach deinen Bedürfnissen anzupassen.

Was sind überhaupt Shopify Themes?

Ein Theme ist grundsätzlich eine Sammlung von Dateien, die das Look-and-Feel eines Onlineshops definieren. Ein einzelner Shop kann dabei eine Reihe an Themes haben - bis zu 50 um genau zu sein. Das ist sinnvoll, den damit kannst du mit unterschiedlichen Themes experimentieren, sie verändern und sie live schalten, wenn du damit vollkommen zufrieden bist.

Im Theme-Store von Shopify findest du Themes in Hülle und Fülle, von sehr leichtgewichtigen Varianten, mit denen du viele Produkte gleichzeitig präsentieren kannst, bis zu komplexen Themes mit vielen Bildern und Textinhalten ist alles dabei. Und das beste daran: Du kannst jedes Theme vor der Veröffentlichung bzw. vor dem Kauf in einer Live-Vorschau überprüfen. So stellst du sicher, dass du genau die richtige Entscheidung für deinen Shop und damit deine Kunden triffst.

Die Struktur von Themes

Die wichtigsten Dateien im Theme sind die Liquid-Dateien (was genau es mit Liquid auf sich hat, erklären wir weiter unten): Sie bestimmen das Aussehen bzw. das Verhalten der einzelnen Bereiche deines Shops, also beispielsweise die Produktdetail- oder die Warenkorbseite. Außerdem gibt es noch eine Reihe weiterer Dateien, wie Stylesheets (CSS) und Javascript-Bibliotheken, die in Summe das Theme ausmachen.

Schauen wir uns das ganze mal etwas genauer an: Wenn du im Admin deines Shops auf Vertriebskanäle - Onlineshops - Themes klickst, erreichst du die Theme-Verwaltung. In deinem aktiven Theme gelangst du über Aktionen - Code bearbeiten zum Online-Code-Editor. Dort kannst du direkt auf sämtlichen Code deines Themes zugreifen und ihn nach deinen Vorstellungen anpassen.

Die Quelldateien jedes Themes in Shopify sind sieben Unterordnern sortiert:

  • Assets enthält alle im Theme verwendeten statischen Dateien, einschließlich Bilder, Stylesheets und Javascript-Dateien.
  • In Config findest du zwei JSON-Dateien, die den Abschnitt "Theme anpassen" in deinem Shopify-Shop steuern. So kannst du einfach Optionen für das Theme erstellen.
  • Layouts enthält unter anderem das "theme.liquid"-Template. Das ist ein Wrapper, in dem andere Templates eingebunden werden, und in dem etwa Header und Footer definiert werden.
  • Mit den Dateien in Locales kannst du Inhalte deines Themes in die gewünschten Sprachen übersetzen.
  • Sections sind wiederverwendbare Module, die angepasst und im Theme unterschiedlich eingesetzt und sortiert werden können. Du kannst sie dann im Backend einfach ohne Programmierkenntnisse anpassen.
  • In Snippets sind alle Liquid-Snippet-Dateien versammelt. Das sind kleine Code-Schnippsel, die du über den "include"-Befehl in andere Templates integrieren kannst.
  • In Templates findest du alle anderen Liquid-Templates. Templates enthalten üblicherweise eine Reihe von Snippets, und sie werden im -Bereich in der Datei theme.liquid gerendered.

Objekte und Tags in Liquid

Jetzt haben wir die ganze Zeit über Liquid gesprochen... Aber:

Was ist eigentlich Liquid?

Liquid ist eine Open-Source-Template-Sprache, die von Shopify erfunden wurde. Es ist die Basis von Shopify-Themes und wird zum Laden dynamischer Inhalte im Frontend verwendet. Liquid wird seit 2006 bei Shopify eingesetzt und wird auch von vielen anderen Produkten wie Zendesk und Salesforce verwendet.

Liquid Cheat Sheet für Shopify

Wie du weiter oben schon gesehen hast, erinnern Liquid-Dateien an HTML-Dateien mit einigen Extra-Befehlen. Diese Befehle bzw. Tags erkennst du entweder an den doppelten geschweiften Klammern {{ }} oder an der Kombination {% %}. In beiden Fällen bringst du Liquid dazu, die benötigen Daten dynamisch auszulesen: Mit {{ product.title }} etwa greifst du auf das Produkt-Objekt zu und zeigst den Namen eines Produkts an, über {% if page.handle == 'about-me' %}Mach' irgendetwas ...{% endif %} steuerst du eine Anzeige, wenn deine Kunden eine bestimmte Seite deines Shops aufrufen.

Wie bei so vielen Dingen im Shopify-Universum raten wir dir auch bei der Theme-Entwicklung: einfach mal ausprobieren! Wir haben eine umfangreiche Online-Referenz für dich zusammengestellt, die wir laufend aktualisieren. Außerdem wirst du mit Sicherheit unser Liquid-Cheat-Sheet sehr nützlich finden, weil es sämtliche Objekte und Tags übersichtlich und kompakt zusammenstellt.

Nützliche Links für die Theme-Entwicklung

Und wo wir gerade dabei sind, auch diese Seiten bzw. Gruppen und Foren werden dir bei der Theme-Entwicklung sicher wertvolle Dienste leisten:

  • Liquid Code Examples: Sammlung von Theme-Komponenten
  • Shopify-Foren: Antworten von Shopify-Mitarbeitern, Experten und anderen Partnern
  • Shopify Partner Academy (erreichbar aus dem Partner-Dashboard)
  • Shopify Partner Slack-Gruppe

Last but not least: In diesem Webinar-Mitschnitt kannst du dir die Einführung zur Anpassung von Themes auch als Video anschauen - viel Spaß!



Which method is right for you?Über den Autor: Roman Zenner ist Technical Partner Manager bei Shopify. Er ist seit über zwanzig Jahren in den unterschiedlichsten Rollen im E-Commerce aktiv: Autor, Podcaster, Dozent und Projektleiter sind nur einige davon. Roman betreibt zudem den ShopTechBlog.

Bring dein Geschäft mit dem Shopify-Partnerprogramm voran

Mehr Informationen