So gestaltest Du schöne Landing Page mit Shopify


So gestaltest Du schöne Landing Page mit Shopify

Die Seitengestaltung bei Shopify ist nicht perfekt umgesetzt

Nachdem wir nun viele Shopify Projekte umgesetzt haben und zahlreiche Shops aufgesetzt können wir bestätigen dass Shopify eine großartige Plattform ist, die sowohl bei uns als auch bei Kunden immer super ankommt.

Ein Punkt allerdings, der uns regelmäßig Kopfzerbrechen und Probleme bereitet ist die Seitenverwaltung und der integrierte Seiteneditor.

So gestaltest Du schöne Landing Page mit Shopify

In diesem Post bringen wollen wir über ein paar Techniken berichten, die wir angewandt haben, um komplexer und aufwändigere Seitenstrukturen umzusetzen.

Vorab sei angemerkt, dass Shopify kein herkömmliches CMS sein will - Wenn man eCommerce nur nebenbei betreibt sollte man überlegen Wordpress o.ä. als Leitsystem einzusetzen und um Shopify Funktionen zu ergänzen. Zurück zu den Workarounds.

Ein wenig Code übernimmt die meiste Arbeit

Bei Golden Moon Tea haben wir eine Seite gebaut, die aus mehreren Tabs besteht und Inhalte anzeigt, die auch an anderen Stellen im Store verwendet werden.

Um Inhalte dynamisch in einer Seite anzuzeigen haben wir ein neues Template angelegt. Normalerweise wird der Seiteninhalt direkt über den Befehl {% include page.content%} in das HTML Template gerendert.

Um hier jetzt weitere Snippets und Inhaltsbereiche zu definieren haben wir den content aus mehreren Seiten gezogen, und in ein Template gerendert:

{% include pages['page1'].content%} //hier kann Liquid / HTML rein

{% include pages['page2'].content%} //hier kann Liquid / HTML rein

{% include pages['page3'].content%}

Dieser Ansatz hat verschiedene Vorteile: Beibehaltung der einfachen Textpflege über den Shopify Editor Media und HTML Elemente können verwendet werden Liquid snippets können verwendet einfach gepflegt werden Soweit unsere Anleitung, wie ihr aus den begrenzten Möglichkeiten der Seitenverwaltung doch schöne und aufwändige Seiten gestalten könnt.