Headerbild: Theme-Entwicklung in Shopify | Grüner Einkaufswagen auf einer Return-Taste
onlineshopdevelopmentecommerce
Autor: Kevin Müller

Theme-Entwicklung in Shopify

Wie baue ich eigentlich ein Content-Element, welches ich dann in Shopify nutzen kann? Wir beginnen mit einer kurzen Einführung zur Theme-Entwicklung mit Shopify und werden dann step by step die Entstehung eines neuen Content-Elements mitverfolgen. Gut aufgepasst, nachbauen erwünscht.

Shopify wurde mit der Entwicklungssprache Ruby on Rails geschrieben und arbeitet mit der Templatesprache Liquid.

Was kann man sich unter Liquid vorstellen?
"Liquid ist eine Open-Source-Templatesprache, welche von Shopify entwickelt und eingesetzt wird.
Diese wird in Ruby geschrieben, aber in starker Anlehnung an Templatesprachen wie Smarty oder TWIG.
Diese Sprache dient als Grundlage für Shopify Themes und wird verwendet, um dynamischen Inhalt für die Webseite zu laden oder auch Abfragen im Template einzubauen."


Template-Struktur von Shopify

Die Template-Struktur von Shopify ist umfangreich und besteht aus:

  • assets
    Hier werden alle Bilder gespeichert, sowie zusätzliche CSS- und Javascript-Dateien. Vorteilhaft ist, dass hier die liquid-Filter-Funktion asset_url verwendet werden kann. Diese Funktion referenziert auf eine spezifische Anlage (Asset), wodurch ein Bild in unser Template eingepflegt werden kann. 
     
  • config
    Hier werden die settings_schema.json- und die settings_data.json-Dateien gelagert.
    In diesen Dateien sind alle Farben hinterlegt, die das Theme benötigt, sowie globale Einstellungen wie Social Links, Favicon usw.
    Diese Dateien sind für das Frontend sehr wichtig und sollten ohne Entwickler-Kenntnisse nicht bearbeitet werden!
     
  • layout
    Hier lagern die Layout-Templates. Die Standard-Theme-Datei ist unter theme.liquid zu finden. Dies wird benötigt, wenn wir unterschiedliche Layouts auf der Seite verwenden.
    Alle Liquid-Templates im Template-Ordner werden in der Standard-Theme-Datei inkludiert.
     
  • locales
    Hier werden die Sprachübersetzungsdateien gelagert. Wir haben hier die Möglichkeit, Textabschnitte oder Textbausteine in unterschiedlichen Sprachen zu pflegen. Diese Übersetzungen werden mit je einem Key abgespeichert. Diesen Key können wir dann in ein Template einsetzen.

    Ein Beispiel von der JSON-Datei :
    { "blog": { "title": "Theme Entwicklung in Shopify" } }

    Somit könnte unser Textbaustein im Template so aussehen:
    {{ 'blog.title' | t }}
  • sections
    Hier lagern die Abschnitte (Sections) für das jeweilige Theme. Diese Abschnitte beinhalten wiederverwendbare Inhaltsmodule.
    Die Inhaltsmodule sind dafür verantwortlich, dass der Redakteur seine Seite individuell mit dem Theme-Editor gestalten kann.
     
  • snippets
    Hier befinden sich die Snippets, also "Codeschnipsel". Diese Codeteile können in andere Templates referenziert und so wiederverwendet werden.
    Für die Referenzierung nutzen wir die Liquid render-Funktion.
     
  • template

    Hierunter finden sich alle weiteren Templates. Diese werden für neu angelegte Inhaltsseiten sowie Kategorie-, Produkt- oder Blogseiten verwendet.


Eigenentwicklung eines Content Elements

Um unser neu erlerntes Wissen direkt umzusetzen, soll im nachfolgenden Schritt selbst ein Inhaltselement programmiert werden.
Ziel soll sein, auf einer neuen Seite ,,Über Uns" ein Text-Bild-Element inklusive Überschrift zu erstellen.

Folgende Anforderungen gelten:

* Der Header-Titel soll redaktionell pflegbar sein.
* Der Text soll pflegbar sein.
* Das Bild soll pflegbar sein.


Das Template hinzufügen

Zuerst legen wir uns ein neues Template an. Unter folgendem Pfad: Online-Shop > Themes > Code kann der Code bearbeitet werden.
Unter „Templates“ auf „Template hinzufügen“ erscheint eine Formularmaske, die nun wie folgt ausgefüllt werden soll:

Der Code im Template sieht folgendermaßen aus:

{% section 'about-us' %}

So kann auf eine künftige Section verwiesen werden. Nur mit Hilfe einer Section besteht die Möglichkeit, die vorgegebenen Anforderungen einzuhalten, da nur über eine Section Content-Elemente konfiguriert werden können.

Eine neue Section und ein neues Snippet anlegen

Die neue Section wird für die Seite "About Us" und das Snippet für das Content Element "Text Image with Headline" angelegt.

Snippet: Im Code Editor unter Snippets kann ein neues Snippet hinzugefügt werden.

Das Snippet für das Content-Element nennen wir ,,text-image-with-headline", die Section für unsere Seite ,,about-us" (die Section muss nach der Referenzierung benannt sein).

Als erstes nehmen wir uns das Snippet ,,text-image-with-headline" vor.

Für das Content-Element soll zunächst geprüft werden, ob die Konfiguration leer ist oder nicht. Hierfür wird die if - Bedingung von Liquid eingesetzt, welche mit der vordefinierten ID abgefragt wird. Das sieht dann so aus:

{%- if section.settings.title != blank -%}

....

{% endif %}

Innerhalb dieser Bedingung ist das div definiert, sodass der Code-Teil nur Anwendung findet, wenn er benötigt wird.
Weiterhin sollte der Titel pflegbar sein, also brauchen wir hier einen Platzhalter.

{{ section.settings.title | escape }}

Dieser Platzhalter wird später mit dem Inhalt des Elements ersetzt. Da es sich hierbei um eine Überschrift handelt, sollte hier noch ein h2-HTML-Tag eingesetzt werden.

Der gesamte Code-Abschnitt sieht dann wie folgt aus:

{%- if section.settings.title != blank -%}

<div class="section-header logo-bar-headline">

<h2 class="section-header__title">{{ section.settings.title | escape }}</h2>

</div>

{% endif %}


Text

Für den Text kann beinahe die gleiche Abfrage erstellt werden wie für die Headline:

{% if section.settings.text != blank %}

<div class="rte">

  <p>

{{ section.settings.text }}

</p>

  </div>

{% endif %}


Bilder

 

Im HTML-Bereich soll wieder geprüft werden, ob die Konfiguration gesetzt ist oder nicht. Innerhalb der Abfrage kann das Bild dargestellt werden. Shopify bietet hier schon eine gute Lösung:

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

Hier werden neue Variablen deklariert, in welche das hochgeladene Bild eingesetzt wird, plus weitere Konfigurationen. Hierzu gibt es einen Blogbeitrag von Shopify selbst.

Der HTML-Code für das Bild sieht dann so aus:

<img class="feature-row__image lazyload"

data-src="{{ img_url }}"

data-widths="[180, 360, 540, 720, 900, 1080]"

data-sizes="auto">

In diesem Beispiel werden Lazysizes verwendet. Unserer Empfehlung nach sollte nach Möglichkeit immer Lazy Loading verwendet werden, um die Performance der Seite zu verbessern. Lazy Loading kann ganz einfach durch Lazysizes eingesetzt werden.

Des Weiteren gibt es die Möglichkeit, einen Platzhalter einzubinden, welcher erscheint, wenn noch kein Bild hochgeladen wurde. Dafür gibt es eine vorgefertige Funktion:

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

Der gesamte Teilabschnitt sieht so aus:

<div class="feature-row__item">

{% if section.settings.image != blank %}

<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.image.aspect_ratio }}%;">

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<img class="feature-row__image lazyload"

data-src="{{ img_url }}"

data-widths="[180, 360, 540, 720, 900, 1080]"

data-sizes="auto">

</div>

{% else %}

<div class="image-wrap">

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

</div>

{% endif %}

</div>

 

<tmpopup style="top: 8px; left: 327.3px;"><tmpopupcolor id="tmpopupcolor--2" style="background: rgb(246, 118, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--3" style="background: rgb(67, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--m" style="background: rgb(45, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--v" style="background: rgb(43, 247, 255) none repeat scroll 0% 0%;"></tmpopupcolor></tmpopup><tmpopup style="top: 8px; left: 327.3px;"><tmpopupcolor id="tmpopupcolor--2" style="background: rgb(246, 118, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--3" style="background: rgb(67, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--m" style="background: rgb(45, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--v" style="background: rgb(43, 247, 255) none repeat scroll 0% 0%;"></tmpopupcolor></tmpopup>


Gesamter HTML-Code für unser Snippet

Das Content-Element ist nun fertig erstellt. Der gesamte Code des Elements sieht so aus:
 

<div class="page-width">

{%- if section.settings.title != blank -%}

<div class="section-header logo-bar-headline">

<h2 class="section-header__title">{{ section.settings.title | escape }}</h2>

</div>

{% endif %}

<div class="feature-row">

{% if section.settings.text != blank %}

<div class="rte">

<p>

{{ section.settings.text }}

</p>

</div>

{% endif %}

</div>

<div class="feature-row__item">

{% if section.settings.image != blank %}

<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.image.aspect_ratio }}%;">

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<img class="feature-row__image lazyload"

data-src="{{ img_url }}"

data-widths="[180, 360, 540, 720, 900, 1080]"

data-aspectratio="{{ section.settings.image.aspect_ratio }}"

data-sizes="auto">

</div>

{% else %}

<div class="image-wrap">

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

</div>

{% endif %}

</div>

</div>


Template ,,About Us"

Zum Template:

Die Sections sind alle in zwei Teile gesplittet, bestehend aus HTML/Liquid und JSON.
Während der HTML-Code für den Aufbau des Elements zuständig ist, sorgt der JSON-Code für die Konfiguration des Elements.

Hier kann eine Kopie eines bereits bestehenden Templates verwendet werden, wie beispielsweise page-sections-template.liquid. Danach muss lediglich unter schema der Name zu "About Us" geändert werden.
Um das neue Content-Element zu nutzen, sollte der HTML-Code in das Template inkludiert und die Konfiguration dafür erstellt werden.

HTML-Code für die Section

Hier kann die folgende Shopify-Funktion genutzt werden:

{% render 'text-image-with-headline', section: block %}

Mit dem oberen Abschnitt kann das neue Snippet in die Section inkludiert werden. Hierfür wird der Dateiname des neuen Snippets verwendet.

JSON-Code der Section

Jetzt wird es ein wenig schwieriger: Das neue Snippet muss in die Section-Konfiguration hinzugefügt werden. Dafür muss unter Blocks der folgende Code hinzugefügt werden:

 {

        "name": "Image with text",

        "type": "image_with_text",

        "settings": [

              {

                "type": "text",

                "id": "title",

                "label": "Heading",

                "default": "Image with text"

            },

            {

              "type": "image_picker",

              "id": "image",

              "label": "Image"

            },

            {

                "type": "richtext",

                "id": "text",

                "label": "Text",

                "default": "<p>Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.</p>"

           }

         ]

}

Für jedes konfigurbare Feld werden Type, Label und ID benötigt. Außerdem muss für das gesamte Content-Element ein neuer Type definiert werden.


Das Ergebnis

Das Ergebnis kann sich sehen lassen!
Das neue Content-Element kann nun im Theme-Editor ausgewählt werden.
 

Und kribbelt es schon in den Fingern?
Na dann heißt es jetzt: Loslegen!

Pushbenachrichtigungen aktivieren

Dank der Push-Notifications von dkd sind Sie immer up to date und erhalten Pushs zu neuen Blogbeiträgen. Wir versorgen Sie mit News, ausgewählten Themen und Sachbeiträgen, die die unsere Branche bewegen.
Benachrichtigungen deaktivieren
Indem Sie unsere Benachrichtigungen zulassen, erklären Sie sich damit einverstanden, dass wird Ihre Browser ID nutzen, um Ihnen Push-Benachrichtiungen über neue dkd Blogartikel zukommen zu lassen. Sie können Ihre Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen. Weitere Informationen zur Verarbeitung Ihrer Daten können Sie unseren Datenschutzhinweisen entnehmen.

Über den Autor

Kevin Müller

Kevin Müller arbeitet als TYPO3-Developer bei dkd Internet Service GmbH.

Mehr Beiträge von diesem Autor

Kommentar schreiben

Ich willige in die Speicherung meiner Daten ein.*

Hinweise und weitere Informationen zu der von Ihnen gegebenen Einwilligung zur Speicherung der oben eingegebenen Daten zum Zweck der Kontaktaufnahme und Ihrem Widerrufsrecht erhalten Sie in den Datenschutzhinweisen.

* Diese Felder sind Pflichtfelder