Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — der Baby- und Kinderkatalog lässt sich auf Shopify leichter durchstöbern, mit Mega Menu, Slide Menu und Tab Bar

Wie Baby Studio seine Navigation neu organisiert hat, damit sich der Baby- und Kinderkatalog auf Desktop und Mobile leichter entdecken lässt.

BS
Baby Studio
babystudio.com.au
Baby- und Kinderhandel Shopify Mobile Navigation
Auf einen Blick
Branche
Baby & nursery retail
Plattform
Shopify
Herausforderung
Katalog mit vielen Produktgruppen, noch flache Navigation
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Fokus
Katalog auf Desktop entdecken, schnelle Bedienung auf Mobile

Das Problem des Kunden

Baby Studio bedient eine sehr spezielle Zielgruppe: Eltern, junge Familien und Menschen, die Geschenke für kleine Kinder kaufen. Bei dieser Zielgruppe ist der Bedarf meist klar, aber der Weg zum Produkt verzweigt sich stark: Kinderwagen, Autositze, Nursery, Feeding, Babypflege, Spielzeug, Zubehör sowie Produktgruppen nach Alter oder Einsatzsituation.

Wenn ein Katalog so viele Gruppen umfasst, stösst das Standard-Menü des Themes schnell an seine Grenzen. Auf Desktop kann eine flache Menüleiste nicht die gesamte Breite des Stores abbilden. Auf Mobile, wenn alles hinter dem Hamburger-Menü versteckt ist, müssen Kunden jede Ebene selbst öffnen und erraten, welche Gruppe das gesuchte Produkt enthält.

Baby Studio Desktop-Storefront vor Navi+ — flache Kategorienavigation ohne Mega Menu
Baby Studio auf Desktop: viele Produktgruppen, aber der Header ist weiterhin eine flache Menüleiste und öffnet den Katalog noch nicht als Mega Menu.

Das Problem ist nicht ein Mangel an Produkten. Das Problem ist, dass die Produkte gut sind, aber die Navigationsstruktur den Kunden noch nicht zeigt, was der Store verkauft — also brauchen Kunden einen zusätzlichen Schritt, um den richtigen Bereich zu finden. Auf Mobile genügen ein paar überflüssige Schritte, damit Kunden eine wichtige Produktgruppe übergehen.

Baby Studio Mobile-Menü vor Navi+ — erste Navigationsebene
Das aktuelle Mobile-Menü: Die Hauptgruppen liegen im Drawer, Kunden müssen das Menü erst öffnen, bevor sie den Katalog sehen.

Was Navi+ löst

Der passende Ansatz besteht darin, das Theme nicht zu wechseln und den gesamten Store nicht neu aufzubauen. Navi+ wird als zusätzliche Navigationsebene eingesetzt, die die Aufgaben klar nach Kontext aufteilt: Desktop braucht den weiten Überblick, Mobile braucht schnelle Bedienung, und Kunden, die gerade einkaufen, brauchen Shortcuts zu den wichtigen Stellen.

Desktop Mega Menu — zeigt den Kunden von Anfang an, was der Store zu bieten hat

Das Mega Menu kann die wichtigsten Produktgruppen in mehrere klare Spalten gliedern, zum Beispiel: Prams & Strollers, Car Seats, Nursery, Feeding, Toys, Baby Care, Sale oder Featured Collections. Jede Gruppe hat eine verständliche Beschriftung und ein repräsentatives Bild, damit neue Besucher des Stores nicht zu viel herumprobieren müssen.

Slide Menu — in die Tiefe der Kategorien gehen, ohne Mobile zu überladen

Das Slide Menu eignet sich für einen Katalog mit vielen Untergruppen. Kunden können von der grossen Gruppe zur kleineren Bildschirm für Bildschirm wechseln — eher wie ein App-Erlebnis als eine lange Liste von Links. Das ist besonders hilfreich, wenn Kunden nach Bedarf, Alter, Produktart oder passendem Zubehör auswählen wollen.

Tab Bar — bringt Menü, Suche und Warenkorb in Daumenreichweite

Auf Mobile hält die Tab Bar die wichtigen Aktionen stets am unteren Bildschirmrand: Home, Shop/Menu, Search, Cart, Account oder Sale. Kunden müssen nicht zum Header nach oben scrollen, um zu suchen, das Menü zu öffnen oder den Warenkorb zu sehen. Für eine Zielgruppe, die viele Produkte für ihr Baby durchstöbert, sorgt diese Reduzierung wiederholter Schritte für ein leichteres Erlebnis.

Das Ergebnis — nach Navi+

Nach der Neuorganisation der Navigation mit Navi+ kann Baby Studio seinen Katalog auf eine Weise präsentieren, die näher am tatsächlichen Einkaufsverhalten liegt: Auf Desktop sind mehr Produktgruppen sichtbar, auf Mobile gibt es einen klareren Weg, und die wichtigsten Aktionen liegen dort, wo Kunden leicht tippen können.

Baby Studio aktualisiertes Desktop Mega Menu mit Prams-and-Strollers-Navigation und Produktbildern
Das Update auf Desktop: Die Kategorie Prams & Strollers öffnet sich als Mega Menu, mit Untergruppen und beispielhaften Produkten.
Baby Studio aktualisiertes Mobile-Storefront mit Navi+ Tab Bar am unteren Rand
Das Update auf Mobile: Die Tab Bar platziert Menu, Catalog, Blogs, Support und More am unteren Bildschirmrand — genau im Aktionsbereich des Daumens.
Baby Studio aktualisiertes Mobile Slide Menu mit Produkt-Highlights und Kategorie-Links
Das Slide Menu nach dem Update: Das gleitende Panel legt sich über das Storefront, bewahrt den Kontext der Seite dahinter und bringt Kategorien, hervorgehobene Produkte und Kontakt-Shortcuts in denselben Ablauf.

Das angestrebte Ergebnis ist nicht einfach ein „schöneres“ Menü. Das Ergebnis ist, dass neue Kunden schnell verstehen, was der Store anbietet, dass Mobile-Kunden mit weniger Umwegen den richtigen Bereich finden und dass sich der Header kompakter gestalten lässt, ohne wichtige Funktionen wie Search, Cart und Menu zu verlieren.

  • Desktop bildet die Breite des Katalogs besser ab — durch das Mega Menu.
  • Mobile hat einen klareren Weg — durch das Slide Menu.
  • Search, Cart und Menu liegen näher am Daumen — durch die Tab Bar.
  • Neue Kunden verstehen schneller, was der Store anbietet.
  • Ein Katalog mit vielen Produktgruppen lässt sich leichter durchstöbern, ohne das Theme zu wechseln.

Grundprinzipien

Punkte, die sich auf die meisten Stores mit verzweigtem Katalog übertragen lassen — nicht nur auf Baby Studio.

  • Desktop zum Entdecken: Das Mega Menu öffnet die Breite des Katalogs direkt im Header, damit neue Kunden sehen, was der Store verkauft, ohne herumzuprobieren.
  • Mobile für die Tiefe: Das Slide Menu führt Kunden Ebene für Ebene wie eine App und passt zu Katalogen, die nach Bedarf oder Alter gegliedert sind.
  • Wichtige Aktionen in Daumenreichweite: Menü, Suche und Warenkorb in die Tab Bar legen und so den Header entlasten.
  • Eine Ebene ergänzen, nicht das Fundament tauschen: die Navigation verbessern, ohne das Theme zu wechseln oder laufende Apps aufzugeben.

Hast du einen ähnlichen Store und möchtest Navi+ ausprobieren? Schau dir die Menütypen an oder lies die Dokumentation.

K
Khoi — Founder, Navi+
Hat Navi+ entwickelt und berät Shopify-Stores mit vielen Kategorien direkt bei ihrer Navigation.

Beginnen Sie mit Navi+ AI Menu Builder

Wählen Sie Ihre Plattform — kostenlos zu installieren, in Minuten live.