Shopify Shop Entwicklung (Workflow)

Als Shopify Agentur entwickeln wir seit 2015 für verschiedene Kunden und Branchen Online-Shop Lösungen. Dabei versuchen wir bei der Entwicklung immer effizienter zu sein und bringen unseren Workflow stets auf den neusten Stand. Im folgenden Artikel, haben wir unseren aktuellen Workflow bei der Shopify Entwicklung in neun Schritten zusammengefasst:

Im ersten Schritt bei der Planung eines neuen Shopify Shops sollte die aktuelle Situation des Kunden betrachtet werden. Dabei können folgende Fragen gestellt werden:

• Warum soll ein neuer Online-Shop entwickelt werden?

• Gibt es bereits einen Online-Shop und soll nur ein Relaunch durchgeführt werden?

• Welche Probleme gibt es im aktuelle Shop?

• Was soll mit dem neuen Shop erreicht werden? Z.B. mehr Conversions oder die Vermarktung eines neuen Produktes.

• Gibt es Referenz Websites an denen man sich orientieren kann?

• Gibt es bereits eine Online-Startegie?

• Wer sind die Zielgruppen? Gibt es Personas?

Das sind natürlich nur grundlegende Fragen, da jedes Projekt andere Anforderungen hat. Die Ergebnisse der Analyse sollten schriftlich festgehalten werden, am Besten auch in einer Präsentation.

Anhand der Analyse aus dem ersten Step, sollte ein Projektplan erstellt werden. Zuerst sollte auf Seiten des Kunden und der Agentur jeweils ein Ansprechpartner bestimmt werden. Dies erleichtert die Kommunikation und verhindert Missverständnisse.

Als nächstes werden von der Agentur die Projektphasen und die Meilensteine definiert. Das geschieht am Besten in einer Gantt Timeline. In der Timeline sollte auch dargestellt werden, welche Projektphasen von der Agentur durchgeführt werden und an welchen Stellen Input vom Kunden benötigt wird. Die Timeline sollte, zusammen mit der Analyse aus dem ersten Step, in einem Cloud Ordner abgelegt werden, auf dem beide Seiten immer Zugriff haben. Dies erzeugt transparenz und man hat alle Ziele immer vor Augen.

Für jede Projektphase sollte ein Kanban Board erstellt werden, in dem dann detailliert die Aufgaben beschrieben und zugewiesen werden.

Anhand der bereitgestellten Inhalte vom Kunden wird eine Website Struktur, in Form einer Sitemap geplant. Dazu ist es vor allem wichtig einen optimale Struktur der Produkt- und Kategorieseiten für Suchmaschinen zu überlegen. Hierbei sollte daher auch bereits eine SEO-Analyse durchgeführt werden, da man später im Live-Betrieb nur noch aufwendiger die Website Struktur verändern kann.

Die Sitemap dient als Vorlage für die Einrichtung der Seiten und Produkte im Shopify Backend und wird später auch den Suchmaschinen zur Verfügung gestellt.

Mit Hilfe der Inhalten und der Sitemap aus dem vorherigen Step, sowie der Analyse und den erstellten Personas aus dem ersten Step, wird ein UX Design entwickelt. Dazu werden zuerst Scribbles und Wireframes erstellt. Diese werden anschließend im UX Testing analysiert und soweit optimiert, bis eine optimale User Experience entsteht.

Als nächster Schritt wird ein Design Prototype entwickelt. Hier wird das Wireframe zusammen mit dem CI Design des Kunden kombiniert. Dabei kann es auch hilfreich sein, zuerst ein Moodboard zu erstellen.

Im Design Prototype können zusätzlich auch schon Animationen integriert werden, welche später in der Entwicklung programmiert werden. Zudem erhält der Nutzer bereits beim Testen des Prototypes eine realitätsnahe Bedienung.

Bevor mit der Shopify Entwicklung begonnen werden kann, wird erstmal das Shopify Backend System eingerichtet. Anhand der Website Struktur und den Produktkategorien, wird Shopify so vorbereitet, dass eine einfache Content Integration möglich ist. Bereits hier sollte auf eine optimale Einrichtung der Inhalts- und Kategorieseiten für Suchmaschinen geachtet werden.

Die Shopify Einstellungen sollten so gesetzt werden, dass der Kunde später einen optimalen Workflow beim Verkauf seiner Produkte erhält. Dazu gehört die richtige Einstellung der Steuerberechnung, Versandkosten, Rechnungsinformationen und Zahlungsmethoden.

Zudem sollten benötigte Shopify Apps installiert und eingerichtet werden. Die Planung welche Apps benötigt werden sollten, wenn möglich, bereits in der Analyse und Projektplanung durchgeführt werden. Somit kann man besser den Aufwand einschätzen, bei welchen Funktionen man auf Drittanbieter-Apps zurückgreifen muss und welche man selbst programmieren kann. Meistens ist es sinnvoll nur Apps zu verwende, welche das Backend verbessern. Für das Shopify Frontend sind eigene Lösungen oft besser, da sie direkt in das Shopify Theme integriert werden können und keinen negativen Einfluss auf die Performance haben.

Nachdem das Shopify Backend fertig eingerichtet wurde, kann mit der Integration des Inhaltes und der Produkte begonnen werden. Für den Produktimport sollte ein geeigneter Workflow zusammen mit dem Kunden überlegt werden.

Je nach Anzahl bzw. Komplexität der Produktdaten und bereits vorliegenden Produktlisten, kann entschieden werden ob die Produkte importiert werden oder manuell eingepflegt werden. Bei einer großen Anzahl von Produkten ist es natürlich sinnvoll, die Produkte über Excel bzw. CSV Dateien zu importieren. Das spart Zeit und vermeidet vor allem Fehler.

Wenn keine Produktlisten vorliegen und es sich nur um eine geringe Anzahl von Produkten handelt, dann ist es oft auch schneller, wenn die Produkte manuell per Hand eingepflegt werden.

Der aufwändigste Schritt ist die Theme Entwicklung. Hierbei wird der Design Prototype aus dem vierten Step in Code umgesetzt. Mithilfe der Liquid Template Language von Shopify werden die Layouts erstellt und die Inhalte bzw. Produkte aus dem Backend ausgelesen. Dazu wird auch oftmals nochmal das Backend mit zusätzlichen Feldern angepasst, damit der Kunde später selbst ohne Programmierkenntnisse Inhalte anpassen kann.

Bereits während der Programmierung ist es wichtig, dass auf eine optimale Strukturierung der Inhalte für Suchmaschinen geachtet wird.

Nach Abschluss der Programmierung sollten die Layouts und Funktionen des Themes getestet werden. Dazu gehören manuelle Tests, aber auch die Verwendung von Frontend Testing Tools, wie z.B. Cypress. Mit einer richtigen Testautomatisierung bzw. Continuous Delivery Pipeline kann sicher gestellt werden, dass nach jeder Änderung im Code die Website fehlerfrei deployed wird.

Im vorletzten Step sollte die Website nochmals mit verschiedenen Tools analysiert und optimiert werden. Dazu gehört auch eine Performance und SEO-Analyse. Der Website sollte optimal und mit geringen Ladezeiten von Suchmaschinen indexiert werden können.

Falls es bereits davor einen Online-Shop gab und die Domain beibehalten worden ist, sollte überprüft werden, ob alle Redirects von der alten Website Struktur auf die neue gesetzt worden sind. Dadurch vermeidet man 404-Fehler und verhindert einen negativen Einfluss auf das Website-Ranking in Google & Co.

Für ein erfolgreiches Shopify Projekt sollte man sich einen geeigneten Workflow überlegen. Dadurch hat man von Anfang an einen Plan und vermeidet zusätzlichen Aufwand bei späteren Korrekturen.

Als Shopify und E-Commerce-Agentur unterstützen wir Sie gerne bei der Planung und Umsetzung.