Einführung
Mit der Einführung von Shopify's Online Store 2.0 im Juni 2021 wurde die Art und Weise, wie Themes bei Shopify erstellt werden, von Grund auf überarbeitet. Dieser Leitfaden bietet einen umfassenden Einblick in die Nutzung von Shopify's Sections-Funktion, insbesondere im Kontext von Online Store 2.0. Das Ziel ist es, Entwicklern und Händlern gleichermaßen die notwendigen Einblicke zu geben, um das volle Potenzial dieser leistungsstarken Funktion auszuschöpfen.
Was sind Theme Sections?
Sections sind modulare Komponenten eines Shopify-Themes, die es Händlern ermöglichen, ihre Stores individuell anzupassen. Diese Abschnitte enthalten Inhalte und Einstellungen für spezifische Bereiche eines Shopify-Stores, sei es die grundlegenden Elemente einer Produktseite oder ein Slideshow-Komponente.
Die Rolle von Templates und Sections
Um die Funktionsweise von Sections vollständig zu verstehen, ist es wichtig, das Templates-System von Shopify zu kennen. Mit Online Store 2.0 kann jeder Seitentyp als .json-Datei im /templates-Verzeichnis eines Themes repräsentiert werden. Entwickler können die in diesen JSON-Dateien standardmäßig erscheinenden Sections definieren.
Ein Beispiel hierfür könnte die Produktseite sein, die mit einer Hauptsektion namens main-product.liquid gerendert wird. Diese Sections werden dann durch den Händler im Theme Editor angepasst, wodurch zusätzliche Sections hinzugefügt oder entfernt werden können.
Grundlagen von Sections: Hauptsektionen und Modulare Abschnitte
Die Entwicklung eines Themes mit Sections und JSON-Templates umfasst im Wesentlichen zwei Kategorien von Abschnittsdateien: "Haupt"-Sektionen und modulare Abschnitte.
Hauptsektionen
In einer Hauptsektion sollten alle standardmäßigen Inhalte für diese Seite enthalten sein. Zum Beispiel könnten in der Hauptsektion für eine Produktseite alle wichtigen Elemente für die Anzeige eines Produkts und seiner zugehörigen Eigenschaften enthalten sein.
Modulare Abschnitte
Modulare Abschnitte hingegen sind wiederverwendbare Sections, die verschiedene Bereiche des Online-Shops ergänzen. Beispiele hierfür sind "featured collections", Slideshows und Anmeldeformulare für Newsletter.
Einstellungen in Sections
Die Einstellungen einer Abschnittsdatei ermöglichen es, Anpassungsoptionen zu erstellen, die Händler im Theme-Editor verwenden können. Diese Einstellungen werden innerhalb von {% schema %} Tags definiert und bieten eine Vielzahl von Optionen, von Texteingaben bis zu Bildauswahlen.
Ein einfaches Beispiel könnte eine benutzerdefinierte Textabschnitt sein, der eine Überschrift und einen Absatz enthält. Jede Einstellung wird durch ein Objekt repräsentiert, das Informationen wie die ID, den Typ und das Standardverhalten definiert.
Einbinden von Sections auf Seiten
Es gibt verschiedene Methoden, Sections in Seiten eines Themes einzubinden. Hier sind drei Ansätze:
1. Einbinden von Sections in JSON-Templates
JSON-Templates akzeptieren eine "Haupt"-Eigenschaft, die die standardmäßige Section für diesen Seitentyp definiert. Zusätzliche Sections können ebenfalls in der JSON-Datei festgelegt werden und werden standardmäßig auf dieser Seite erscheinen.
2. Einbinden von Sections als Optionen auf allen Seiten
Durch Hinzufügen von Voreinstellungen (presets) in den Schema-Einstellungen kann eine Section auf allen Seiten des Themes verfügbar gemacht werden. Diese können im Theme-Editor nach Belieben verschoben, gelöscht oder hinzugefügt werden.
3. Verwendung von {% section %} Tags für statische Sections
Die Liquid section-Tags ermöglichen es, eine Section aus dem /sections-Verzeichnis in einer Liquid-Layout- oder -Template-Datei zu rendern. Diese Sections sind statisch und können nicht im Theme-Editor entfernt oder verschoben werden.
Fazit
Die Einführung von Shopify Online Store 2.0 hat die Möglichkeiten von Sections erheblich erweitert, und diese Anleitung soll Entwicklern helfen, diese Funktionalitäten optimal zu nutzen. Indem Händlern die kreative Kontrolle über ihre Stores ermöglicht wird, schafft Shopify eine umfassende Lösung, um die Anforderungen moderner E-Commerce-Websites zu erfüllen.
Für weiterführende Informationen und praktische Beispiele können Sie die aktualisierte Dokumentation von Shopify zu Online Store 2.0 besuchen: .
Entwickeln Sie Ihr Geschäft mit dem Shopify Partner Program und profitieren Sie von Revenue-Sharing-Möglichkeiten, Entwickler-Vorschauumgebungen und Bildungsressourcen. Melden Sie sich jetzt kostenlos an: .
Dieser Leitfaden bietet einen tiefen Einblick in die Nutzung von Shopify Sections und Online Store 2.0. Durch die Umsetzung dieser Best Practices können Sie sicherstellen, dass Ihr Shopify-Theme nicht nur den modernen Standards entspricht, sondern auch die Anpassungsmöglichkeiten bietet, die Ihre Kunden wünschen.