Shopware 5 Startseite – Relaunch Konzeption für die Shop Homepage

Erfahre mehr über die Neukonzeption der Startseite eines Shopware 5 Online Shops für Falträder. Die Anleitung lässt sich prinzipiell auch für Magento oder Shopify nutzen. Steigere deine Conversion Rate durch diese Optimierungsmaßnahme.

Problemstellung

Der Online Shop unseres Kunden BOXBIKE soll optimiert werden. In der bisherigen Version wurde über die Einkaufswelten ein Design für die verschiedenen Endgeräte ausgespielt. Da der HTML Quelltext über Javascript erzeugt wird hat es eine Suchmaschine schwerer die Inhalt zu indexieren. Ausserdem benötigt es zusätzlich Ladezeit.
Zeit deshalb die Shopware-Startseite einem Relaunch zu unterziehen.

Abb: Startseite des Online Shops vor dem Relaunch

Die Startseite ist gerade für wiederkehrende Besucher eine wichtig Schaltstelle wo der User sich zu seinem gewünschten Produkt durchklickt. Die bisherige Version nutzt verschiedene Teaser und Slider. Viele Shops haben erkannt, dass zu viel Ablenkung den User eher verwirrt, als ihm hilft.

Ziele des Relaunchs

Beim Relaunch der Shopware 5 Startseite wollen wir deshalb auf unnötige Spielereien verzichten und dem User einen interessanten Mix aus neuen Produkten, sinnvollem Zubehör, Aktionen und Ratgebercontent liefern.
Somit können wir auch Suchmaschinenoptimierung betreiben, da der User sich besser verstanden fühlt. Somit wird die Absprungrate sowie die Return-To-SERP Rate gesenkt.

Durch eine CSS Slide-Technik können wir nebenstehende Elemente horizontal beweglich machen. z.B. die Logos oder Zubehör 4er Teaser.

Durch die Einbindung von hilfreichen Inhalten aus dem Bereich Rat&Tat erzeugen wir noch höhere Themenrelevanz.

Da die Startseite über viele eingehende Links von empfehlenden Seiten verfügt werden wir die Linkkraft auf wichtige Unterseiten verteilen.

Zuerst Ordnung schaffen

Damit wir eine solide Grundlage für den Relaunch haben starten wir mit Designgrundlagen. Durch die Entwicklung eines Style-Tiles haben wir alles wichtigen Elemente & Adjektive auf einem Übersichtsblatt.

Wir nutzen den Ansatz des Atomic Webdesigns. Damit entwicklen wir eine Website-DNA und können uns immer wieder neue Elemente zusammenbauen.

Abb: Style Tiles von BOXBIKE

Prototyping der Website-Elemente

Mit Prototyping können wir schnell neue Elemente erstellen und testen. Folgende Elemente sind für unsere neue Auswahl gestaltet worden und in HTML5 / CSS umgesetzt worden:

Stage (Bühne)

Bühnendarstellung (Stage) im Prototyping der Webseiten Relaunch Konzeption
Abb: Prototyping von der Bühne (Stage)

Das Hauptbild (Bühnenbild) ist jetzt statisch. Damit entfällt die Ablenkung durch die ansonsten ständig wechselnden Bilder.

Zusätzlich nutzen wir als H1 Überschrift den Slogan „Faltrad Online Shop“. Das ist auch das Hauptkeyword für diese Seite. Neben dem Logo setzen wir einen Textbereich wo wir mit reichlich Weissraum den User zum lesen einladen. Hier wird das Wichtigste über den Shop, die Spezialisierung und Besonderheiten dargestellt. Aus dem Text kann man auch gut verlinken.

Vertrauen über bekannte Marken bildern

Mit einem CSS-Slider platzieren wir die wichtigsten Logos der angebotenen Marken. Damit kann der User direkt auf seine Lieblingshersteller navigieren.

Markendarstellung für mehr Vertrauen
Abb: Markendarstellung für mehr Vertrauen

Wichtig: Wir nutzen das ALT Attribut des Bilds (Logo) damit eine Suchmaschine auch die Themenrelevanz gut einschätzen kann.

Hauptkategorien Teaser

Teaser für Hauptkategorien inkl. Deeplinks
Abb: Teaser für Hauptkategorien inkl. Deeplinks

Die neuen Elemente bieten dem User Verlinkungen zu den Hauptkategorien sowie Links zu wichtigen Marken oder anderen Zubehörkategorien.

Teaser als (mobiler) Slider für Zubehör

Mobile Nutzer können mit ihrem Smartphone sehr bequem durch die Zubehör-Kategorien navigieren.

Dabei wird wieder das Bild mit entsprechenden ALT Tag versehen. Zusätzlich steht uns ein Textlink zur Verfügung.

Über CSS3 sind die Teaser sehr bequem verschiebbar.

Aktionsbereich I

Aktionsbereich als Teaser für den Online Shop
Abb: Aktionsbereich als Teaser

Mit Hilfe dieses Teasers können spezielle Aktionen noch einmal hervorgehoben werden.

Aktionsbereich II

Aktionsteaser mit viel Weissraum
Abb: Aktionsteaser mit viel Weissraum

Für Neukunden steht ein Gutschein-Teaser zur Verfügung. Hier kann ein Neukunde durch Eintragung in den Newsletter einen Gutschein bekommen. Auch hier wird viel Weissraum genutzt um die Botschaft noch besser wirken kann.

Blog / Rat & Tat Bereich

Ratgeber und Blogartikel prominent dargestellt
Abb: Ratgeber und Blogartikel prominent dargestellt

Über eine API holen wir die wichtigsten Artikel aus dem hinterliegenden WordPress System um passenden Artikel darzustellen. Ratgeber Artikel zu Themen wie Reparatur, Inspektion, Tuning steigern die organische Sichtbarkeit. So werden zusätzlich Neukunden für den Online-Shop gewonnen.

Ladengeschäft Teaser

Vertrauen durch eigenes Ladengeschäft aufbauen
Abb: Vertrauen durch eigenes Ladengeschäft aufbauen

Ein eigenes Ladengeschäft signalisiert dem User: Hier kannst du vorbeikommen und dein Faltrad direkt auch abholen. Viele User haben Angst online etwas zu kaufen. Der Autor dieses Artikels wäre vor kurzem selber fast auf einen Fake-Online Shop reingefallen 🙁

Der Teaser stellt die wichtigsten Kontaktmöglichkeiten (Mail, Chat, Telefon, Shop) dar. Zusätzlich zeigt sich der Inhaber vor seinen Produkten.

Fazit Shopware 5 Startseite optimieren

Durch den systematischen Optimierungsprozess entwickeln wir mit den Prototyping schnell und einfach Webseiten-Komponenten für den Shopware 5 Online Shop.

Wichtig ist es die Elemente zu testen. Wie reagieren User darauf und welche Elemente sollten in welcher Reihenfolge erscheinen? Wie kann der Stammkunde andere Elemente sehen, als der Erstbesucher?