Jeder Menütyp wurde geschaffen, um ein anderes Problem zu lösen. Der falsche Typ ruiniert Ihren Store nicht von heute auf morgen, aber er zwingt Kunden dazu, mehr nachzudenken als nötig — und jedes Mal, wenn ein Kunde nachdenken muss, ist das ein Moment, in dem er abspringen könnte. Dieser Artikel geht die gängigsten Shopify-Menütypen durch und erklärt zu jedem: was er ist, wann er passt, wann nicht und welche Fehler Händler dabei typischerweise machen.
Eine Zahl sollte man sich vor allen Details merken. Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate im E-Commerce bei rund 70 %. Nicht jeder Verlust geht auf die Navigation zurück, aber eine unübersichtliche Navigation trägt ihren Teil dazu bei, Kunden zu vertreiben, bevor sie überhaupt den Warenkorb erreichen.
Die vier folgenden Typen schließen sich nicht gegenseitig aus. Ein Store nutzt oft mehrere gleichzeitig — zum Beispiel ein Mega Menu auf dem Desktop und eine Tab Bar auf dem Mobilgerät. Es geht darum, den richtigen Typ für den richtigen Kontext einzusetzen.
Mega Menu: gut für viele Kategorien und Kunden, die am Desktop stöbern
Ein Mega Menu ist ein großes, aufklappbares Panel. Wenn Sie über ein oberstes Element fahren oder darauf tippen, öffnet sich ein breites Panel und zeigt viele Unterkategorien auf einmal an, oft mit Bildern oder einem hervorgehobenen Produkt. Kunden erfassen den gesamten Aufbau des Stores mit einem einzigen Blick.
Es funktioniert gut, wenn ein Store viele Kategorien hat — als grobe Faustregel etwa 10 Gruppen oder mehr — und die meisten Kunden über einen Computer kommen. Branchen, in denen Käufer gern stöbern, bevor sie sich entscheiden, etwa Mode, Kosmetik, Wohnen und Möbel, passen gut zu diesem Stil. Die Kunden wissen noch nicht genau, was sie wollen, und ihnen viele Wege gleichzeitig zu zeigen, hilft daher.
Ein Mega Menu passt nicht, wenn ein Store nur wenige Produkte hat oder die meisten Kunden am Smartphone unterwegs sind. Ein Shop, der zehn Hemdmodelle verkauft und dafür ein riesiges Panel aufklappt, schießt übers Ziel hinaus — es wirkt leer. Und da 79 % des Shopify-Traffics von Mobilgeräten stammen (laut Shopify), lässt ein Design, das nur auf breiten Bildschirmen gut aussieht, die meisten Kunden im Stich.
Der häufigste Fehler ist, zu viel hineinzupacken. Händler wollen alles zeigen und stopfen deshalb jede Kategorie und jedes Banner in ein einziges Panel. Das Ergebnis: Kunden fühlen sich überfordert und klicken auf gar nichts. Zu viele Optionen sind so gut wie keine Option. Fassen Sie die Inhalte eng zusammen, lassen Sie Weißraum und heben Sie nur die wenigen Dinge hervor, die Sie wirklich verkaufen wollen.
Slide Menu: gut für mehrstufige Kategorien und Kunden, die wissen, was sie wollen
Ein Slide Menu (auch Hamburger-Menü genannt, das über das Drei-Striche-Symbol geöffnet wird) gleitet vom Bildschirmrand herein. Es zeigt Kategorien als Baumstruktur — tippt man auf eine Gruppe, klappen ihre Untergruppen auf, über mehrere Ebenen hinweg. Es ist eine aufgeräumte Methode, eine komplexe Struktur in einem schmalen Raum unterzubringen.
Ein Slide Menu passt, wenn ein Store viele Kategorieebenen hat und Sie eine klare Hierarchie brauchen, besonders bei einem Mobile-First-Ansatz. Nehmen Sie einen Shop für Autoteile: Marke › Modell › Teiletyp. Mit dem Slide Menu können Kunden den richtigen Zweig durchklicken, ohne bei jedem Schritt eine neue Seite zu laden.
Es passt nicht, wenn ein Store einfach aufgebaut ist. Wenn Sie nur wenige Kategorien haben, macht es den Kunden das Leben nur schwerer, sie hinter einem Symbol zu verstecken. Die Nielsen Norman Group hat gezeigt, dass versteckte Navigation die Wahrscheinlichkeit senkt, dass Kunden das gesuchte Element finden, und sie langsamer macht, als wenn das Menü sichtbar ist.
Es hilft, das Wesen des Slide Menus zu verstehen: Es verbirgt Informationen. Damit eignet es sich gut für Menschen, die bereits wissen, was sie wollen — sie öffnen es bewusst und steuern direkt einen vertrauten Zweig an. Fürs Stöbern ist es schwächer, weil Kunden nichts sehen, bis sie tippen. Wenn Ihr Ziel ist, dass Kunden zufällig auf Produkte stoßen, reicht ein Slide Menu allein nicht aus.
Tab Bar: gut, wenn die meisten Kunden am Smartphone sind
Eine Tab Bar ist eine feste Navigationsleiste, die am unteren Rand des Smartphone-Bildschirms verankert ist und meist die 4–5 wichtigsten Elemente enthält, etwa Startseite, Kategorien, Suche, Warenkorb und Konto. Sie ist immer sichtbar — egal wie weit Kunden scrollen, sie bleibt an Ort und Stelle.
Die Stärke der Tab Bar ist ihre Position. Steven Hoobers Untersuchung dazu, wie Menschen ihr Smartphone halten (über 1.300 Beobachtungen aus der Praxis), ergab, dass die meisten mobilen Aktionen mit einem Daumen ausgeführt werden und die untere Bildschirmmitte der Bereich ist, den der Daumen am leichtesten erreicht — oft als Daumenzone bezeichnet. Die Hauptaktionen unten zu platzieren bedeutet, sie genau dort anzubringen, wo die Hand des Kunden ohnehin schon liegt.
Eine Tab Bar passt, wenn der meiste Traffic von Smartphones kommt, was heute auf die Mehrheit der Shopify-Stores zutrifft. Außerdem hält sie die wichtigen Dinge — vor allem den Warenkorb — stets nur einen Fingertipp entfernt, statt Kunden dazu zu zwingen, zum Seitenanfang zurückzuscrollen.
Beachten Sie, dass eine Tab Bar nur sehr wenig Platz für Elemente bietet. Versuchen Sie nicht, sieben oder acht Symbole hineinzuquetschen; wählen Sie die 4–5 wichtigsten aus und überlassen Sie den Rest dem Slide Menu oder den Kategorieseiten. Betrachten Sie die Tab Bar als Abkürzung, nicht als Ihre gesamte Navigation.
FAB: ein schwebender Button für eine Aktion
Ein FAB (Floating Action Button) ist ein runder Button, der über dem Inhalt schwebt und für eine einzige wichtige Aktion gedacht ist — mit dem Shop zu chatten, den Warenkorb anzusehen oder zum Seitenanfang zurückzuspringen. Er ist immer da, aber dezent und nimmt kaum Platz weg.
Ein FAB passt, wenn es genau eine Sache gibt, die Kunden von überall aus tun können sollen. Ein verbreitetes Beispiel in Vietnam ist der Messenger- oder Zalo-Chat-Button, der unten rechts schwebt — ein Kunde, der ein Produkt betrachtet und eine Frage hat, kann sofort tippen und nachfragen, ohne lange zu suchen.
Was man im Kopf behalten sollte: Ein FAB ersetzt kein Menü. Er ist eine Abkürzung für eine Aktion, nicht das Zuhause Ihres gesamten Navigationssystems. Der häufige Fehler ist, ihn mit zu viel zu überladen — ein Button, der sich zu fünf oder sechs Optionen aufklappt, oder drei, vier schwebende Buttons gleichzeitig, die den Inhalt verdecken und sogar den Add-to-Cart-Button blockieren. An diesem Punkt wird der FAB von einer Erleichterung zu einem Hindernis. Ein FAB, ein Zweck.
Ein paar Dinge, die für alle vier gelten
Welchen Typ Sie auch wählen, diese drei Punkte gelten immer.
- Trennen Sie Ihre Einrichtung für Mobil und Desktop. Es ist derselbe Store, aber Kunden auf den beiden Geräten verhalten sich unterschiedlich. Ein einziges Menü, das für beide ideal ist, gibt es in der Regel nicht; besser ist ein Mega Menu auf dem Desktop und eine Tab Bar oder ein Slide Menu auf dem Mobilgerät.
- Opfern Sie keine Geschwindigkeit. Google setzt für die Core Web Vitals gute Zielwerte: LCP unter 2,5 Sekunden, INP unter 200 Millisekunden und CLS unter 0,1. Ein schönes Menü, das die Seite springen oder langsam laden lässt, richtet mehr Schaden als Nutzen an. Laut Shopify-Daten installiert ein durchschnittlicher Store rund 6 Apps, sodass jede zusätzliche App die Seite belastet — wählerisch zu sein zahlt sich aus.
- Lassen Sie Ihr Menü beim Theme-Wechsel nicht kaputtgehen. Wenn das Menü fest ins Theme verdrahtet ist, müssen Sie es bei jedem Designwechsel von Grund auf neu aufbauen.
Genau deshalb nutzen viele ein separates Navigationstool. Navi+ kann alle vier oben genannten Typen erstellen — Mega Menu, Slide Menu, Tab Bar, FAB und ein Grid Menu — per Drag-and-drop, ohne Code, mit separater Konfiguration für Mobil und Desktop, und das Menü bleibt beim Theme-Wechsel erhalten. Das Tool ist außerdem so gebaut, dass es Ihre Core Web Vitals nicht nach unten zieht. Aber welches Tool Sie auch verwenden, das Prinzip bleibt dasselbe: Wählen Sie Ihren Menütyp anhand der Geräte Ihrer Kunden und ihres Kaufverhaltens — nicht danach, welcher am auffälligsten aussieht.
Dieser Artikel ist Teil des umfassenderen Leitfadens So wählen Sie den richtigen Menütyp für Ihren Shopify-Store.