Shopware Shop Navigation stilvoll gestalten (Plugin)

Shopware Shop Navigation stilvoll gestalten (Plugin)

Marc Baur 25. März 2017 9

Die Shop Navigation bzw. der Header ist im Grunde der Einstieg und erste Blickfang für deine Kunden. Was ganz oben ist, wird in der Regel auch als erstes gesehen und fließt entsprechend stark in das Einkaufserlebnis mit ein.

Inhalt

  • Was zeichnet eine gute Shop Navigation aus?
  • Shopware Standard Navigation
  • Stilvolle Navigation (8mylez Plugin)
  • Demo


Was zeichnet eine gute Shop Navigation aus?

  1. platzsparend
  2. Eine gute Navigation nimmt dem Inhalt nicht zu viel Platz weg. Ein Header, der über 30% des Einstiegsbildschirm geht, schiebt wichtige Conversionsmöglichkeiten unnötig nach unten, in den Bereich, der statistisch gesehen deutlich weniger geklickt wird.

  3. übersichtlich
  4. Eine entsprechende Übersichtlichkeit sollte Grundvoraussetzung für jeden Shopeinstieg sein. Laut einer Studie sollen über ein Drittel der Besucher den Onlineshop frühzeitig verlassen, weil sie Produkte nicht finden, die eigentlich da gewesen wären. Ob diese Zahl valide ist, konnte ich nicht in letzter Instanz herausfinden, allerdings sind wir uns wohl alle einig, dass ein schlecht zu bedienender Shop - und der bedient sich in der Regel zum größten Teil über die Navigation - keine Option ist.

  5. ansprechend
  6. Natürlich sollte die Navigation optisch ansprechend sein und dadurch ihren Teil zum Branding und Markenbild beitragen. Eine 0 8 15 Navi, die so oder so ähnlich tausendfach im Internet vorhanden ist, erschwert es sicherlich gerade in höherpreisigen Regionen Kunden zu überzeugen.

  7. bedienerfreundlich
  8. Die Aufgabe deines Shops ist es, die Kunden möglichst lange auf der Seite zu halten. Das kann nur funktionieren, wenn das Navigieren durch den Shop spaß macht und leicht von der Hand geht. Wer zur Bedienung deines Shops erst ein Handbuch lesen muss, wird wohl kein Stammkunde mehr.


Shopware Standard Navigation

Auf Basis dieser Punkte haben wir uns den Header des Standard Responsive Themes von Shopware angeschaut. Was direkt auffällt - die Navi benötigt sehr viel Platz und nimmt einige Höhenpixel für sich in Anspruch:

Shopware Navigation Responsive Theme

Freundlich in der Bedienung ist sie hingegen und auch optisch solide. Ein Manko ist aber wohl, dass wahrscheinlich die allermeisten Shopware Shops diesen Header im Einsatz haben.

Wir halten also fest: 

+ übersichtlich
+ bedienerfreundlich
+- ansprechend
- platzsparend

Stilvolle Navigation (8mylez Plugin)

Jetzt haben wir uns bei 8mylez zusammengesetzt und überlegt, wie wir also den oberen "Contentbereich" optimieren und in ein neues Gewand packen können.

Herausgekommen ist unser neues Plugin, die Stilvolle Navigation.

shopware navigation stilvoll 8mylez

Und so sieht sie aus:

stilvolle navigation shopware

Die Kategorien lassen sich natürlich auch aufklappen (alternativ kannst du dort auch direkt bestimmte Produkte verlinken):

stilvolle navigation bunt

Selbstverständlich geht das auch mit allen anderen Icons:

shopware navigation plugin 8mylez

Unser Ziel war eine platzsparende, elegante, minimalistische und übersichtliche Navi zu erschaffen. Das schöne daran ist, dass sie direkt als Plugin eingebunden werden kann, ohne dass du manuelle Anpassungen am Theme vornehmen musst.

Natürlich gibt es auch entsprechende Tablet optimierte & Mobile Ansichten.


Demo gefällig?

Du kannst dir hier im Demoshop einen Überblick verschaffen:

Frontend: Hier klicken
Backend (demo/demo): Hier klicken

Selbstverständlich lässt sich die Hintergrundfarbe und Schriftfarbe nach deinen Wünschen anpassen.

Du kannst das Plugin ganz einfach und unkompliziert 30 Tage in deinem Shop Testen: Zum Shopware Store!

Falls du zur Kategorie Selberbastler gehörst haben wir gute Nachrichten für dich. Wir planen ein Tutorial, wo wir genau erklären, wie wir diese Navigation erstellt haben - quasi zum Nachbauen. Das wird allerdings noch mindestens 2-3 Monate dauern.

Tipp: dir fehlen die passenden Icons? Auf flaticon.com gibt es eine große Auswahl an kostenlosen Icons zu jeglichen Themen.

Jetzt sind wir auf deine Meinung gespannt. Wie findest du unser neues Plugin? Was würdest du dir für ergänzende Funktionen wünschen? Wir freuen uns wie immer über jegliches Feedback.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

9 Kommentare

  • Moin moin,

    aktuell ist die Demo offline. Ist das nur temporär?
    Ich hatte bereits vor längerem die Demo in meinem Store geladen, würde das Menü mir aber gerne nochmal anschauen.
  • Hey Fabian,

    Demo ist wieder online :-)

    LG
    Marc
  • Gibt es die Möglichkeit die Größe des Logos anzupassen und die Navigationsleiste zu fixieren?
  • Hey Patrick,

    die Möglichkeit gibt es, das müsste man aktuell aber extra dazu programmieren.

    LG
    Marc
  • Hört sich doch perfekt an Marc. Danke für das schnelle Feedback
  • Moin. Perfekte Lösung für das derzeitige Problem. Meinem Kunden ist die normale Navigation zu "plump". Daher war ich auf der Suche nach einer Alternative. Werde heute Abend noch installieren und dann hoffentlich alles zur Zufriedenheit umsetzen können. Wie sieht es denn mit Support aus? Gibt es regelmäßige Aktualisierungen (nur wenn nötig natürlich)? Würde mich über ein Feedback freuen. Grüße aus Köln ...Jörg
  • Hey Jörg,

    das freut uns! Selbstverständlich sorgen wir für entsprechenden Support und bauen ggf. sogar noch weitere Funktionen in Zukunft ein.

    Herzliche Grüße
    Marc
  • Hallo!

    Das sieht wirklich unglaublich gut aus, meiner Meinung nach. So gut das ich es sofort nachmachen würde.
    Da habt ihr wirklich richtig spitzen Arbeit geleistet.
    Ich freue mich sehr auf das Tutorial und versuche dieses dann auch umzusetzen. Hätte ich mir keine eigene Top Navigation gebaut würde ich es auch kaufen.

    Eine Frage hätte ich bzw vielleicht auch eine Anregung.
    (Falls man dies im Backend schon einstellen kann oder das normal ist - kann auf dem Handy schlecht auf das Backend zugreifen)

    Ihr habt oben 4 Kategorien verlinkt. Kann man auch mehr einstellen und werden diese dann weiter zusammen verschoben? Also 5-6-7? So viel wie der Platz hergibt?

    Liebe Grüße

    PS.: Ihr macht mit dem Blog hier wirklich eine super Arbeit und helft vielen damit, mir selber auch! Danke dafür!
  • Hey David,

    vielen Dank für Deine Worte!

    Zu Deiner Frage: Du kannst noch weitere Kategorien hinzufügen, die Navi passt sich dann immer automatisch an, bzw. die Abstände zw. den Kategorien.

    Wünsche Dir noch einen schönen Sonntag!

    Herzliche Grüße
    Marc

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Plugin Theme anpassen
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Wie du jedes Icon in Shopware 5 anpassen kannst
© 2017 by 8mylez. Powered by Goltfisch GmbH.