Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. eCommerce
Webdesign

Weiterentwicklung des Shopify-Themas

by
Length:LongLanguages:
This post is part of a series called Learn How to Build Themes for Shopify.
Getting Started With Liquid; Shopify’s Template Language

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In den ersten beiden Teilen dieser Serie stellte ich Ihnen die E-Commerce-Plattform von Shopify vor, erläuterte die wichtigsten Konzepte, diskutierte, wie Themen erstellt werden, und widmete mich einem tieferen Einblick in Liquid - die Shopify-Templatiersprache.

In diesem abschließenden Teil werden wir uns ansehen, wie Sie durch ein wenig tieferes Wissen über Liquid Ihre Themen noch flexibler machen können, so dass Sie reichhaltige und einfallsreiche Shopdesigns erstellen können.

Beginnen wir mit einem Blick darauf, wie wir "alternative Layouts" mit großer Wirkung einsetzen können.

Alternative Layouts

Eine der mächtigsten Funktionen von Liquid ist die Layout-Datei, die wir uns im ersten Teil angesehen haben. Ich beschreibe eine Layout-Datei oft als "Master-Vorlage". Normalerweise enthält diese Datei unsere HTML-Deklarationen, Branding, Navigation und Fußzeile - im Wesentlichen alle allgemeinen Elemente unserer Website, die auf jeder Seite erscheinen sollen.

Alle gerenderten Seiten in einem Shopify-Design basieren, sofern nicht anders angegeben, auf dieser Master-Vorlage. Standardmäßig ist das die Datei theme.liquid, die sich im Ordner layouts befindet. Unsere Mikrovorlagen, die sich im templates-Ordner befinden, werden an dem Punkt gerendert, an dem Shopify auf den {{content_for_layout}} Platzhalter für Flüssigkeiten in unserer Layoutdatei trifft.

Um Ihr Gedächtnis zu bewegen, ist hier ein Beispiel für ein grundlegendes Layout:

Wie in Teil 1 erwähnt, muss eine Layoutdatei in einem Shopify-Design zwei Liquid-Ausgabe-Tags enthalten, {{ content_for_header }} und {{ content_for_layout }}. Die erste wird von Shopify verwendet, um Code für Analysen hinzuzufügen und schnellen Zugriff auf den Admin-Bereich Ihres Shops zu ermöglichen. Die zweite {{ content_for_layout }} wird durch die entsprechende Vorlage aus unserem Vorlagenordner ersetzt, z. B. Die Vorlage product.liquid wird eingefügt, wenn wir eine Produktdetailseite anzeigen.

Layouts sind eine großartige Funktion und helfen uns, die Themen schön und trocken zu halten. Es kann jedoch vorkommen, dass sich die Elemente Ihrer Standardlayoutdatei ändern müssen. Vielleicht möchten Sie eine Splash-Seite erstellen, für die das "normale" Branding und die Navigation nicht erforderlich sind. Es ist möglich, dass Sie mit CSS die gewünschten Ergebnisse erzielen können. Wahrscheinlicher ist jedoch, dass Sie unterschiedliche Markups erstellen möchten. Hier kommen alternative Layouts ins Spiel.

Das Erstellen eines alternativen Layouts ist sehr einfach. Als Erstes müssen Sie eine neue Datei erstellen und ihr einen relevanten Namen und die Erweiterung .liquid geben. Der Dateiname liegt bei Ihnen. Wichtig ist, dass Sie es im Ordner layouts in Ihrem Designverzeichnis speichern. In dieser Datei können Sie den gewünschten HTML-Code (z. B. HTML-Deklarationen, CSS, JS-Links usw.) zusammen mit den beiden oben genannten Platzhaltern platzieren.

Um diese Layoutdatei zu verwenden und die standardmäßige theme.liquid-Layoutdatei effektiv zu überschreiben, verwenden wir die folgende Liquid-Syntax in einer der Micro-Vorlagen:

Hinweis: Sie müssen die Erweiterung .liquid nicht angeben. Wenn nun die relevante Micro-Vorlage von Shopify verarbeitet wird, wird sie mit alternative.liquid als Layout-Datei gerendert.

Produktspezifische Vorlagen

Auf die gleiche Weise, in der wir bestimmte Layouts vorgeben können, die auf unsere Mikrovorlagen angewendet werden sollen, können wir Liquid Logic verwenden, um verschiedene Produktvorlagen zu rendern. Es gibt eine Reihe von Möglichkeiten, dies in Liquid zu erreichen - meine bevorzugte Methode ist die Verwendung von Produktgriffen. Wenn Sie jemals WordPress verwendet haben, können Sie sich einen Produkt-Handgriff wie einen Slug vorstellen. Hier eine typische Produkt-URL von der A Book Apart-Website:

In diesem Beispiel handelt es sich bei dem Produkt-Handle um responsive-web-design - das letzte Element der URL. Produkt-Handles werden automatisch für Sie erstellt, wenn Sie ein Produkt im Shopify-Administrator hinzufügen. Sie basieren auf dem von Ihnen eingegebenen Namen. Großbuchstaben werden durch Kleinbuchstaben und Leerzeichen durch Bindestriche ersetzt. Sie können sie natürlich außer Kraft setzen, wenn Sie es brauchen.

Jedes Mal, wenn Shopify eine Produktdetailseite rendert, wird standardmäßig die product.liquid micro template verwendet. Nehmen wir an, wir möchten eine andere Produktseite anbieten, nur damit Ethans Buch sie wirklich hervorhebt. Dazu müssen wir einige Änderungen an der Vorlage product.liquid vornehmen.

Ethan Marcottes Buch Responsive Web Design auf der Shopify-Website von A Book Apart

Da das product.liquid-Template Zugriff auf alle Daten hat, die sich auf das aktuell angesehene Produkt beziehen, können wir die folgende Frage mit einer Liquid-if-Anweisung stellen:

Durch das Hinzufügen der if-Anweisung, die wir uns in Teil zwei dieser Serie angesehen haben, können wir steuern, welches Markup gerendert wird. Einfach ausgedrückt, wenn product.handle gleich "responsive-web-design" ist, fügen wir die Datei responsive-web-design.liquid ein. Ist dies nicht der Fall, rendern wir einfach den Code, den wir bereits in unserer product.liquid-Vorlage haben.

Die Kraft der Schnipsel

Dieses Beispiel führt uns in Liquid Schnipsel ein. Snippets befinden sich im passend benannten snippets-Ordner und werden bei Verwendung des Liquid-Tags {% include%} ohne die Erweiterung .liquid referenziert.

Wie der Name vermuten lässt, wird bei Verwendung von {% include%} ein Teil des Codes in Ihre Micro-Vorlage oder Layout-Datei eingefügt. Im obigen Beispiel würde die Datei die alternative Markierung enthalten, die für das Präsentieren von Ethans Buch erforderlich ist, einschließlich des gesamten Liquid-Codes, um die Daten über das Produkt in die Vorlage zu ziehen.

Natürlich können Sie festlegen, dass diese bestimmte Vorlage zusätzlich zu Ethan's für ein anderes Buch verwendet wird. Hier ist eine Möglichkeit, das zu erreichen:

In diesem Fall möchten Sie möglicherweise Ihr Snippet in ein passenderes Format umbenennen, z. B. product-showcase.liquid.

Es ist erwähnenswert, dass Sie keine Ordner in Ihrem Snippets-Verzeichnis verschachteln können. Daher neige ich dazu, meinen Dateien ihre Funktion voranzustellen:

  • product-responsive-web-design.liquid
  • product-showcase.liquid
  • collections-books.liquid

Durch die Verwendung dieser Namenskonvention wird das Auffinden von Snippets erheblich erleichtert, insbesondere wenn Sie sie häufiger verwenden.

Ein Beispiel dafür, wie ich auf der 8 Faces-Site Ausschnitte verwendet habe, um logische Bedenken zu trennen

Wann werden Snippets verwendet?

Ich benutze Schnipsel auf zwei verschiedene Arten. Zum einen, um Code in überschaubare Abschnitte zu unterteilen, und zum anderen für Elemente einer Seite, die ich wiederverwenden muss, beispielsweise einen Paginierungsblock.

Als Faustregel gilt, wie ich wähle, wo Code hinzugefügt werden soll:

  • Erscheint auf jeder Seite - Layoutdatei
  • Wird auf mehr als einer Seite angezeigt - Snippet-Datei
  • Erscheint auf einer Seite - Mikroschablone

Micro Templates als Controller

Ein weiterer Trick, den ich mit großem Erfolg angewendet habe, ist die Behandlung einer Mikrovorlage als Ansichtssteuerung - eine Idee, die ich aus vielen MVC-Frameworks übernommen habe, die ich verwendet habe. Das könnte ein neues Konzept für Sie sein, schauen wir uns das genauer an.

In den obigen Beispielen verwenden wir Liquid Logic, um nach einem bestimmten Produkt-Handle in der product.liquid micro template zu suchen. Wenn die Antwort auf unsere if-Anweisung wahr ist, fügen wir ein Snippet hinzu. Andernfalls rendert Shopify den HTML-Block, der zwischen den Tags {% else %} und {% endif %} enthalten ist.

Für manche mag dies etwas unordentlich erscheinen und kann im Laufe der Zeit schwer lesbar werden, insbesondere wenn Ihr Standardprodukt product.liquid markup wächst. Um die Verwaltung zu vereinfachen, können Sie einfach unser Standard-Markup aus der product.liquid-Vorlage entfernen und ein Snippet dafür erstellen - ich bezeichne das als product-default.liquid.

Nach diesem Ansatz könnte unsere product.liquid-Datei folgendermaßen geändert werden:

Wenn Ihre Anforderungen wachsen, kann diese Datei natürlich auch weitere Prüfungen und relevante Dateien enthalten, je nach den Ergebnissen. Die Optionen sind unbegrenzt.

Es ist erwähnenswert, dass nicht nur Produkte in Shopify behandelt werden, sondern auch Sammlungen und Seiten. Wenn Sie den gleichen Ansatz für Sammlungen verwenden, können Sie Folgendes in unserer Sammlung von collections.liquid durchführen:

Verwenden case an Stelle von if elsif else

Diese Methode funktioniert sehr gut, wenn wir nur nach einem bestimmten Handle suchen möchten, sei es ein Produkt oder eine Sammlung. Was aber, wenn wir das auf mehrere Produkte oder Sammlungen erweitern möchten?

Wir haben zwei mögliche Ansätze, der erste ist die Erweiterung unserer if-Anweisung durch die Verwendung von elsif. Hier ist ein Beispiel:

In diesem Beispiel wird nach zwei Produkt-Handles gesucht. Nur wenn beide wahr sind, wird das product-default.liquid-Snippet gerendert.

Es ist möglich, mehrere elsif-Anweisungen in Liquid zu verwenden, es kann jedoch etwas ausführlicher werden. Eine Alternative, und ich denke, ein besserer Ansatz ist case. Hier ist das obige Beispiel überarbeitet:

Wir können auch einen unscharfen Vergleich durchführen, indem Sie den Operator Liquid contains verwenden. Angenommen, wir möchten, dass jedes Produkt, das das Wort im Griff hat, ein anderes Snippet verwendet. So können wir es mit einer einfachen Liquid-if-Anweisung angehen:

Die Verwendung dieser Methode würde bedeuten, dass wir unsere Vorlage nicht bearbeiten müssen, um ein neues elsif oder case für weitere Bücher hinzuzufügen, die im Titel "responsive" enthalten.

Diese Ansätze können auch innerhalb der Mikroschablonen Ihres Themas verwendet werden. Sie können es zum Beispiel verwenden, um Elemente programmatisch anzuzeigen und auszublenden. Beispiele hierfür können Verkaufsausweise, Sonderangebote und verwandte Produkte sein.

Nützliche CSS-Haken erstellen

Griffe können auch sehr nützlich sein, wenn Sie mit CSS und JavaScript arbeiten. Viele von uns verwenden die Body-Klasse für CSS- und JavaScript-Hooks. Wie in WordPress ist es ziemlich einfach, unserem Body-Element in Shopify eine Reihe nützlicher Klassen hinzuzufügen.

Hier sind ein paar Ideen:

Fügen Sie den aktuell gerenderten Vorlagennamen der Body-Klasse hinzu:

Beachten Sie, dass wir den Handle-Filter verwenden, um unsere Ausgabe zu bereinigen. Einige Beispiele dafür sind:

Darauf aufbauend möchten wir möglicherweise den aktuellen Produkt-Handle in unsere Body-Klasse aufnehmen. Um die Dinge ordentlich und aufgeräumt zu halten, können wir eine if-Anweisung verwenden, um das Produkt-Handle nur dann hinzuzufügen, wenn wir ein Produkt anzeigen:

Beachten Sie, wie das Leerzeichen vor dem {{product.handle}}-Ausgabe-Tag eingefügt wird.

Einige Themes fügen dem Body-Element außerdem den aktuellen Seitentitel in Form einer id hinzu. Aufbauend auf dem obigen Code würde unser Code nun folgendermaßen aussehen:

Für eine gute Maßnahme könnten wir sogar einen Check für Sammlungen hinzufügen und das auch hinzufügen:

Es ist ziemlich einfach, diese Logik für Ihre eigenen Zwecke anzupassen.

Bisher haben wir untersucht, wie wir mit Liquid mehr als nur Daten ausgeben und den Fluss unserer Vorlagen steuern können. Schauen wir uns nun ein weiteres großartiges Feature von Shopify an - Theme-Einstellungen.

Themen Einstellungen

Mit den Designeinstellungen können Designentwickler jedem Benutzer eine einfache Möglichkeit bieten, das Erscheinungsbild seines Shops anzupassen, ohne HTML oder CSS ändern zu müssen. Das macht die Themen sehr flexibel - ein Plus, wenn Sie jemals darüber nachdenken, ein Thema über den Shopify-Themenspeicher oder über Themeforest zu verkaufen.

Um Designeinstellungen in unserem Shopadministrator verfügbar zu machen, müssen Sie eine Datei mit dem Namen settings.html erstellen und im Ordner config speichern. Bitte beachten Sie die Erweiterung. Dies ist die einzige Datei mit der Erweiterung .html in Ihrem Shopify-Design.

Es gibt unendlich viele Verwendungsmöglichkeiten für Designeinstellungen, aber häufig wird die Hintergrundfarbe der gesamten Site geändert. Hier ist ein Codebeispiel, das wir besprechen können:

Das wichtigste Element ist hier die input. Beachten Sie, dass wir ihm ein id- und name-Attribut von bg_color und eine color-Klasse gegeben haben. Diese Klasse ist wichtig. Wenn wir unsere Theme-Einstellungen in der Admin-Ansicht anzeigen, wird Shopify anstelle unserer Eingabe einen praktischen Farbwähler darstellen.

Einmal gemasterte Theme-Einstellungen sind eine erstaunlich leistungsstarke Funktion der Shopify-Themes

Sie werden auch feststellen, dass ich bei #FFF einen Wert festgelegt habe. Wenn wir unsere Designeinstellungen in unserer CSS-Datei verwenden, wird dies der Standardwert. Ohne diesen Standardwert wird ein leerer Wert verwendet. Das ist eine Gotcha ich sehe viel!

Theme-Einstellungen stehen uns weltweit zur Verfügung, sodass wir ihren Wert in all unseren Vorlagen und Layout-Dateien ausgeben können. Das beinhaltet unsere CSS- und JavaScript-Dateien. Um auf eine Einstellung zu verweisen, in diesem Fall für unsere Hintergrundfarbe, verwenden wir folgende Syntax:

Beachten Sie, dass wir die id der Eingabe verwenden, um ihren Wert herauszuholen. Aus diesem Grund muss die id jedes Eingangs eindeutig sein.

Theme-Einstellungen verwenden

Um Theme-Einstellungen in unserer CSS-Datei zu verwenden, müssen wir .liquid an unsere CSS-Datei anhängen. Wenn unsere Datei screen.css heißt, ändern Sie sie einfach in screen.css.liquid.

Sobald wir das getan haben, können wir in unserer CSS-Datei Folgendes tun:

Wenn Shopify unsere CSS-Datei bereitstellt, werden unsere Liquid-Ausgabe-Tags durch den in den Designeinstellungen des Shopify-Administrators angegebenen Wert ersetzt. Hoffentlich hebt dieses Beispiel die Notwendigkeit hervor, den Wert vorzugeben!

Neben der Eingabe von Text und numerischen Werten in Designeinstellungen können Sie Dateien hochladen, boolesche Werte mit Kontrollkästchen aufzeichnen und Auswahllisten zum Auswählen eines Werts aus einer Liste anbieten.

Das obige Beispiel stammt von der 8 Faces-Website, an der ich 2013 gearbeitet habe. Wir verwenden diese Einstellung, um die Logik auf der Startseite zu steuern, hier ist wie:

Das Hinzufügen von Dateien ist etwas komplizierter, also werfen wir einen kurzen Blick darauf. Das Markup ist jedoch ziemlich einfach:

Hier sind einige Dinge zu beachten, erstens das Namensattribut, das in unserem Beispiel home-page-hero.jpg ist. Unabhängig vom Namen der Datei, die Sie hochladen, wird sie in home-page-hero.jpg umbenannt.

Das zweite, was es zu wissen gilt, ist die Erweiterung in unserem Fall .jpg. Unabhängig vom Dateityp, den Sie hochladen, versucht Shopify, die Datei in den angegebenen Typ zu konvertieren. Wenn das nicht möglich ist, wird ein Fehler gemeldet. Im Gegensatz zu Produktbildern werden Dateien schließlich immer im Asset-Ordner des Themas gespeichert.

So können wir das Image unserer Homepage in unserer Vorlage darstellen:

Hier verwenden wir den asset_url-Filter, um den vollständigen Pfad zum Image auf dem Shopify-CDN hinzuzufügen. Wenn Sie mit diesem Filter nicht vertraut sind, können Sie in Teil zwei dieser Serie mehr darüber erfahren.

Ich empfehle Ihnen dringend, ein oder zwei kostenlose Themen aus dem Shopify-Themenspeicher herunterzuladen und die Vorlageneinstellungsvorlage zu analysieren, da sie ein großartiger Baustein für Ihre eigene Themenentwicklung sind.

Shopify Toolkit

Es ist zwar fair zu sagen, dass Sie zum Erstellen von Themen wirklich nur einen Texteditor und einen Shopify-Partner-Account benötigen. Es gibt jedoch ein paar Goodies, die es wert sind, darüber nachzudenken.

Wenn Sie die Serie verfolgt haben, haben Sie sich möglicherweise für ein kostenloses Shopify-Partnerkonto angemeldet. Ich empfehle immer, das "falsche Gateway" in Ihren Entwicklungsgeschäften einzurichten. Sie finden dies in der Registerkarte Einstellungen unter Kasse im Shopify-Administrator. Wenn Sie diese Option aktivieren, können Sie eine vollständige Transaktion präsentieren und alle zugehörigen E-Mail-Benachrichtigungen generieren, die generiert werden. Es lohnt sich zu bedenken, dass Sie all diese Liquid-Techniken auch in Ihren Benachrichtigungs-Emails effektiv einsetzen können.

Ein weiteres sehr nützliches Dienstprogramm ist der Shopify Desktop Theme Editor für Mac. Nach der Installation werden Ihre Dateiänderungen nahtlos mit Ihrem Entwicklungs- oder Live-Shop synchronisiert. Wenn Sie Mac, Windows oder Linux verwenden, können Sie auch das Befehlszeilenprogramm Shopify-Design-Gem installieren, um Ihre lokalen Dateien mit Ihrem Entwicklungsspeicher zu synchronisieren.

Der Shopify Desktop Theme Editor für Mac ermöglicht die problemlose Dateisynchronisierung zwischen Ihrem lokalen Dateisystem und Ihrem Geschäft

Wenn Sie ein TextMate-Benutzer oder ein Fan von SublimeText sind, möchten Sie möglicherweise eine Kopie der Liquid-Erweiterung installieren, die die Syntaxhervorhebung für Liquid behandelt.

Thema Inspiration

Im Shopify-Themenspeicher finden Sie kostenlose Themen, die Sie herunterladen und von denen Sie lernen können. Wenn Sie jedoch Ihr eigenes Thema starten möchten, bevorzugen Sie vielleicht etwas mehr als meine eigene Boilerplate, die auf GitHub verfügbar ist.

Ressourcen

Zum Abschluss finden Sie hier einige Auswahlmöglichkeiten, die Sie bei der Entwicklung Ihres Shopify-Themas unterstützen:

  • Mark Dunkleys Spickzettel - Jede Vorlagenvariable und flüssige Logik, Filter und Ausgabe-Tag, die Sie jemals brauchen werden.
  • Shopify-Themendokumentation - Kürzlich überarbeitet und ein hervorragender Bezugspunkt für das Erstellen der Themen
  • E-Commerce-Foren von Shopify - Es werden viele Themen behandelt, die von der Einrichtung eines Geschäfts bis zum Erstellen von Themen reichen und Tipps und Hinweise für ein erfolgreiches Online-Geschäft enthalten

Nächste Schritte

Shopify ist eine großartige und lohnenswerte Plattform, für die Design entwickelt werden kann, mit dem zusätzlichen Vorteil, den Liquid in anderen Werkzeugen wie Mixture und SiteLeaf verbreitet findet. Wir haben viel über diese drei Tutorials berichtet. Ich hoffe vor allem, dass Sie es interessant und nützlich gefunden haben und dass die hier vorgestellten Ideen es Ihnen ermöglichen, großartige E-Commerce-Erfahrungen für Sie und Ihre Kunden aufzubauen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.