So erstellen Sie Ihren ersten Shopify-Designabschnitt

Es ist entscheidend, Ihren Kunden die kreative Kontrolle zu geben, insbesondere wenn sie die Möglichkeit haben möchten, ihre Storefront anzupassen. Die Abschnittsfunktion von Shopify ist ein leistungsstarkes Tool zum Personalisieren von Shopify-Designs. Wenn Sie sie also effizient verwenden und Best Practices befolgen, werden Ihren Kunden eine Reihe von Optionen freigeschaltet.

Wenn Sie ein Shopify-Design von Grund auf neu erstellen oder ein Design für einen Kunden optimieren, müssen Sie einige verschiedene Arten von Abschnitten erstellen, die je nach Kontext variieren. Darüber hinaus erwarten Kunden ein benutzerfreundliches und intuitives Erlebnis, was bedeutet, dass der richtige Abschnitt am richtigen Ort einen großen Einfluss auf die Konversion haben kann.

In diesem Artikel behandeln wir, wie Sie mit der Erstellung verschiedener Arten von Themenabschnitten beginnen und die Regeln für deren Verwendung, damit Sie Ihren Kunden helfen können, ihren Shop anzupassen. Wir werden auch einige Beispiele für bestimmte Abschnitte aus unserem quellenverfügbaren Thema Dawn untersuchen, um genau zu demonstrieren, wie Sie sie in Szenarien der realen Welt verwenden können.

Was sind Themenbereiche?

Auf hoher Ebene sind Abschnitte modulare Komponenten eines Shopify-Designs, das Händler anpassen können. Abschnitte enthalten Inhalte und Einstellungen für bestimmte Bereiche eines Shopify-Shops, z. B. die Grundelemente einer Produktseite oder eine Diashow-Komponente.

Innerhalb dieser Abschnitte haben Entwickler Zugriff auf eine Reihe verschiedener Einstellungstypen, von Texteingaben und Bildauswahl bis hin zu benutzerdefiniertem HTML und Menüs, die Händler über den Themeneditor anpassen und mit ihren Inhalten füllen können.

Abschnitte sind im /sections -Verzeichnis eines Designs enthalten und können statisch in die Layoutdateien eines Designs eingefügt werden (wie die Kopf- und Fußzeile), oder sie können dynamisch zu jeder Vorlage aus dem Design-Editor hinzugefügt werden. Um einen Eindruck von den verschiedenen Komponenten zu bekommen, die als Abschnitte dargestellt werden können, können Sie das /sections -Verzeichnis des Dawn-Designs durchsuchen.

Mit der Einführung von Online Store 2.0 können Abschnitte nun als primäre Methode verwendet werden, um all die verschiedenen Aspekte Ihres Themas zu organisieren, von ganzen Seiten bis hin zu einzelnen Elementen. Wie wir in diesem Artikel behandeln werden, können Sie durch die Möglichkeit, Abschnitte zu beliebigen JSON-Vorlagen hinzuzufügen, verschiedene Seiten einfach anordnen, was weiter verbessert werden kann, wenn Händler ihr Design anpassen.

Vorlagen und Abschnitte

Eine der Voraussetzungen, um zu lernen, wie Abschnitte in Shopify-Themes funktionieren, ist das Verständnis des Theme-Vorlagensystems von Shopify. Mit Online Store 2.0 kann jeder Seitentyp als .json -Datei im /templates -Verzeichnis eines Designs dargestellt werden. Entwickler können jeden Seitentyp strukturieren, indem sie definieren, welche Abschnitte standardmäßig in diesen JSON-Vorlagendateien angezeigt werden.

Diese JSON-Vorlagen enthalten keine Markup- oder Liquid-Objekte zum Anzeigen von Store-Inhalten, sie sind einfach Datendateien, die angeben, welche Abschnitte standardmäßig auf einer Seite erscheinen und in welcher Reihenfolge.

Ein einfaches Beispiel dafür, wie eine product.json Vorlagendatei aussehen könnte, wäre:

In diesem Fall würde eine Produktseite mit einem Abschnitt namens main-product.liquid , und dies wäre der einzige Abschnitt, der standardmäßig angezeigt wird. Wenn ein Händler diese Seite anpasst und der Seite weitere Abschnitte hinzufügt, wird die Vorlagendatei product.json mit diesen Informationen aktualisiert. Wir werden diesen Prozess in diesem Artikel näher untersuchen, wenn wir uns ansehen, wie Abschnitte in Vorlagen aufgenommen werden.

Grundlagen der Abschnitte

Wenn Sie Ihr Design mit Abschnitten und JSON-Vorlagen entwickeln, können Sie Abschnittsdateien in zwei verschiedenen Kategorien erstellen: „Hauptseiten“-Abschnitte und einzelne modulare Komponenten.

Hauptseitenabschnitte

Innerhalb eines Hauptseitenabschnitts sollten Sie den gesamten Standardinhalt für diese Seite einfügen. Beispielsweise würden Sie im Hauptabschnitt einer Produktseite die wichtigen Elemente zum Anzeigen eines Produkts und der zugehörigen Eigenschaften wie Produkttitel, Beschreibung, Medien, Preis und das Formular zum Hinzufügen zum Warenkorb hinzufügen.

Sie können innerhalb eines Abschnitts auf Liquid-Variablen oder -Objekte zugreifen, je nachdem, in welcher Seitenvorlage ein Abschnitt enthalten ist. Das bedeutet, dass ein Abschnitt, der in einer product.json Vorlage gerendert wird, auf alle Attribute des product Liquid zugreifen kann -Objekt, das das Produkt darstellt, dessen Seite gerendert wird.

Ebenso kann ein Abschnitt, der in einer collection.json -Datei enthalten ist, auf alle Attribute des collection -Liquid-Objekts zugreifen. Alle Abschnitte können unabhängig davon, wo sie angezeigt werden, auf alle globalen Liquid-Objekte zugreifen.

Zusätzlich zu den Markup- und seitenspezifischen Liquid-Objekten, die Sie einem Hauptseitenabschnitt hinzufügen, können Sie auch Einstellungen innerhalb von {% schema %} -Tags erstellen. Diese Einstellungen können auf Elemente im Abschnitt verweisen und können von Händlern im Themeneditor konfiguriert werden.

Da ein Hauptseitenabschnitt Markup enthält, das für einen bestimmten Seitentyp spezifisch ist, sollten Sie es nur in die zugehörige Vorlage einfügen. Um zu verhindern, dass ein Hauptseitenabschnitt zu anderen Seitentypen aus dem Themeneditor hinzugefügt wird, sollte er keine Voreinstellungen in seinem Abschnittsschema enthalten.

Um ein Beispiel für einen Hauptseitenabschnitt anzuzeigen, können Sie die Datei main-product.liquid im /sections -Verzeichnis von Dawn oder einen der Abschnitte mit dem Präfix main im Titel durchsuchen. Als allgemeine Regel sollten Sie Ihre Hauptseitenabschnitte auch mit main im Titel benennen, um Ihnen zu helfen, zwischen verschiedenen Abschnittstypen zu unterscheiden.

Modulare Abschnitte

Modulare Abschnitte sind Abschnitte, die in verschiedenen Bereichen eines Online-Shops wiederverwendet werden können und die Hauptelemente einer Seite ergänzen. Beispiele für diese Arten von Abschnitten sind vorgestellte Sammlungen, Diashows und Newsletter-Anmeldeformulare.

Diese Abschnitte werden im Allgemeinen von Händlern mithilfe des Design-Editors zu Seiten hinzugefügt, anstatt dass die Abschnitte standardmäßig zu einer Seitenvorlage hinzugefügt werden. Damit ein Abschnitt über den Editor zu einer Seite hinzugefügt werden kann, muss der Abschnitt Voreinstellungen in seinem Schema enthalten. Sobald diese Voreinstellungen hinzugefügt wurden, ist der Abschnitt eine verfügbare Option, wenn der Händler im Design-Editor auf Abschnitt hinzufügen klickt.

Im Gegensatz zu „Hauptseiten“-Abschnitten enthalten modulare Abschnitte in der Regel Inhalt und Markup, die auf verschiedenen Seitentypen und in verschiedenen Kontexten in einem Shopify-Shop wiederverwendet werden können. Entwickler sollten es daher vermeiden, sich in diesen Abschnitten auf seitenspezifische Liquid-Objekte zu verlassen.

Es ist jedoch möglich, einen Abschnitt so einzuschränken, dass er nur auf bestimmten Seitentypen verfügbar ist, indem das Attribut templates innerhalb des Abschnittsschemas verwendet wird. Wenn Sie beispielsweise einen Abschnitt nur auf Produkt- und Kollektionsseiten beschränken möchten, würden Sie diese Zeile in die schema -Tags des Abschnitts einfügen:

 "templates": ["product", "collection"]

Das Attribut templates akzeptiert eine Liste von Zeichenfolgen, die den Seitentyp darstellen.

Je nachdem, welche Funktionen Sie in Ihr Design aufnehmen möchten oder welche spezifischen Anforderungen Ihr Kunde hat, erstellen Sie wahrscheinlich eine Reihe verschiedener Abschnitte, die einzigartige Funktionen ermöglichen. Um Beispiele für modulare Abschnitte anzuzeigen, können Sie den Newsletter-Abschnitt oder den Rich-Text-Abschnitt erkunden, der in Dawn verwendet wird.

Abschnittseinstellungen

Wir haben uns kurz angesehen, wie die Einstellungen einer Abschnittsdatei verwendet werden können, um Anpassungsoptionen zu erstellen, auf die Händler zugreifen können, aber lassen Sie uns etwas tiefer in diese eintauchen, um zu sehen, wie sie aufgebaut sind.

Wie wir gesehen haben, sind Einstellungen in Abschnittsdateien innerhalb von {% schema %} -Tags enthalten, die angeben, dass es sich um Einstellungen handelt, die auf der Benutzeroberfläche des Design-Editors gerendert werden sollen. Ein sehr einfaches Beispiel dafür könnte ein benutzerdefinierter Textabschnitt sein, der etwa so aussehen könnte:

In diesem Beispiel haben wir zwei HTML-Elemente: ein Überschriftenelement und ein Absatzelement. Jedes dieser Elemente enthält dynamische Inhalte, die wir mit dem Liquid-Objekt section.settings erstellt haben. Mit diesem Abschnittsobjekt können wir Einstellungswerte abrufen, indem wir auf die eindeutige ID der Einstellung verweisen.

Unter dem HTML- und Liquid-Markup befinden sich unsere Abschnittseinstellungen, die in unseren {% schema %} -Tags enthalten sind. Jede Einstellung wird durch ein Objekt dargestellt, in dem wir die Einstellungs- id , ihren type und ihre Darstellung im Editor definieren können. Um auf die Einstellung eines Abschnitts in Liquid zuzugreifen, hängen Sie seine id an das Liquid-Objekt section.settings an. Wir definieren auch die Art der Einstellung und wie sie im Themeneditor angezeigt wird.

Innerhalb der Einstellungen unserer Schema-Tags:

• id bezieht sich auf die zu definierende Liquid-Variable
• type definiert die Art der Ausgabe, die wir erstellen
• label stellt Kontext bereit, der im Designeditor angezeigt wird
• default weist einen Standardwert zu

In diesem Beispiel habe ich ein text für unsere Überschrift und ein richtext -Text-Feld für unseren Hauptteil erstellt, aber Sie könnten je nach Ihren Kundenanforderungen eine Vielzahl von Ausgabetypen hinzufügen. Andere gültige Eingabetypen sind image_picker , radio , video_url und font_picker .

Dieses Beispiel ist jetzt ein gültiger Abschnitt, uns fehlt jedoch ein wichtiger Aspekt: ​​die Bestimmung, wo genau der Abschnitt im Thema erscheinen wird. Wir werden später einige verschiedene Ansätze zum Einfügen von Abschnitten untersuchen, aber im Moment lassen wir zu, dass der Abschnitt über den Design-Editor zu jeder Seite hinzugefügt wird, indem wir Voreinstellungen im Abschnitt erstellen.

Voreinstellungen sind Standardkonfigurationen von Abschnitten und werden innerhalb der {% schema %} -Tags eines Abschnitts hinzugefügt. In unserem einfachen Beispiel könnten die Presets so aussehen:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Nach dem Hinzufügen zu unserem Beispiel würde der benutzerdefinierte Textfeldabschnitt wie folgt aussehen:

Wenn wir nun zum Design-Editor navigieren und auf einer beliebigen Seite Abschnitt hinzufügen auswählen, wird dieser Abschnitt als verfügbare Option angezeigt. Die von uns erstellten Abschnittseinstellungen werden in der rechten Seitenleiste mit den von uns hinzugefügten Beschriftungen und dem Standardtext angezeigt, und wir können die Eingabetexteinstellungen ausfüllen, die in unserem Abschnitt angezeigt werden.

Dies ist ein einfaches Beispiel, das die Beziehung zwischen Abschnittseinstellungen und Variablen zeigt, die Sie innerhalb von Abschnitten erstellen können, sowie wie diese im Design-Editor gerendert werden. Für ein fortgeschritteneres Modell können Sie den Rich-Text-Abschnitt des Dawn-Designs erkunden.

Einschließlich Abschnitten auf Seiten

Wie wir bereits erwähnt haben, gibt es eine Reihe von Methoden, um Abschnitte auf Seiten eines Themas einzufügen. Lassen Sie uns jeden dieser Ansätze einzeln untersuchen und einige der Regeln entpacken, die für sie gelten.

1. Einfügen von Abschnitten in JSON-Vorlagen

Als wir uns die Hauptseitenabschnitte angesehen haben, haben wir gesehen, dass JSON-Vorlagendateien eine "main" -Eigenschaft akzeptieren, die zum Standardabschnitt für diesen Seitentyp wird und alle wichtigen Inhaltselemente für diese Seite enthalten sollte.

Zusätzlich zu einem "main" -Abschnitt ist es auch möglich, andere Abschnitte in eine JSON-Vorlage aufzunehmen, die standardmäßig auf diesem Seitentyp angezeigt werden. Wenn wir als Beispiel eine Produkt-JSON-Vorlage verwenden, könnten wir einen Abschnitt mit Produktempfehlungen auf der Seite einfügen, indem wir ein neues Objekt unterhalb des Abschnitts "main" hinzufügen:

In diesem Fall weisen wir dem Abschnitt einen Namen zu, recommendations , und die type -Eigenschaft wird verwendet, um zu identifizieren, welche Datei im /sections -Verzeichnis wir einschließen möchten.

Da diese JSON-Vorlage auf mehr als einen Abschnitt verweist, müssen wir definieren, wie die Abschnitte innerhalb des order nacheinander angezeigt werden. Jedem in einer JSON-Vorlage enthaltenen Abschnitt muss eine Standardreihenfolge zugewiesen werden, Händler können die Abschnitte jedoch im Themeneditor neu anordnen.

Abschnitte ohne Voreinstellungen, die zu JSON-Vorlagen hinzugefügt werden, können im Design-Editor nicht entfernt werden, aber sie können ausgeblendet werden, wenn ein Händler sie nicht benötigt. Ein praktisches Beispiel dafür, wie Abschnitte in einer JSON-Vorlage angeordnet werden können, finden Sie in der Dawn-Produktvorlage.

2. Einfügen von Abschnitten als Optionen auf allen Seiten

Wie wir bei unserem benutzerdefinierten Text gesehen haben, ist es möglich, einen Abschnitt auf allen Seiten eines Designs verfügbar zu machen, wenn presets in den schema vorhanden sind.

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Bei Verwendung dieses Ansatzes können diese Abschnitte im Themeneditor hinzugefügt, neu positioniert und gelöscht werden. Diese Abschnitte können auch mit der templates Eigenschaft auf bestimmte Seiten beschränkt werden.

Diese Drag-and-Drop-Funktion bedeutet, dass beim Erstellen benutzerdefinierter dynamischer Abschnitte eine Vielzahl von Optionen zum Personalisieren von Shops freigeschaltet werden. Sie können bewegliche Abschnitte für Videos, Produkte oder Bildergalerien erstellen. Ein gutes Beispiel für einen Abschnitt, der diese Methode verwendet, wäre der Newsletter-Abschnitt von Dawn.

3. Verwenden von {% Abschnitt %}-Tags, um statische Abschnitte hinzuzufügen

Mit dem section -Tag von Liquid können Sie einen Abschnitt aus dem Verzeichnis /sections in einem Liquid-Layout oder einer Vorlagendatei rendern. Dieses Tag könnte folgendermaßen aussehen:

 {% section 'header' %}

Abschnitte, die mit diesem section -Tag hinzugefügt wurden, können im Design-Editor nicht entfernt, neu positioniert oder ausgeblendet werden. Die Position dieses Abschnitts auf der Seite ist gesperrt, je nachdem, wo er in einer Layoutdatei oder Vorlage hinzugefügt wurde.

Dieser Ansatz wird am häufigsten für Inhalte und Komponenten verwendet, die immer sichtbar sein sollen, wie z. B. Kopfzeilen, Fußzeilen und Ankündigungsleisten. Um ein Beispiel dafür auf Dawn zu sehen, können Sie sich die Datei theme.liquid ansehen, in der die statische Ankündigungsleiste, der Kopfabschnitt und die Fußzeilenabschnitte mit dem section -Tag hinzugefügt werden.

Kreativität fördern

Nachdem Sie nun gesehen haben, wie Sie Abschnitte zu Ihren Themen erstellen und hinzufügen, können Sie endlose Optionen für die Geschäfte Ihrer Kunden erstellen.

Die Arbeit mit JSON-Vorlagen erschließt die Leistungsfähigkeit von Abschnitten für alle Seiten eines Themas, wodurch Händler ihren Shop genau so aufbauen können, wie sie es möchten – mit einer Anleitung von Ihnen.