Share
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. In wenigen Minuten können Sie einen Shop 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. Siehe 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.
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.
Schauen wir uns an, was es braucht, um mit Flüssigkeit zu beginnen.
produkt.bezeichnung | prettyprint | abschneiden: 200
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.
In Liquid gibt es zwei Arten von Markierungen: Ausgabe und Stichworte. Flüssigkeit Stichworte sind von geschweiften Klammern und Prozentzeichen umgeben; Ausgabe ist von zwei geschweiften Klammern umgeben.
Im obigen Ausschnitt ist die erste Zeile von Liquid: % für Produkt in Produkt%… % Endefür% Dies ist ein Beispiel für ein Liquid Tag. Das zum Markieren Sie Loops über eine Sammlung von Objekten und können Sie mit jedem Element arbeiten. Wenn Sie in PHP, Ruby, Javascript oder (fügen Sie eine beliebige Programmiersprache hier ein) Schleifen verwendet haben, funktioniert dies in Liquid genauso.
Die nächste Zeile von Liquid im obigen Ausschnitt ist Produktname . Dies ist ein Beispiel für einen Flüssigkeitsausstoß. Dadurch wird nach dem Titel eines Produkts gefragt und das Ergebnis wird 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 eines Flüssigkeitsfilters. Sie ermöglichen die Verarbeitung einer bestimmten Zeichenfolge oder Variablen. Filter nehmen den Wert nach links und machen etwas damit. Dieser bestimmte Filter wird aufgerufen format_as_money; Es nimmt eine Zahl, setzt ein Dollarzeichen voran und verpackt es mit dem richtigen Währungssymbol.
Accentsconagua
product.price | money_with_currency könnte folgendes HTML erzeugen
45,00 $ USD Die letzte Zeile von Liquid oben: produkt.bezeichnung | prettyprint | abschneiden: 200 zeigt, wie Sie Filter miteinander verketten können. Filter wirken auf den Wert links davon, auch wenn dieser Wert das Ergebnis eines anderen Filters ist. Der fragliche Ausschnitt wird also die hübscher Druck filtern nach Produktbeschreibung, und dann wird das angewendet kürzen filtern nach den Ergebnissen von hübscher Druck. Auf diese Weise können Sie beliebig viele Flüssigkeitsfilter miteinander verketten!
In Bezug auf Liquid Tags neben der zum tag gibt es mehrere andere. Die häufigsten sind:
% comment% Dieser Text wird nicht gerendert % endcomment%
% if product.description == ""% Dieses Produkt hat keine Beschreibung! % else% Dieses Produkt wird beschrieben! % endif%
% case template% % when 'product'% Dies ist ein product.liquid % when 'cart'% Dies ist ein cart.liquid % endcase%
Sehen Sie sich die vollständige Liste der Tags an.
Liquid bietet auch viele Filter an, mit denen Sie Ihre Daten massieren können. Einige übliche sind:
“Montag” | # => Montag
product.tags | join: ',' # => Holz, Tiefschnee, Saison 2009
Gepostet am article.created_at | Datum: “% B% d, '% y” # => Veröffentlicht am 26. Januar '09
Sehen Sie sich die vollständige Liste der verfügbaren Filter an.
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:
asset_url Filter. "logo.gif" | asset_url | img_tag: "Hauptlogo" # =>
Laden Name 'layout.css' | asset_url | stylesheet_tag content_for_headerLaden Name
content_for_layoutAlle Preise sind in shop.currency | Bereitgestellt von Shopify
Es gibt zwei SEHR wichtige Elemente, die in einer theme.liquid-Datei vorhanden sein müssen. Das erste ist content_for_header. Diese Variable muss im Kopf Ihres Designs stehen. Auf diese Weise kann Shopify den erforderlichen Code in den Dokumentenkopf einfügen, z. B. ein Skript zur Statistikverfolgung. Für WordPress-Anwender ist dies der Funktion wp_head () sehr ähnlich.
Das andere sehr wichtige Element ist content_for_layout. Diese Variable muss in den Hauptteil Ihres Themas eingefügt werden. Hier werden alle Ihre anderen Liquid-Vorlagen gerendert.
Wie Sie vielleicht schon vermutet haben, hat jede dieser Vorlagen Zugriff auf verschiedene Variablen. Zum Beispiel hat product.liquid Zugriff auf a Produkt Variable, die das aktuell angezeigte Produkt enthält, hat blog.liquid Zugriff auf eine Blog Variable und index.liquid hat Zugriff auf alle. Wenn Sie daran interessiert sind, welche Variablen Sie in welcher Vorlage verwenden können, lesen Sie bitte die Liquid-Dokumentation.
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, besteht darin, zu wissen, welche Liquid-Variablen in jeder Vorlage verfügbar sind.
Hier kommt Vision ins Spiel.
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 Sachen einrichten zu müssen.
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 sofort rollen.
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, sodass Sie mit einem dieser vorhandenen Themen als Basis beginnen und diese erweitern können!
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 sofort 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 fang an!!
Wenn Sie weitere Informationen zum Entwerfen mit Shopify benötigen, haben sie eine umfangreiche Dokumentation in ihrem Wiki. Lesen Sie den Shopify-Themenleitfaden, Liquid verwenden und Erste Schritte mit Vision.
"Dieses elegante 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
"Ein Shopify-Thema mit modernem, ausgefallenem Web 2.0-Design."
Thema anzeigen
