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 der 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 Shopnavigation aus?
  • Shopware Standard Navigation
  • Stilvolle Navigation (8mylez Plugin)
  • Demo


Was zeichnet eine gute Shopnavigation 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.

  2. Übersichtlich
    3. 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.

  3. Ansprechend
    4. 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.

  4. Bedienerfreundlich
    5. 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.

Du möchtest die Navigation Deines Shopware Shops zentrieren? Dann haben wir hier das richtige Tutorial für Dich: Shopware Navigation zentrieren

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.
    Antworten

  • Hey Fabian,

    Demo ist wieder online :-)

    LG
    Marc

  • Gibt es die Möglichkeit die Größe des Logos anzupassen und die Navigationsleiste zu fixieren?
    Antworten

  • 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
    Antworten

  • 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
    Antworten

  • 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!
    Antworten

  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

E-Mail: support@8mylez.com

Telefon: +49 (0) 5251 284 710

Shopware Dienstleistungen

Shopware Code AuditShopware PerformanceShopware Leasing

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz