Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Lassen Sie uns ein Shopify-Thema entwerfen

by
Difficulty:IntermediateLength:LongLanguages:

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

Themeforest hat kürzlich einen neuen Bereich eröffnet, in dem Sie Themen für Shopify kaufen oder verkaufen können! Shopify ist eine gehostete E-Commerce-Lösung, die den Einstieg in ein Online-Geschäft erleichtert. Sie können ein Geschäft in wenigen Minuten einrichten.

Um den Shopify-Katalog von ThemeForest in Schwung zu bringen, erhalten die Autoren jeder akzeptierten Vorlage einen Bonus in Höhe von 100 US-Dollar - bis es zehn Vorlagen in der Kategorie gibt.

Shopify ist bekannt für seine Designflexibilität. Sehen Sie einige Beispiele. Shopify hat die Liquid Templating Engine erstellt (und später als Open Source veröffentlicht). Liquid ermöglicht Designern volle Gestaltungsfreiheit.

In diesem Tutorial werde ich zeigen, wie man ein Shopify-Thema mit Liquid gestaltet. Sobald Sie die Grundlagen kennen, können Sie ein Design entwerfen und an Themeforest übermitteln.

Lassen Sie uns ein Shopify-Theme entwerfen

Was ist Liquid?

Liquid ist die von Shopify entwickelte und verwendete Template-Engine. Es verarbeitet Liquid-Vorlagendateien, die die Erweiterung „.liquid“ haben. Flüssige Dateien sind einfach HTML-Dateien mit eingebettetem Code. Da Liquid die vollständige Anpassung Ihres HTML-Codes ermöglicht, können Sie einen Shop buchstäblich so gestalten, dass er wie alles aussieht.

Liquid wurde ursprünglich in Ruby für Shopify entwickelt und als Open Source-Projekt veröffentlicht. Seitdem wurde es in anderen Ruby on Rails-Projekten verwendet und auf PHP und javascript portiert.

Eine Vorschau von Liquid

Schauen wir uns an, was es braucht, um mit Flüssigkeit zu beginnen.

Wie Sie sehen, ist Liquid nur HTML mit etwas eingebettetem Code. Aus diesem Grund ist Liquid so leistungsfähig, dass Sie vollen Einfluss auf Ihren Code haben und die Verwendung der verfügbaren Variablen vereinfacht.

Was ist oben los?

Shopify banner

Shopify BannerIn Liquid gibt es zwei Arten von Markierungen: Ausgabe und Tags. Liquid Tags werden von geschweiften Klammern und Prozentzeichen umgeben. Der Ausgang ist von zwei geschweiften Klammern umgeben.

Im obigen Snippet lautet die erste Zeile von Liquid: {% für product in products%} ... {% endfor%} Das ist ein Beispiel für ein Liquid-Tag. Das for-Tag durchläuft eine Sammlung von Elementen und ermöglicht es Ihnen, mit jedem Element zu arbeiten. Wenn Sie bereits in PHP, Ruby, Javascript oder (fügen Sie hier eine Programmiersprache ein) Schleifen verwendet haben, funktioniert dies in Liquid genauso.

Die nächste Zeile von Liquid im obigen Snippet ist {{product.title}}. Das ist ein Beispiel für einen Liquid Output. Daraufhin werden Sie nach dem Titel eines Produkts gefragt und das Ergebnis auf dem Bildschirm angezeigt.

Die nächste Zeile von Liquid führt etwas Neues ein: {{product.price | money_with_currency}} Hier haben wir ein Beispiel für einen Liquid Filter. Sie ermöglichen die Verarbeitung einer bestimmten Zeichenfolge oder Variablen. Filter nehmen den Wert nach links und machen etwas damit. Dieser bestimmte Filter heißt format_as_money; Es nimmt eine Zahl, setzt ein Dollarzeichen voran und verpackt es mit dem richtigen Währungssymbol.

Ein einfaches Beispiel:

könnte folgendes HTML erzeugen

Die letzte Zeile von Liquid oben: {{product.description | prettyprint | truncate: 200 }} zeigt, wie Sie Filter miteinander verketten können. Filter wirken auf den Wert links davon, selbst wenn dieser Wert das Ergebnis eines anderen Filters ist. Das fragliche Snippet wendet also den prettyprint-Filter auf product.description und dann den truncate Filter auf die Ergebnisse von prettyprint an. Auf diese Weise können Sie beliebig viele Flüssigkeitsfilter miteinander verketten!

Was bietet Liquid sonst noch?

In Bezug auf flüssige Tags gibt es neben dem for-Tag mehrere andere. Die häufigsten sind:

Comment:

If/Else:

Case:

Sehen Sie sich die vollständige Liste der Tags an.

Liquid bietet auch zahlreiche Filter an, mit denen Sie Ihre Daten massieren können. Einige übliche sind:

Profitieren:

Beitreten:

Datum:

Sehen Sie sich die vollständige Liste der verfügbaren Filter an.

Anatomie eines Shopify-Themas

Shopify-Themes haben alle eine einfache Verzeichnisstruktur. Es besteht aus einem Ordner für Assets, Layout und Vorlagen. Schauen wir uns an, was wohin geht:

  1. Assets-Ordner: Im Assets-Ordner speichern Sie alle Dateien, die Sie mit Ihrem Design verwenden möchten. Dies umfasst alle Stylesheets, Skripts, Bilder, Audiodateien usw., die Sie verwenden werden. In Ihren Vorlagen können Sie mit dem asset_url-Filter auf diese Dateien zugreifen.
  2. Layoutordner: Dieser Ordner sollte nur eine Datei mit dem Namen theme.liquid enthalten. Das theme.liquid enthält die globalen Elemente für Ihr Shopify-Thema. Dieser Code wird um alle anderen Vorlagen in Ihrem Shop gelegt. Hier ist ein Beispiel für ein sehr einfaches theme.liquid:

    Erforderliche Elemente

    Es gibt zwei sehr wichtige Elemente, die in einer theme.liquid-Datei vorhanden sein müssen. Der erste ist {{ content_for_header }}. Diese Variable muss im Kopf Ihres theme.liquid platziert werden. Auf diese Weise kann Shopify den erforderlichen Code in den Dokumentkopf einfügen, beispielsweise ein Skript zur Statistikverfolgung. Für diejenigen, die mit WordPress vertraut sind, ist dies der Funktion wp_head() sehr ähnlich.

    Das andere sehr wichtige Element ist {{content_for_layout}}. Diese Variable muss im Hauptteil Ihres theme.liquid platziert werden. Hier werden alle Ihre anderen Liquid-Vorlagen gerendert.

  3. Vorlagenordner: Dieser Ordner enthält den Rest Ihrer Shopify-Vorlagen. Es besteht aus:
    1. index.liquid: Wird als Hauptindexseite Ihres Shops angezeigt.
    2. product.liquid: Jedes Produkt verwendet diese Vorlage, um sich selbst anzuzeigen.
    3. cart.liquid: Zeigt den Warenkorb des aktuellen Benutzers an.
    4. collection.liquid: Wird für Produktkollektionen angezeigt.
    5. page.liquid: Wird für alle statischen Seiten angezeigt, die der Shop möglicherweise erstellt hat.
    6. blog.liquid: Wird für alle Shopify-Blogs für den Shop angezeigt.
    7. article.liquid: Wird für alle Blogartikel angezeigt und enthält ein Formular zum Senden von Kommentaren.
    8. 404.liquid: Der Shop zeigt jederzeit eine 404 an.
    9. search.liquid: Wird für Shop-Suchergebnisse angezeigt.

Wie Sie vielleicht schon vermutet haben, hat jede dieser Vorlagen Zugriff auf verschiedene Variablen. Beispielsweise hat product.liquid Zugriff auf eine produkt-Variable, die das aktuell angezeigte Produkt enthält, blog.liquid hat Zugriff auf eine blog-Variable, und index.liquid hat Zugriff auf alle diese. Wenn Sie daran interessiert sind, welche Variablen Sie in welcher Vorlage verwenden können, lesen Sie bitte die Liquid-Dokumentation.

Ein Grundgerüst zum Einstieg

Das Beste an der Gestaltung von Shopify ist, dass Sie alle Fähigkeiten nutzen können, die Sie bereits haben: HTML, CSS, JS usw. Der einzige Weg, der in diesem Prozess blockiert wird, ist die Kenntnis der in jeder Vorlage verfügbaren Liquid-Variablen.

Hier kommt Vision ins Spiel.

Vision - Shopify in einer Box

Was ist Vision?

Vision ist eine eigenständige Anwendung, mit der Sie Designs für Shopify-Stores auf Ihrem lokalen Computer erstellen können, ohne sich für einen Shop anmelden oder eine Datenbank oder all die anderen geeky Dinge einrichten zu müssen.

Was brauche ich, um Vision auszuführen?

Vision wird mit allem geliefert, was Sie benötigen, um sofort aus der Box zu laufen. Wenn Sie einen Texteditor und einen Webbrowser installiert haben, können Sie loslegen.

Als ob das nicht genug wäre, wird Vision mit den fertigen Motiven von Shopify vorinstalliert. Shopify hat es den Benutzern ermöglicht, diese Themen als Bausteine zu verwenden. Sie können also mit einem dieser vorhandenen Themen als Basis beginnen und diese erweitern!

Zusammenfassung

Shopify ist eine schnell wachsende E-Commerce-Plattform mit Tausenden von Verkäufern, die ihre Produkte präsentieren möchten. Mit Vision können Sie schnell loslegen und sich in kürzester Zeit entwickeln. Die ersten zehn Vorlagen, die in der Shopify-Kategorie von Themeforest gepostet werden, erhalten zusätzliche 100 US-Dollar. Also los geht's!

Wenn Sie weitere Informationen zum Entwerfen mit Shopify benötigen, verfügen sie über eine umfangreiche Dokumentation in ihrem Wiki. Lesen Sie den Shopify Theme Guide, die Verwendung von Liquid und die ersten Schritte mit Vision.

Die besten Shopify-Vorlagen von ThemeForest .... So weit!

  • Drifter

    Herumtreiber

    "Dieses schlanke Shopify-Design zeichnet sich durch klare Linien und moderne Designakzente aus, die Ihre Produkte zur Geltung bringen. Benutzerdefinierte jQuery-Leuchtkästen ermöglichen die vollständige Anzeige Ihrer Produkte."

    Thema anzeigen

  • Drifter

    Lust auf Pink

    "Ein Shopify-Thema mit modernem, ausgefallenem Web 2.0-Design."

    Thema anzeigen

  • Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.


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.