Startseiten-Abschnitte auf Unterseiten

Viele Shopbetreiber schätzen die Möglichkeit, die Startseite des Shopify-Shops flexibel aus bereits vorgefertigten und ausdesignten Abschnitten zusammenstellen zu können. Regelmäßig entsteht dann der Wunsch, genau diese Abschnitte auch auf Unterseiten zu verwenden – schließlich wäre die hübsche Bildergalerie bspw. ja auch für die "About Us"-Seite bestens geeignet. Da dies jedoch nicht ohne Weiteres möglich ist, ist die auf diese Erkenntnis folgende Enttäuschung oft groß. Das muss aber nicht sein, denn es gibt – wenn auch mit einigen Einschränkungen – sehr wohl die Möglichkeit, die Startseiten-Abschnitte auch für Unterseiten verfügbar zu machen.
Achtung: Die im Folgenden beschrieben Techniken erfordern ein grundlegendes Verständnis der in Shopify-Themes eingesetzten Technologien. Bitte fahre nur fort, wenn du dich mit der Bearbeitung des Codes deines Shopify-Themes sicher fühlst und lege auf jeden Fall vorher ein Backup deines Themes an.

Den Code deines Themes bearbeiten

Es gibt mehrere Möglichkeiten, den Code deines Themes direkt zu bearbeiten. Um an dieser Stelle keine weiteren Baustellen aufzureißen, nutzen wir die einfachste Möglichkeit und bearbeiten den Code direkt im Shopify-Adminbereich. Gehe dazu einfach auf "Vertriebskanäle" ➝ "Onlineshop" ➝ "Themes" und dann auf "Aktionen" ➝ "Code bearbeiten".

Im Rahmen dieses Blogbeitrags zeigen wir die Anpassung beispielhaft für das Shopify-Theme "Narrative" und die Abschnitte "Galerie" und "Foto mit überlegtem Text" – das Vorgehen lässt sich aber problemlos für andere Themes und Abschnitte adaptieren.

Die richtigen Abschnitte finden

Bevor du den Abschnitt für eine Unterseite verfügbar machen kannst, musst du zunächst die richtige Datei finden. Alle Abschnitte sind im Ordner "Sections" zu finden – die einzelnen Dateien sind mehr oder weniger verständlich benannt. Zudem findet sich in den Dateien unter "schema" auch die jeweilige deutsche Übersetzung.

So befindet sich beispielsweise der Code für den Abschnitt "Galerie" in der Datei "gallery.liquid" und der Code des Abschnitts "Foto mit überlegtem Text" befindet sich in der Datei "hero.liquid". Du öffnest also im ersten Schritt die Datei "gallery.liquid" und kopierst den gesamten Code in die Zwischenablage.

Neue Sections anlegen

Im nächsten Schritt legst du eine neue Section an. Dabei ist es ratsam, die Section mit einem nachvollziehbaren Namen zu bezeichnen. Da du die Galerie für die "About Us"-Seite anlegen möchtest, nennst du die neue Section bspw. "about-us-gallery.liquid". In der neuen Section entfernst du den gesamten bestehenden Code, fügst den Code aus der Zwischenablage ein und speicherst die Datei.

 Diesen Vorgang wiederholst du direkt noch einmal für den Abschnitt "Foto mit überlegtem Text": Du kopierst also den Code aus der Datei "hero.liquid", legst die neue Section "about-us-hero.liquid" an, löschst den automatisch generierten Code aus der neuen Section und fügst den kopierten Code aus der Zwischenablage ein.

 Das Seiten-Template

Jetzt legen wir das Template für die "About-Us" Seite an. Dazu klickst du im Ordner "Templates" auf "ein neues template hinzufügen". Im Dialogfenster wählst du "page" als Vorlage und nennst das Template bspw. "about-us". Dadurch wird die Datei "page.about-us-liquid" angelegt, in die du im nächsten Schritt die erstellten Sections einfügst.

Jetzt ist es wichtig zu wissen, in welcher Reihenfolge die Abschnitte auf der "About-Us"-Seite implementiert werden sollen. In diesem Beispiel gehen wir davon aus, dass die "About-Us"-Seite mit dem "Foto mit überlegten Text" starten soll und darunter die "Galerie" eingefügt werden soll. Entsprechend fügst du dann folgende Snippets vor den bestehenden Code in die Datei "page.about-us-liquid" ein:

{% section 'about-us-hero' %}
{% section 'about-us-gallery' %}

Nun müssen wir nur noch eine entsprechenden Seite anlegen. Dazu gehst du im Shopify-Adminbereich auf "Onlineshop" ➝ "Seiten" ➝ "Seite hinzufügen", gibst der neuen Seite den Namen "About Us" und wählst das soeben angelegte Template "page.about-us" als "Vorlage" aus.

Die Abschnitte auf der Unterseite mit Leben füllen

Nachdem wir der Seite die Vorlage zugewiesen haben, können wir nun Inhalte in die angelegten Abschnitte einfügen. Dazu klickst du auf "Vertriebskanäle" ➝ "Onlineshop" ➝ "Themes" ➝ "Anpassen" und wählst dann im oberen Dropwdown-Menü die Seite "About us" aus.

Auf der linken Seite sind jetzt die für diese Seite angelegten Abschnitte ersichtlich. Diese Abschnitte funktionieren genau so, wie wir es auf der Startseite gewohnt sind – dem Einpflegen der gewünschten Inhalte steht jetzt also nichts mehr im Weg.

Einschränkungen und Lösungsansätze

Mit dem skizzierten Vorgehen lassen sich die Startseiten-Abschnitte auch auf Unterseiten verwenden. Es gibt jedoch zwei grundlegende Einschränkungen, derer man sich bewusst sein sollte. Erstens lässt sich die Reihenfolge der Abschnitte nicht während der Bearbeitung der Inhalte ändern. Solltest du also doch eine andere Reihenfolge haben wollen, musst du dazu erneut den Code des Seiten-Templates überarbeiten. Zweitens kann eine erstellte Section nur einmal auf einer Unterseite verwendet werden. Wenn eine Section auf mehreren Seiten – oder auf einer Seite mehrfach – verwendet wird, werden immer nur die zuletzt gespeicherten Inhalte angezeigt. Wenn du also einen Startseiten-Abschnitt mehrfach verwenden möchtest, musst du für jeden Einsatz eine neue Section anlegen. Dabei ist es ratsam, sich viel Mühe bei einer verständlichen Bezeichnung der Sections zu geben – schließlich soll der Shop ja auch in Zukunft weiter ausgebaut werden können, ohne dass die Verantwortlichen den Überblick über die einzelnen Theme-Bestandteile und deren Verwendung verlieren. Am Besten ist es, bereits vor dem Anlegen der Sections und Seiten-Templates genau zu planen, welche Abschnitte in welcher Reihenfolge auf welchen Seiten platziert werden sollen, dadurch erspart man sich aufwändige Korrekturen und doppelte Arbeit.

 Wir unterstützen dich gerne!

Prinzipiell können die Startseiten-Abschnitte also mit grundlegenden Kenntnissen über Shopify-Themes und ein wenig technischem Geschick auch auf Unterseiten eingesetzt werden – allerdings steckt der Teufel oft im Detail. Solltest du spezielle Vorstellungen haben, das skizzierte Vorgehen bei deinem Template einfach nicht richtig funktionieren oder benötigst du ganz allgemein Unterstützung bei der Weiterentwicklung deines Shopify-Shops, dann komm einfach auf uns zu. Wir finden mit Sicherheit die passende Lösung für deine Anforderungen!