Es gibt nicht das eine Menü-Set, das zu jedem Shop passt. Ein Modegeschäft mit Tausenden SKUs braucht eine völlig andere Navigation als ein Café, das ein paar Dutzend Artikel verkauft. Dieser Artikel fasst zusammen, wie man Shopify-Menüs nach Shop-Typ kombiniert — auf Basis dessen, was ich sowohl beim Betreiben eines eigenen Shops als auch beim Beobachten anderer Läden gesehen habe.
Bevor wir zur Tabelle kommen, ein wichtiger Punkt: Das Menü auf dem Desktop und das Menü auf dem Mobilgerät sollten nicht identisch sein. Menschen halten ihr Smartphone in einer Hand und tippen meist mit dem Daumen. Nach Beobachtungen von Steven Hoober werden etwa 75 % der mobilen Interaktionen mit dem Daumen ausgeführt, und der am leichtesten erreichbare Bereich ist die untere Bildschirmhälfte. Auf dem Desktop ist es umgekehrt: Hier scannen Menschen von oben nach unten, weshalb ein horizontales Menü am oberen Rand mehr Sinn ergibt. Zwei unterschiedliche Kontexte verlangen nach zwei unterschiedlichen Arten, das Menü aufzubauen.
Eine empfohlene Tabelle zum Kombinieren von Shopify-Menüs nach Shop-Typ
| Shop-Typ | Desktop | Mobil |
|---|---|---|
| Mode / Lifestyle, großer Katalog | Mega Menu | Tab Bar + Slide Menu |
| Elektronik, viele technische Kategorien | Mega Menu mit Filtern | Slide Menu |
| Gastronomie / Lokal, wenige Produkte | Simple Nav (einfaches horizontales Menü) | Tab Bar |
| Beauty / Hautpflege | Mega Menu mit Bildern | Tab Bar + Chat-FAB |
| Dropshipping, viele Produktlinien | Mega Menu | Slide Menu |
Diese Tabelle ist ein Ausgangspunkt, keine feste Regel. Im Folgenden findest du die Gründe für jede Zeile, damit du sie an deinen eigenen Shop anpassen kannst.
Mode und Lifestyle: Ein großer Katalog braucht auf dem Desktop ein Mega Menu
Modegeschäfte haben meist eine tiefe Struktur: Herren / Damen, dann Oberteile / Unterteile / Accessoires, dann einzelne Produktlinien, nach Saison, nach Kollektion. All das in ein einziges vertikales Dropdown zu zwängen, zwingt die Kundschaft, sich durch viele Ebenen zu hangeln.
Auf dem Desktop löst ein Mega Menu dieses Problem. Es verteilt die Kategorien auf mehrere Spalten innerhalb eines großen Panels, sodass Nutzer den gesamten Produktbaum auf einmal sehen, statt sich durch jede Ebene zu klicken. Für einen Damenmode-Shop mit Dutzenden Produktlinien ist das meist der sauberste Ansatz.
Auf dem Mobilgerät ist es anders. Ein schmaler Bildschirm kann ein Mega Menu nicht ausbreiten, deshalb ist ein verbreiteter Ansatz eine Tab Bar für die wichtigsten Wege (Startseite, Kategorien, Warenkorb, Konto), die am unteren Bildschirmrand verankert ist, ergänzt durch ein Slide Menu für die vollständige Kategorienliste. Die Tab Bar bleibt stets in Daumenreichweite, während das Slide Menu den detaillierten Produktbaum für den Fall bereithält, dass Nutzer tiefer eintauchen wollen.
Elektronik: Technische Kategorien brauchen Filter direkt im Menü
Elektronik hat ihre eigenen Eigenheiten. Die Kundschaft weiß oft ziemlich genau, was sie braucht: Kapazität, Marke, Preisspanne, Modelljahr. Für einen Elektronik-Shop sollte das Mega Menu auf dem Desktop deshalb ein paar Filter oder Untergruppen direkt im Menü enthalten, damit Nutzer direkt zum richtigen Zweig springen können, statt die gesamte Kategorieseite zu durchstöbern.
Ein Shop für Computerzubehör könnte sein Mega Menu zum Beispiel in Spalten nach Typ aufteilen (Mäuse, Tastaturen, Kopfhörer) und innerhalb jeder Spalte beliebte Preisspannen oder Marken auflisten.
Auf dem Mobilgerät funktioniert ein Slide Menu besser, als zu versuchen, alles in eine Tab Bar zu quetschen — denn der Kategorienbaum ist lang und technisch. Ein Slide Menu erlaubt es, das Menü mehrere Ebenen tief zu verschachteln und dabei kompakt zu bleiben. Wenn du es einsetzt, gib ihm klare Textbeschriftungen neben den Icons. Die Nielsen Norman Group hat dies einmal gemessen und festgestellt, dass versteckte Menüs (der Hamburger-Stil) die Wahrscheinlichkeit, dass Nutzer die Navigation finden, gegenüber sichtbaren Menüs um fast die Hälfte verringern — mach das Menü also nicht zu versteckt.
Gastronomie und Lokales: Bei wenigen Produkten nicht überkomplizieren
Restaurants, Bäckereien und lokale Läden haben meist nur ein paar Dutzend Artikel. Für einen solchen Shop ein Mega Menu zu bauen, ist überzogen und kann die Seite sogar unübersichtlicher machen, als sie sein müsste.
Auf dem Desktop reicht eine Simple Nav, ein horizontales Menü mit wenigen Punkten wie Speisekarte, Über uns, Kontakt. Die Kundschaft muss nicht tief graben; sie will schnell bestellen.
Auf dem Mobilgerät funktioniert hier eine Tab Bar gut. Ein paar der wichtigsten Schaltflächen, zum Beispiel Speisekarte, Bestellen, Anrufen, liegen am unteren Bildschirmrand bereit, genau im leicht erreichbaren Daumenbereich. Ein Café, das online verkauft, könnte die Schaltflächen Bestellen und Anrufen in der Tab Bar verankern, damit Kunden nicht scrollen müssen, um sie zu finden.
Beauty und Hautpflege: Bilder und Beratung als Unterstützung
Kosmetik verkauft sich über Bilder und Vertrauen. Kunden zögern oft, welcher Typ zu ihrer Haut passt, daher sollte das Menü auch das widerspiegeln.
Auf dem Desktop lässt ein Mega Menu mit Bildern die Kunden das Produkt oder die Pflegelinie direkt im Menü sehen, statt nur Text zu lesen. Ein Beauty-Shop könnte für jede Linie ein repräsentatives Bild (Reinigung, Feuchtigkeit, Sonnenschutz) neben den Kategorienamen setzen.
Auf dem Mobilgerät passt neben einer Tab Bar für die Hauptnavigation ein schwebender Chat-FAB in der Ecke recht gut zu dieser Branche. Kunden haben vor dem Kauf häufig Fragen (kann meine Haut das vertragen, passt das zu jenem anderen Produkt), und eine stets sichtbare Chat-Schaltfläche lässt sie sofort nachfragen. Das Zögern in dieser Phase zu verringern, lohnt sich: Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate im E-Commerce bei rund 70 %, das heißt, von je 10 Personen, die etwas in den Warenkorb legen, schließen nur etwa 3 den Kauf ab. Fragen rechtzeitig zu beantworten, ist eine Möglichkeit, einen Teil davon zu halten.
Dropshipping: Viele Produktlinien, klare Gruppierung priorisieren
Dropshipping-Shops verkaufen oft viele Kategorien zugleich: Küchenartikel, Handyzubehör, Spielzeug, Haushaltswaren. Die Herausforderung ist, dass diese Gruppen verstreut sind und nichts miteinander zu tun haben.
Auf dem Desktop hilft ein Mega Menu, jede Kategorie in ihrer eigenen Spalte zu bündeln, sodass die Kundschaft sofort sieht, was der Shop verkauft. Eine klare Struktur ist wichtiger als ein schönes Aussehen, denn Kunden kommen oft über Anzeigen und kennen den Shop noch nicht.
Auf dem Mobilgerät bewältigt ein Slide Menu eine große Zahl an Kategorien gut, ohne Platz wegzunehmen. Nutzer öffnen es, wählen eine Kategorie und graben sich dann hinein.
Warum du Mobil und Desktop getrennt konfigurieren solltest
Was alle fünf Fälle oben gemeinsam haben, ist, dass die beiden Seiten unterschiedlich konfiguriert werden. Das ist kein nebensächliches Detail. Die meisten Bestellungen kommen heute vom Smartphone, und ein Desktop-Menü, das unverändert auf das Mobilgerät übertragen wird, ist meist sowohl schwer zu tippen als auch eine Last für das Seitengewicht.
Auch die Performance ist es wert, im Auge behalten zu werden. Google setzt die Schwelle für gute Core Web Vitals bei LCP unter 2,5 Sekunden, INP unter 200 ms und CLS unter 0,1 an. Ein schwerfälliges Menü, das auf jedem Gerät lädt, zieht diese Werte leicht nach unten. Auf dem Mobilgerät sollte jede Komponente, die du hinzufügst, leichtgewichtig sein.
Genau hier ist ein Werkzeug wie Navi+ praktisch: Damit kannst du die Desktop- und Mobilmenüs getrennt konfigurieren, per Drag-and-Drop ohne Code, und behältst dein Menü, wenn du das Theme wechselst. Du kannst ein Mega Menu für den Desktop und eine Tab Bar plus Slide Menu für das Mobilgerät einrichten, ohne je Theme-Dateien anzufassen.
Kurz gesagt: Wähle dein Menü danach, wie groß dein Katalog ist und wie die Kundschaft einkauft, und trenne dann die Konfiguration für die beiden Bildschirmtypen. Die Tabelle oben ist ein Ausgangspunkt; der Rest ist Testen und Anpassen anhand der echten Zahlen deines Shops.
Dieser Artikel ist Teil des umfassenderen Leitfadens So wählst du den richtigen Menütyp für deinen Shopify-Shop.