Eines der markantesten Vorteile von Shopify ist der modulare Aufbau des Themes. Es benötigt keine großen Anpassungen, um eine Section in das Frontend einzubinden. Viele der erfolgreichsten Shopify Shops haben mit der Hilfe von Sections ihre User Experience aufgewertet und diese für verschiedenste Zwecke genutzt.
In diesem kurzen Tutorial erklären wir, wie ein neuer Abschnitt in ein bestehendes Theme eingebaut wird. Wir setzen dabei voraus, dass das Theme bereits Sections besitzt. Bei älteren Themes muss das eventuell noch in der index.liquid eingeführt werden.
Was ist eine Section?
Wie es in WordPress Blöcke gibt, gibt es in Shopify Sections. Dabei handelt es sich um Abschnitte, die wiederverwendbar auf der gesamten Shopseite verwendet werden können. Das können Textelemente, Slider, Galerien oder Teile eines Plugins sein.
Der große Vorteil der Sections ist, dass sie sowohl für Entwickler als auch für Shopinhaber leicht zu verwenden sind. Shopify kommt zwar nicht von Haus aus mit vielen Abschnitten, dafür ist das System dann auch nicht mit Elementen überladen, die eventuell nicht verwendet aber geladen werden.
Neue Shopify Section erstellen
Alles beginnt im Code des jeweiligen Themes. Dazu wechseln wir also in den Code-Editor von Shopify. Das ist bei allen Themes gleich. Dort suchen wir in der mittleren Spalte den Bereich „Sections“.
Dort können wir entweder mit einem Klick auf „Ein neues section hinzufügen“ einen fast blanken Abschnitt anlegen oder eine bestehende kopieren und anpassen. Da wir aber wirklich etwas Eigenes schreiben wollen, beginnen wir mit einer leeren Section.
Nach dem Klick wird man um einen Namen für den Abschnitt gebeten. Es sollte etwas Sinnvolles sein, da es aber im Frontend nicht dargestellt wird, reicht ein passender Name, den ein Entwickler versteht. Nachdem wir uns für einen entschieden haben, erstellt Shopify uns automatisch eine kleine Vorlage mit Liquid, der Scriptsprache für’s Theme.
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Das Template besteht zunächst aus dem Schema, dem Stylesheet und JavaScript. Die letzten beiden sind quasi selbsterklärend. Dort sollen CSS und JS hinterlegt werden. Dies geht sowohl direkt in der Section oder ausgelagert, in einer eigenen Datei. Diese legen wir in der Regel in den Abschnitt Asset weiter unten. Das lassen wir diesmal noch aus.
Wichtig für uns ist das Schema. Denn damit bestimmen wir, wie der Aufbau des Abschnitts im Backend aussieht. Ein Redakteur oder Editor, der die Section im Backend später verwendet, wird nur die Felder zur Verfügung haben, die wir vorher im Schema registrieren.
HTML vor Schema
Bevor wir uns allerdings mit dem Schema beschäftigen, macht es Sinn, zuerst das HTML-Template anzulegen. Das ist der Teil des neuen Abschnitts, der später tatsächlich im Frontend ausgespielt wird. Wir könnten sogar nur HTML verwenden und damit eine statische Section erstellen, die Redakteure nicht bearbeiten können. Und damit beginnen wir auch. Dynamisch gestalten, werden wir es danach.
<h2 class="h1"></h2>
<ul class="logo-list__listing">
<li class="logo-bar__item">
<a href="
{{ block.settings.link }}
">
</a>
<span class="logo-list__text">
</span>
</li>
</ul>
Wir haben hier jetzt eine Logoliste gebaut, in der wir eine Section erstellen, in der eine Liste von Logos dargestellt wird. Sie soll am Ende horizontal dargestellt werden. In diesem HTML-Code haben wir nur einen Listenpunkt berücksichtigt. Die Section soll danach ganz dynamisch für jedes Logo einen neuen Listenpunkt erstellen. Dafür bauen wir gleich eine For-Schleife ein.
Section mit Liquid erweitern
Hier gibt es verschiedene Herangehensweisen. Entweder man erstellt erst das Schema, weil man vorher schon ganz genau weiß, welche Elemente man benötigt. Oder man erweitert den HTML-Code um das Liquid und weiß dadurch, was in dem Schema benötigt wird. In diesem Fall erweitern wir das Liquid und bauen danach das passende Schema auf. Bei so kleinen Sections geht das. Bei größeren muss natürlich zwingend vorgeplant werden.
Wir geben dem ganzen zunächst einen Titel, der für den gesamten Abschnitt gilt. Das machen wir mit folgendem Element:
<h2 class="h1">{{ section.settings.title | escape }}</h2>
Der Abschnitt sagt, dass es ein Element der gesamten Section ist. Settings sind die Einstellungen der Section. Und title ein Parameter der Section, den wir dem Redakteur über das Schema zur Verfügung stellen:
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
Wenn wir uns diesen Teil das Schema ansehen, erkennen wir vier Parameter in den Einstellungen. Type bestimmt die Art der Einstellungsoption. In diesem Fall macht es bei einer Überschrift Sinn „text“ zu wählen. ID dient dazu die Option eindeutig zuordnen zu können. Wir nennen sie hier logischerweise „title“ und taucht auch im Liquid auf: section.settings.title. Hätten wir es zum Beispiel „header“ genannt, würde es im Liquid section.settings.header heißen. Label ist der Name, den wir der Option im Backend geben. Es gibt auch die Option es mit einer Variablen für verschiedene Sprachen zu versehen. Das machen wir aber ein anderes Mal. Unter „default“ stellen wir einen Platzhalter ein.
Danach schauen wir uns im Liquid an, ob überhaupt Blöcke für diese Section ausgewählt wurden:
{%- if section.blocks.size > 0 -%}
Damit fragen wir ab, ob die Anzahl der Blöcke größer ist als Null. Da eine Section aus Blöcken besteht, beispielsweise Texte, Bilder, etc. werden diese gezählt. Hat der Redakteur die Section ohne Blöcke angelegt können wir mit einem leeren {%- endif -%} bestimmen, dass das HTML nicht ausgespielt werden soll. Das ist auch sinnvoll, da das HTML sonst nur Unsinn darstellt.
Daraufhin lassen wir die Section durchzählen wie viele Blöcke es gibt und bestimmen direkt, wie jeder einzelne Block aufgebaut werden soll: {%- for block in section.blocks -%}
Wir haben uns überlegt, wir wollen einen Link um den gesamten Listenpunkt legen, dann das eigentliche Logo und darunter einen Text zum Logo. Beispielsweise falls man einen Namen zum Logo angeben will.
{%- if block.settings.link != blank -%}
<a href="
{{ block.settings.link }}
">
{%- endif -%}
In der ersten Zeile prüfen wir, ob das Feld Link im Backend leer gelassen wurde. Falls es nicht leer ist, wird der HTML-Tag für Links generiert. Mit block.settings.link holen wir uns aus dem Schema später den Link. In der Logik verhält es sich identisch mit dem Logobild und dem darauffolgenden Text. Da wir jedes Element abfragen, muss der Redakteur sie nur optional ausfüllen.
Interessant ist noch der Tag für das Bild:
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
In der ersten Zeile fragen wir erneut, ob das Feld für das Bild im Block leer ist. Falls es leer ist, suchen wir uns einen Platzhalter in der vierten Zeile. Wir könnten natürlich auch etwas anderes festhalten. Beispielsweise, dass gar kein Logo dargestellt wird und nur der Text bleibt. Sobald ein Logo eingepflegt wird, bestimmen wir in Zeile zwei nicht nur das Bild, indem wir es uns wieder aus dem Schema holen, sondern auch die Größe und mit block.settings.image.alt den Alt-Tag, der beim Upload des Bildes hinterlegt wurde.
Aufbau des passenden Schemas
Anschließend bauen wir das passende Schema für das Backend auf. Wir können es uns so vorstellen, dass wir hier ein Formular definieren, dass der Redakteur im Backend ausfüllt. Das Liquid holt sich die dort eingetragenen Daten und setzt sie passend über das Schema in die Liquid-Tags ein.
Das Schema beginnt mit allgemeinen Daten. Hier mit dem Namen der Section, wie sie im Backend gefunden wird. Für die bessere Verarbeitung via CSS geben wir dem ganzen noch eine Klasse mit. Mit max_blocks können wir festlegen, wie viele Blocks, also hier Logos, der Redakteur maximal anlegen darf. Das ist fast immer nötig, da es kaum möglich ist ein Layout zu erstellen, dass sich unendlich erweitert.
Nach den Settings, die wir bereits erklärt haben, geben wir noch eine weitere Option an, die speziell für die Logogröße verantwortlich ist. Damit ist es dem Redakteur im Backend möglich einzustellen, wie groß das Logo im Frontend ist. Die „label“ werden im Backend in einem Dropdown angezeigt, dabei werden die Logos mit der passenden Pixelbreite versehen.
Als zweites legen wir die Blöcke an. Wir nennen den Block „Logo“ und geben die Einstellungen mit. Dabei besteht jeder Block aus drei Teilen. Einem Bild, ein Link und einem Text. Mit type „Image_picker“ definieren wir, dass der Redakteur das Logo mit einem Bild-Durchsuchen-Feld aussuchen kann. Der type „url“ bietet Redakteuren an Links innerhalb der Shopify-Seite zu wählen oder einen eigenen einzutragen. Der type „text“ ist einfach eine Textzeile, in die ein kurzer Text eingetragen werden kann.
Der dritte Teil des Schemas ist ein Preset. Damit wird, sobald der Redakteur die Section verwendet, diese Blöcke gleich mitangelegt. In diesem Fall haben wir einfach vier mal den selben Block angelegt. Da wir nur mit einem Block arbeiten, ist es einfach. Falls mal mehrere Blöcke verwendet werden, kann mit dem Preset die Anzahl schon vorbestimmt werden.
Section testen
Sobald wir die Section getestet haben, speichern wir die Datei und wechseln auf eine Seite der Shopify-Instanz. Dort legen wir einen neuen Abschnitt an und suchen unsere neue, selbst erstellte Section.
Wenn das Ganze so weit funktioniert, können wir danach auch die notwendigen CSS-Regeln in den dafür vorgesehenen Abschnitt schreiben. Das ist wesentlich einfacher, wenn wir eine funktionierende Section angelegt haben.
