Accentsconagua
Share
Wie einige von Ihnen vielleicht bereits in meinen vorherigen Artikeln gesehen haben, ist Shopify eine auf Themen basierende gehostete Commerce-Plattform, mit der Sie Online-Shops erstellen können. Sie ist in den letzten Jahren stetig gewachsen und ist heute die Plattform für mehr als 400.000 Unternehmen in rund 175 Ländern.
Die Shopify-Plattform wird ständig weiterentwickelt. In den letzten Monaten wurden eine Reihe wichtiger Funktionen eingeführt, die sich speziell an Themen- und App-Entwickler richten. In diesem Artikel betrachten wir eine Auswahl dieser neuen Funktionen und Toolsets, darunter:
Viele der folgenden Beispiele werden diskutiert Flüssigkeit. Liquid ist die Vorlagensprache, mit der Designentwickler Platzhalter und Logikkonstrukte in ihren Vorlagen verwenden können, die durch Live-Store-Daten ersetzt werden, wenn eine Seite angefordert und gerendert wird. Es verwendet eine einfache Syntax, die die Ausgabe (z. B. einen Produkttitel) und die Logik (z. B. a zum Schleife). Ich werde hier nicht auf viele Details eingehen, aber Sie können sich meinen 25-minütigen Screencast ansehen, der ausführlichere Informationen zur Funktionsweise von Liquid enthält.
Und während Sie hier sind, interessieren Sie sich möglicherweise auch für den folgenden Inspirationsbeitrag für Themen, die bei Themeforest verfügbar sind:
Beginnen wir mit einer der wichtigsten Änderungen, die sich in letzter Zeit ereignet haben: der img_url Flüssigkeitsfilter Bis vor kurzem wurden Bilder basierend auf einem Satz vordefinierter benannter Größen gerendert. Zum Beispiel:
product.featured_image | img_url: 'grande'
Hier fordern wir das abgebildete Bild für das Produkt in Größe an grande. Dies würde, vorausgesetzt, das Originalbild hätte eine Seite gleich oder größer als 600px sein, das Bild mit der längeren der beiden Achsen als 600px rendern.
Diese genannten Größen sind nun veraltet und wurden zwar noch funktionieren, sie wurden jedoch durch einen neuen Parametersatz ersetzt, einschließlich Größe, Ernte, Rahmen, und Format. Auf diese Weise können jetzt zahlreiche Bildmanipulationen vorgenommen werden, die Shopify-Designentwicklern zuvor nicht zur Verfügung standen.
Ich werde die verwenden img_url Flüssigkeitsfilter in diesen Beispielen, aber die Techniken funktionieren auch mit den folgenden anderen Bildobjekten:
Beginnen wir damit, wie wir die Größe eines Bildes ändern können. Dazu ersetzen wir das jetzt veraltete Bild Name mit einer bestimmten Größe in Pixel. Hier ist ein Beispiel:
product.featured_image | img_url: '450x450'
Wenn Sie die obige Syntax verwenden, haben Sie nun die Kontrolle über die Bildabmessungen in Ihren Händen: Hier haben wir sowohl die Breite als auch die Höhe (in dieser Reihenfolge) angegeben..
Sie können auch nur eine Breite angeben:
product.featured_image | img_url: '450x'
oder nur eine Höhe:
product.featured_image | img_url: 'x450'
Wenn Sie einen einzelnen Wert angeben, berechnet Shopify die verbleibenden Abmessungen basierend auf der Originalbildgröße. Dabei bleibt das Seitenverhältnis des Originalbilds erhalten.
Wenn Sie zu unserem ursprünglichen Beispiel zurückkehren, könnten Sie denken, dass dies dazu führen würde, dass eine 450 x 450-Version Ihres Bildes gerendert wird. Dies ist jedoch nicht immer der Fall.
Diese Anforderung würde nur dann zu einem perfekten Quadrat führen, wenn beide der folgenden Bedingungen erfüllt sind:
Wenn beide Bedingungen erfüllt sind, wird ein Bild mit einer Größe von 450x450 gerendert. Andernfalls ändert Shopify die Größe mit derselben Logik, als hätten Sie nur Höhe oder Breite angegeben. Die längste Seite siegt in dieser Situation und wird entsprechend skaliert.
Um quadratische Bilder zu erstellen, können Sie den Parameter Zuschneiden verwenden, um sicherzustellen, dass die Abmessungen des resultierenden Bildes den angeforderten Abmessungen entsprechen. Wenn das gesamte Bild nicht in die von Ihnen gewünschten Abmessungen passt, gibt der Zuschneideparameter an, welcher Teil des Bildes angezeigt werden soll. Es gibt drei gültige Optionen:
Diese Funktionalität ist seit Ende 2016 verfügbar, aber Anfang 2017 wurde ein Update veröffentlicht, das noch mehr Flexibilität bietet. Alle im Shopify Theme Store verfügbaren Themen, einschließlich des unten abgebildeten Premium-Themas Empire, verwenden alle diese Techniken. Das Installieren eines kostenlosen Themas ist eine großartige Möglichkeit, um mehr über die Umsetzung dieser Ideen zu erfahren.
srcset Um zu beschreiben, wie Sie dies in Ihren eigenen Themen nutzen können:
% für Produkt in collection.products% % Zuweisung image = product.featured_image%% endfor%
In diesem Beispiel verwenden wir die zuordnen Liquid-Funktion zum Erstellen einer aufgerufenen Variablen Bild Dies entspricht dem aktuell angezeigten Produktbild (das im Shopify-Administrator festgelegt ist). Wir sind dann in der Lage, Liquid Logic zu verwenden, um unsere srcset Erklärungen, die in diesem Fall die Breite Eigentum:
% if image.width> 640% image.src | img_url: '640x' 640w % endif%
Die gute Nachricht ist, dass sich Themenentwickler nicht darum kümmern müssen, alle Bilder erneut hochzuladen, da Shopify jedes Bild auf der Plattform indiziert hat.
Zwei weitere Parameter, die es wert sind, diskutiert zu werden, sind Rahmen und Format. Mit dem Skalierungsparameter können Sie die Pixeldichte des Bildes angeben. Sie können je nach Bedarf entweder 2x oder 3x skalieren:
product.image | img_url: '400x400', Maßstab: 2
Das Format Mit diesem Parameter können Sie angeben, welches Dateiformat für das Bild verwendet werden soll. Derzeit können Sie beide angeben jpg oder pjpg (progressives JPEG):
product.image | img_url: '400x400', Format: 'pjpg'
Sie können diese Technik auch für Bilder verwenden, die sich im Asset-Ordner Ihres Themes befinden. Dazu verwenden Sie die asset_img_url Filter. Hier ist ein Beispiel, das auch die img_tag Filter, der zu einem vollständig gebildeten führt img Element, das in der Vorlage gerendert wird:
logo.jpg '| asset_img_url: '300x' | img_tag
Diese neuen Bildbearbeitungsfilter und Bildeigenschaften ermöglichen es schließlich, so flexibel wie möglich zu sein, wenn es um den Umgang mit Bildern, Art Direction und um die Datenpläne der Endbenutzer geht.
Ende 2016 führte Shopify „Sections“ ein. Mit dieser neuen Funktion können Designentwickler eine benutzerdefinierte Verwaltungsoberfläche erstellen, mit der Ladenbesitzer Inhaltsabschnitte wie Produkte, Diashows, Videos oder Produktsammlungen problemlos hinzufügen, neu anordnen und entfernen können. Dies sind häufige Anwendungsfälle, aber Sie können diese Funktionalität buchstäblich verwenden, um Geschäftsinhabern das Hinzufügen und Bearbeiten von Inhalten jeglicher Art zu ermöglichen. Alle Änderungen im Admin können in Echtzeit angezeigt werden. Sobald sie gespeichert sind, werden sie live im Store angezeigt.
Abschnitte können statisch in die Vorlagen eines Themas (wie Kopf- und Fußzeile) eingefügt werden, oder sie können über die Verwaltungsoberfläche auf der Startseite eines Themas dynamisch hinzugefügt und entfernt werden. Im obigen Beispiel, auf das wir in Kürze eingehen, können Sie sehen, wie wir einen statischen Abschnitt bearbeiten können, der in der Fußzeile des Geschäfts angezeigt wird. Sie werden auch die Schaltfläche "Abschnitt hinzufügen" bemerken, mit der wir der Startseite dynamische Bereiche hinzufügen können.
Abschnittsvorlagen befinden sich im neuen Abschnittsordner und können auf ähnliche Weise wie Snippets referenziert werden. Wenn sich unsere Datei unter section / promotion.liquid befand, würden wir sie wie folgt referenzieren:
% section "promotion"%
Hinweis: du brauchst das nicht .Flüssigkeit Erweiterung wie bei Snippets in Shopify-Themes üblich. Schauen wir uns ein Beispiel an, um die Leistungsfähigkeit von Abschnitten zu verdeutlichen. Folgendes ist der Inhalt von Abschnitte / Fußzeile.Liquid:
section.settings.title
section.settings.description
% schema% "name": "Footer Promotion", "Einstellungen": ["id": "title", "type": "text", "label": "Promotion-Titel", "default": "Title", "id": "description", "type": "richtext", "label": "Beschreibung unten einfügen", "default": "Fügen Sie hier Ihre Beschreibung hinzu
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Wenn Sie mit den Shopify-Designeinstellungen vertraut sind, können einige davon ziemlich vertraut sein. Es besteht aus einer Mischung aus HTML, Liquid-Platzhaltern und JSON, ähnlich der in settings_schema.json. Übrigens die Funktionalität von settings_schema.json bleibt immer noch: Abschnitte fügen einfach eine zusätzliche Funktionalitätsebene hinzu.
Oben in der Vorlage befindet sich die HTML-Ausgabe, die generiert werden soll, wenn die Vorlage beim Rendern auf den Abschnitt trifft. In jedem der h1 und p Elemente sind flüssige Platzhalter, die die neuen verwenden section.settings. [x] Ausgabesyntax. In unseren Beispielen wird unsere Abschnittsvorlage nach entsprechenden Daten suchen section.settings.title und section.settings.description.
Bis jetzt schön und einfach, aber woher weiß Shopify, womit diese Platzhalter bevölkert werden sollen? Dies alles ist auf die JSON zurückzuführen, die ich bereits erwähnt hatte, eingebettet zwischen dem Öffnen und Schließen % schema% Stichworte.
"name": "Footer Promotion", "Einstellungen": ["id": "title", "type": "text", "label": "Promotion-Titel", "default": "title", "id": "description", "type": "richtext", "label": "Beschreibung unten hinzufügen", "default": "Fügen Sie hier Ihre Beschreibung hinzu
"]
Damit unser Abschnitt im Bereich "Anpassen des Designs" des Administrators des Geschäfts angezeigt wird, müssen wir ihm eine Kennung zuweisen. Dazu definieren wir den Wert "name" auf der obersten Ebene der JSON.
Als nächstes haben wir den Einstellungsknoten, der in diesem Beispiel zwei Unterknoten hat. Beide enthalten Eigenschaften von Ich würde, Art, Etikette, und Standard. Jede dieser Optionen bestimmt abhängig von ihrem Wert, wie die Verwaltungsschnittstelle dargestellt wird. Schauen wir uns die Reihe nach an:
Eine Zeichenfolge, die intern verwendet wird. Es ist erwähnenswert, dass die IDs in einer Abschnittsdatei eindeutig sein müssen, nicht jedoch in allen Abschnittsdateien. Als solches ist es vollkommen in Ordnung, eine zu haben Ich würde von Titel in mehreren Abschnittsdateien. Die Einstellungen der Abschnitte stehen auch nicht in Konflikt mit den Einstellungen in settings_schema.json.
Dies ist das Steuerelement, das innerhalb des Administrators ausgegeben wird. Die am häufigsten verwendeten Optionen lauten wie folgt:
% endfor% Text: Einzeilige TextfelderTextbereich: Mehrzeilige Textbereicherichtext: Ein Rich-Text-Editorimage_picker: Bild-UploadsRadio: Radio Knöpfewählen: AuswahllistenKontrollkästchen: AnkreuzfelderEinige davon erfordern zusätzliche JSON-Funktionen. Das Auswahlsteuerelement erfordert beispielsweise Optionen zum Auffüllen. Weitere Informationen zur Funktionsweise sowie zu anderen Steuerelementen, die Sie möglicherweise in Betracht ziehen, finden Sie in den Shopify-Dokumenten.
Dies stellt das HTML-Label dar, das im Administrator über Ihrem Steuerelement generiert wird.
Mit dieser Einstellung können Sie dem Steuerelement Platzhalterwerte hinzufügen. Es ist erwähnenswert, dass dies die Werte sind, die verwendet werden, bis der Abschnitt vom Geschäftsinhaber aktualisiert wurde.
Mein Beispiel ist ziemlich einfach und wird zwei Steuerelemente erstellen. Das erste ist ein einzeiliges Textfeld, das im gerendert wird h1 Element in der Vorlage ist das zweite ein Rich-Text-Feld, das die Optionen Fett, Kursiv und URL enthält.
Es gibt viele andere Optionen, die Sie verwenden können, um den Administrator Ihres Shops zu pimpen. Dazu gehören das Hinzufügen von benutzerdefinierten Steuerelementen für URLs, Sammlungen und Produktlisten sowie benutzerdefiniertes HTML. Wir werden uns nicht alle in diesem Artikel ansehen, aber ich möchte Sie dazu ermutigen, sich mit den Möglichkeiten auseinanderzusetzen.
Sie werden auch feststellen, dass Sie den Abschnittsdateien mit den folgenden Liquid-Tags benutzerdefinierte CSS und JavaScript hinzufügen können:
% stylesheet% % endstylesheet%
% javascript% % endjavascript%
Möglicherweise denken Sie, dass dadurch möglicherweise stark aufgeblähtes Inline-CSS und JavaScript zu Ihrem Design hinzugefügt werden kann. Die gute Nachricht ist, dass Shopify alle CSS und JS in einer einzigen Datei verkettet, die über die Flüssigkeit injiziert wird content_for_header Platzhalter. Die Plattform stellt sicher, dass immer nur eine einzige Instanz enthalten ist, auch wenn dieser Abschnitt auf einer Seite mehrmals verwendet wird. Weitere Informationen zur Ausführung von Skripts finden Sie in den Shopify-Dokumenten.
Nachdem Sie Ihre Steuerelemente und Namen in der JSON-Datei eingerichtet haben, können Sie den Abschnitt in jede relevante Vorlage aufnehmen. Sie können einer Layout-Datei (der äußeren Oberfläche einer Seite) oder einer einzelnen Vorlagendatei Abschnitte hinzufügen. Der Shopify-Administrator zeigt die Steuerelemente kontextabhängig an, d. H. Nur wenn die entsprechende Vorlage im Editor "Design anpassen" angezeigt wird. Das Ändern von Werten führt zu einer Echtzeitaktualisierung im Admin. Auf diese Weise können Sie feststellen, wie sich Änderungen auf das Layout auswirken, bevor Sie die Aktualisierung durchführen und live schalten.
Wenn Sie sich den gerenderten HTML-Code ansehen, werden Sie feststellen, dass die Abschnitte in ein div Element:
Die ID des Div nimmt das Format von
shopify-section- [id], Dabei ist id eine eindeutige id für dieses Element für die Seite und fügt ohne Angabe eine Klasse hinzuShopify-Bereich. Sie können auch eine eigene Klasse zum div-Element hinzufügen, indem Sie in Ihren Einstellungen einen Klassenwert angeben. So würde es für unser Beispiel oben aussehen:"id": "title", "type": "text", "class": "title", "label": "Promotion-Titel", "default": "title"Dieser Zusatz würde folgendes ergeben:
Sektionen sind eine großartige Ergänzung zu Shopify-Designs, da sie es Designentwicklern ermöglichen, kontextabhängige Einstellungen für einen gesamten Store zu aktivieren. Sie kommen jedoch wirklich gut zur Geltung, wenn sie mit der neuen Blockfunktionalität zusammenarbeiten.
3. Blöcke
Blöcke bauen auf dem Abschnittskonzept auf und ermöglichen es Geschäftsinhabern, der Startseite eines Geschäfts mehrere Abschnitte hinzuzufügen. Lassen Sie uns einen Blick darauf werfen, wie wir Blöcke verwenden können, um die Möglichkeit hinzuzufügen, der Homepage eine Reihe von Werbeboxen hinzuzufügen. Hier ist die Beispieldatei, mit der wir arbeiten werden:
% for block in section.blocks% % if block.type == "Promobox"%block.settings.title
block.settings.description
% elsif block.type == "Bildauswahl"%% endif% % endfor% % schema% "name": "Werbeblöcke", "max_blocks": 5, "Presets": ["name": "Werbeblöcke", "category": "Benutzerdefinierter Inhalt der Startseite"], "Blöcke": ["Typ": "Promo-Box", "Name": "Werbebox", "Limit": 1, "Einstellungen": ["ID": " title "," type ":" text "," label ":" title "," default ":" Ihr Titel hier ", " id ":" description "," type ":" textarea "," label " : "Beschreibung", "Standard": "Ihre Beschreibung hier"], "Typ": "Image-Picker", "Name": "Promo Image", "Einstellungen": ["id": "Promo -image "," type ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Um ehrlich zu sein, habe ich mehr als nur eine Weile gebraucht, um die Funktionsweise der Blöcke zu verstehen. Wenn Sie jedoch erst einmal verstanden haben, wie die Teile zusammenpassen, werden sich völlig neue Möglichkeiten für Ihre Themenentwicklung ergeben.
Im Wesentlichen kann die Homepage aus mehreren Abschnitten bestehen, wobei jeder Abschnitt mehrere Blöcke enthalten kann. Der Ladenbesitzer kann diese Blöcke dann neu ordnen, um ein Layout zu erstellen, das den Anforderungen am besten entspricht. Sehen wir uns an, wie sich dies vom vorherigen Beispiel unterscheidet, um einige Konzepte zu erläutern.
Zuerst werden Sie feststellen, dass es eine Flüssigkeit gibt
zumSchleife am oberen Rand der Vorlage:% for block in section.blocks% % if block.type == "Promobox"%block.settings.title
block.settings.description
% elsif block.type == "promo-image"%Da diese verschiedenen Elemente dem Ladenbesitzer ausgeliefert sind, haben wir als Entwickler keine Möglichkeit zu wissen, was wir ausgeben müssen. Wir müssen daher eine Liquid-Loop-Struktur verwenden, in diesem Fall a
zumSchleife, die es uns ermöglicht, alle in einem bestimmten Abschnitt vorhandenen Blöcke der Reihe nach zu durchlaufen und die relevanten Daten auszugeben.Im obigen Ausschnitt sehen Sie, dass ich ein einfaches benutze
if / elsifAnweisung, die den aktuellen Blocktyp prüft. Wir können den Typ im Schema selbst festlegen, wie wir in Kürze sehen werden. In diesem Beispiel verwenden wirelsifum doppelt sicher zu sein, auf welchen Typ wir prüfen. Wenn Sie nur zwei verschiedene Blocktypen hätten, wie in diesem Beispiel, könnten Sie dies einfach tunsonstWie Sie wissen, ist es die einzige Alternative: Das sagt, es schadet nicht, defensiver zu sein.Abhängig von unserem Typ wird ein anderer Abschnitt von HTML ausgegeben. Um den mit dem Block verknüpften Wert auszugeben, verwenden wir folgende Syntax:
block.settings. [id]
[Ich würde]steht für die ID, die diesem bestimmten Element in unserem Schema zugewiesen wurde, das wir als Nächstes behandeln werden.Wenn Sie zu dem Schema wechseln, werden Sie einige bekannte und unbekannte Elemente bemerken. Beginnen wir mit dem ersten Teil:
"name": "Werbeblöcke", "max_blocks": 5, "Voreinstellungen": ["name": "Werbeblöcke", "category": "Benutzerdefinierter Inhalt der Homepage"]Schauen wir uns jeden Teil der Reihe nach an:
"name": "Werbeblöcke": Der Name, der für diese Gruppe von Steuerelementen im Shopify-Administrator angezeigt wird"max_blocks": 5: Die Gesamtzahl der Blöcke, die in diesem Abschnitt angezeigt werden können. Dies funktioniert im Einklang mit der Grenzwerteinstellung jedes Blocks, die wir später behandeln werden. Sobald die maximale Anzahl von Blöcken erreicht ist, können Sie keine weiteren Einträge mehr im Admin hinzufügen."Voreinstellungen": Ein Array von Standardeinstellungen für den dynamischen Abschnitt. Im obigen Beispiel möchten wir, dass unser dynamisches Element unter dem Titel "Werbeblöcke" und in der Kategorie "Benutzerdefinierter Inhalt der Startseite" angezeigt wird. Der Kategoriewert ermöglicht es uns, verschiedene Abschnitte in einer Gruppe im Admin zu gruppieren.Sobald wir das definiert haben
Name,max_blocks, und voreingestellte Werte können wir unsere Aufmerksamkeit auf die Steuerelemente richten, die wir im Admin anzeigen möchten. Diese sind im Blockbereich des Schemas definiert:"Blöcke": ["Typ": "Promo-Box", "Name": "Werbebox", "Limit": 1, "Einstellungen": ["ID": "Titel", "Typ": " text "," label ":" Titel "," default ":" Ihr Titel hier ", " id ":" description "," type ":" textarea "," label ":" Description "," default " : "Ihre Beschreibung hier"], "Typ": "Promo-Image", "Name": "Promo-Image", "Einstellungen": ["id": "Promo-Image", "Typ": "image_picker", "label": "Promo Image"]]Jeder Block hat eine Reihe von vordefinierten Werten:
"Art": Ein Name, der dieser bestimmten Steuerelementgruppe gegeben wird. Dies kann alles sein, was Sie wollen, im Idealfall aber selbsterklärend."Name": Der Name dieser bestimmten Gruppe von Steuerelementen, die Sie im Administrator anzeigen möchten"Grenze": Die Häufigkeit, mit der diese bestimmte Gruppe von Steuerelementen (d. H. Dieser Block) im Abschnitt angezeigt werden soll. Wir werden das in Kürze noch näher betrachten.Nachdem Sie diese Voreinstellungen definiert haben, können Sie die Steuerelemente definieren, die im Administrator angezeigt werden sollen. Diese sind in den Einstellungen definiert:
"Einstellungen": ["ID": "Titel", "Typ": "Text", "Beschriftung": "Titel", "Standard": "Ihr Titel hier", "ID": "Beschreibung", "type": "textarea", "label": "Description", "default": "Ihre Beschreibung hier"]In unserem Beispiel haben wir zwei mögliche Blocktypen, die wir diesem Abschnitt hinzufügen können. Der erste ist der Blocktyp
Promo-Boxund der zweite ist der BlocktypPromo-Bild: beides haben wir uns definiert.Jeder Block kann auch einen eigenen Satz von Einstellungen definieren, der aus einem oder mehreren Steuerelementen bestehen kann. Im obigen Beispiel der Block vom Typ
Promo-Boxverfügt über zwei Steuerelemente, die beim Hinzufügen zum Abschnitt angezeigt werden. Das erste ist ein Textfeld und das zweite ist einTextbereich. Aus irgendeinem Grund können Blöcke das nicht verwendenrichtextEditor, den wir in unserem vorherigen Beispiel verwendet haben, aber aTextbereichermöglicht es Ihnen, HTML bei Bedarf hinzuzufügen. Wie bei statischen Abschnitten müssen auch und definiert werdenIch würde,Art,Etikette, undBeschreibung.Es gibt eine Reihe von Typen, darunter:
Text: Einzeilige TextfelderTextbereich: Mehrzeilige Textbereicheimage_picker: Bild-UploadsRadio: Radio Knöpfewählen: AuswahllistenKontrollkästchen: AnkreuzfelderAngebot: BereichsreglerIn dem obigen Beispiel haben wir auch ein Bildsteuerelement definiert, das das Symbol verwendet
image_pickerWert. Dadurch kann der Geschäftsinhaber ein Bild hochladen oder ein Bild auswählen, das bereits zum Geschäft hochgeladen wurde. Da dies einen eigenen Typ, Namen und eigene Einstellungen hat, wird die Bildauswahl als weitere Option angezeigt, die der Geschäftsinhaber diesem dynamischen Abschnitt hinzufügen kann.Ich habe bereits erwähnt, dass die
Promo-BoxBlock hat einen Grenzwert von 1. Sie werden sich hoffentlich auch daran erinnern, dass wir die maximale Anzahl von Blöcken in diesem Abschnitt auf 5 festgelegt haben. Daher ist es in diesem Szenario möglich, einen Abschnitt zu haben, bestehend aus:
- 1 "Promo-Box" und 4 "Promo-Bilder"
- 5 "Promo-Bilder"
Sobald eine der beiden Kombinationen erreicht wurde, können Sie dem Abschnitt keine weiteren Blöcke hinzufügen, es sei denn, Sie löschen einen vorhandenen Block.
Sobald Sie Ihre Vorlage und Ihr Schema sowie weitere CSS und JavaScript bereit haben, müssen Sie der index.liquid-Vorlage Ihres Themas einen letzten Code hinzufügen, um die Funktionalität des Blocks zu aktivieren. Beim Hinzufügen
content_for_indexzu index.liquid Shopify kennt jeden Abschnitt, für den eine oder mehrere Voreinstellungen definiert sind. Jedes Preset wird dann zu einem dynamischen Abschnitt, den ein Händler seiner Design-Startseite hinzufügen kann.In der Abbildung unten sehen Sie das Endergebnis. Nachdem Sie in den Admin geklickt haben, können wir entweder unsere Links oder Werbeblöcke zum dynamischen Bereich hinzufügen. In diesem Fall habe ich Werbeblöcke ausgewählt und kann dann zusätzliche Blöcke hinzufügen - aber nur Promobilder, da wir in unserem Schema für den Typ "Werbebox" ein Limit von 1 festgelegt haben.
Es ist erwähnenswert, dass Sie nicht nur dynamische Blöcke innerhalb eines Abschnitts neu anordnen können, sondern auch die übergeordneten Abschnitte auf der Startseite nach Belieben neu anordnen können. Dabei ist zu beachten, dass es ein festes Limit von 25 Abschnitten gibt, die zur Startseite hinzugefügt werden können.
Statische und dynamische Abschnitte sowie die nachfolgenden Blöcke sind ein sehr leistungsfähiges Werkzeug. Ich habe eine Weile gebraucht, um die Konzepte wirklich zu verstehen, aber sobald sie angeklickt haben, werden Sie das Potenzial, das sie bieten, wirklich zu schätzen wissen.
4. Theme Kit und Slate
Eine Frage, die mich die ersten Entwickler von Shopify-Designern oft stellen, ist die Frage, wie man am besten eine Entwicklungsumgebung für die Arbeit mit der Plattform einrichten kann: Heute gibt es zwei großartige Optionen, die Sie zum Laufen bringen.
Letztes Jahr hat das Shopify Thementeam das Shopify Theme Kit veröffentlicht. Theme Kit ist ein einzelnes binäres Befehlszeilenprogramm (funktioniert unter Windows, Linux und macOS), mit dem Sie nach der Installation Folgendes tun können:
- Laden Sie Designs in mehrere Umgebungen hoch
- Laden Sie Design-Assets hoch und laden Sie sie herunter
- Achten Sie auf lokale Änderungen und laden Sie sie automatisch auf die Shopify-Plattform hoch
Mit Theme Kit können Theme-Entwickler mit ihren bekannten Werkzeugen (Texteditor, Vorprozessoren usw.) arbeiten und Änderungen im Hintergrund eines Shopify-Entwicklungsspeichers synchronisieren lassen. Wenn Sie Shopify noch nicht aus der Perspektive des Themenaufbaus betrachtet haben, sind Sie möglicherweise nicht mit Entwicklungsgeschäften vertraut.
Im Wesentlichen handelt es sich dabei um voll ausgestattete Shopify-Geschäfte mit einem Unterschied: Sie können keine Zahlungen tätigen. Damit Sie jedoch den gesamten Checkout-Prozess für einen Client demonstrieren können, können Sie ein "Dummy Payment Gateway" hinzufügen. Sie können über ein kostenloses Partnerkonto beliebig viele Development Stores erstellen. Sobald Sie zum Start bereit sind, können Sie den Shop einfach zu einem kostenpflichtigen Tarif aufrüsten oder das Design für einen anderen Store bereitstellen.
Theme Kit bietet eine Reihe nützlicher Befehle, mit denen Sie während der Arbeit in einer lokalen Entwicklungsumgebung mit Designs interagieren können. Nach dem Setup können Sie die
sehenBefehl, der einen Prozess zur Überwachung Ihres Verzeichnisses auf Änderungen startet und sie nach Shopify hochlädt.Shopify kann nicht wirklich "lokal" sein (daher die Anführungszeichen), da Sie eine Internetverbindung benötigen, um mit einem Entwicklungs-Store zusammenzuarbeiten. Durch die Integration von Theme Kit in Ihren Workflow fühlen Sie sich "lokal". In Verbindung mit Tools wie Prepros können Sie außerdem das Live-Laden Ihres Entwicklungsspeichers sowie das Minimieren und Verketten von Dateien nutzen.
Im Jahr 2017 hat Shopify außerdem Slate eingeführt: ein Open Source-Design-Gerüst und Befehlszeilen-Tool zum Entwickeln von Shopify-Designs. Es soll Ihren Entwicklungsworkflow unterstützen und das Entwickeln, Testen und Bereitstellen von Designs für Shopify-Geschäfte beschleunigen.
Während ThemeKit Ihnen in einem Bereich hilft, geht Slate viel weiter. Zusätzlich zur Bereitstellung der Themensynchronisierungsfunktionen von ThemeKit (ThemeKit ist eigentlich Teil von Slate), können Sie es gleichzeitig in mehreren Umgebungen bereitstellen, Skelett-Vorlagen für ein neues Design erstellen und Stylesheets und Skripts flexibel organisieren.
Die gerahmten Schablonen von Slate sind absichtlich leer (Startseite unten): Standard-Liquid-Tags und -Logik, die wahrscheinlich für jede Vorlage verwendet werden, wurden mit wenig bis gar keinem Markup, Klassen oder anderem Code eingefügt, den Sie entfernen müssen. Es ist als voll funktionsfähiger Ausgangspunkt gedacht: Sie müssen nur die Lücken ausfüllen und Sie sind in Betrieb.
Schließlich gibt es eine Reihe von JavaScript- und Sass-Helfern, die Sie verwenden können oder nicht, wenn Sie Folgendes hinzufügen müssen:
JavaScript
- Trap-Fokus
- Responsive Tabellen und Videos
- Währung formatieren
- Bildhelfer
- Produktvarianten
- Cart-Helfer
- Abschnittsveranstaltungen
CSS
- Haltepunkte und Medienanfragen
- Gitter
- SVG-Symbole
- Responsive Tabellen
- Leere Zustände
- Sass Mixins
5. Polaris
Im Mai 2017 hat Shopify das Erscheinungsbild aller seiner Anwendungen aktualisiert: auf dem Desktop und auf dem Handy. Um dieses ehrgeizige Ziel zu erreichen, entwickelte das UX-Team von Shopify ein neues Design-System namens Polaris. Es ist ein voll ausgestattetes System, das nicht nur für den internen Gebrauch bei Shopify vorgesehen ist, sondern auch für Shopify-Partner, die Schnittstellen für Apps erstellen, die über die Shopify-API integriert werden. Ziel ist es, jedem die Bausteine zur
% endif% % endfor% % schema% "name": "Werbeblöcke", "max_blocks": 5, "Presets": ["name": "Werbeblöcke", "category": "Benutzerdefinierter Inhalt der Startseite"], "Blöcke": ["Typ": "Promo-Box", "Name": "Werbebox", "Limit": 1, "Einstellungen": ["ID": " title "," type ":" text "," label ":" title "," default ":" Ihr Titel hier ", " id ":" description "," type ":" textarea "," label " : "Beschreibung", "Standard": "Ihre Beschreibung hier"], "Typ": "Image-Picker", "Name": "Promo Image", "Einstellungen": ["id": "Promo -image "," type ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
