Flache vs. tiefe Navigation in Shopify: Wie viele Menüebenen dein Shop braucht

Shopify-Händler stehen regelmäßig vor einem architektonischen Dilemma: Soll dein Shop ein breites, flaches Menü nutzen, das alle Kollektionen auf einmal zeigt, oder eine tiefe Hierarchie, die Käufer durch verschachtelte Ebenen führt?

Keines der beiden Extreme funktioniert in der Praxis gut. Dutzende Kollektionen in den Haupt-Header zu packen überfordert Besucher, während Produkte unter vielen verschachtelten Untermenüs schwerer zu finden sind. Baue stattdessen eine ausgewogene Pyramidenstruktur innerhalb von Shopifys Drei-Ebenen-Grenze und miss die Klicktiefe, statt Menüzeilen zu zählen.

Schnelle Antwort

Flache vs. tiefe Navigation: Flache Navigation legt die meisten Seiten wenige Klicks von der Startseite entfernt, tiefe stapelt mehr Ebenen. Keine gewinnt klar: tiefe Hierarchien sind schwerer nutzbar, sehr flache Menüs überfordern Käufer. Für die meisten Shopify-Shops empfiehlt sich eine Pyramide innerhalb der Shopify-Grenze von drei Menüebenen. Miss die Klicktiefe, nicht die Menüebenen.

Was flache vs. tiefe Navigation auf Shopify bedeutet

Flache Navigation nutzt breite Kategorien und geringe Verzweigung, sodass Besucher die meisten Seiten in wenigen Schritten erreichen. Tiefe Navigation nutzt eine höhere Struktur mit engeren Anfangsgruppen, die sich in verschachtelte Unterebenen verzweigen. Eine Agentur-Konvention beschreibt flache Navigation oft als Navigation mit wenigen Schichten, meist 1 bis 3 Stufen (Fresh Consulting). Auf Shopify setzt die Anwendung voraus, die Menükonfiguration von den tatsächlichen Wegen der Käufer zu trennen.

Klicktiefe ist nicht dasselbe wie Menüebenen

Händler verwechseln Menüebenen häufig mit der Klicktiefe. Menüebenen beschreiben, wie Linklisten in den Theme-Einstellungen verschachtelt sind. Die Klicktiefe misst die tatsächliche Anzahl an Klicks oder Taps, die nötig sind, um von der Startseite zu einer Zielseite zu gelangen.

Ein Modeshop könnte zum Beispiel ein zweistufiges Menü einrichten, in dem „Damen“ zu „Kleider“ aufklappt. Klickt ein Käufer auf „Damen“, sieht eine dazwischenliegende Kollektionsseite, klickt auf „Sommerkleider“ und wählt ein Produkt aus, ist die Klicktiefe bereits mehrere Klicks. Umgekehrt kann ein Desktop-Mega-Menü drei Ebenen in geordneten Spalten anzeigen und einem Käufer erlauben, mit einem einzigen Klick von der Startseite eine bestimmte Unterkollektion zu erreichen. Die Klicktiefe misst die Reibung für Kunden; Menüebenen beschreiben die Theme-Struktur.

Shopifys Drei-Ebenen-Grenze für Menüs

Im Shopify-Admin unter Inhalte > Menüs haben Dropdown-Menüs eine Plattformgrenze. Der Menüpunkt der obersten Ebene kann bis zu zwei Ebenen verschachtelter Dropdown-Menüs haben (Shopify Help), was in Liquid-Linklist-Objekten ein Maximum von 3 Ebenen ergibt (Shopify Dev Docs).

Die meisten Themes unterstützen bis zu zwei Ebenen verschachtelter Dropdown-Menüs (Shopify Help), die visuelle Umsetzung unterscheidet sich jedoch. Prüfe deine Theme-Einstellungen, um zu sehen, wie mehrstufige Menüs auf Desktop- und Mobilbildschirmen dargestellt werden.

Warum zu tiefe Menüs Kunden und Crawler verlieren

Eine Navigation über zu viele vertikale Schichten zu strecken erzeugt Reibung für Käufer und Suchbots gleichermaßen. Müssen Käufer mehrere aufeinanderfolgende Untermenü-Ebenen durchklicken, bevor sie Produkte sehen, vervielfacht sich der gedankliche Aufwand. Die Usability-Forschung der Nielsen Norman Group bestätigt, dass „all other things being equal, deep hierarchies are more difficult to use“ (NN/g), also dass tiefe Hierarchien bei sonst gleichen Bedingungen schwerer zu bedienen sind. Jede zusätzliche Dropdown-Stufe zwingt Kunden zu einer weiteren Entscheidung und gibt ihnen eine weitere Chance, falsch abzubiegen.

Für Suchmaschinen erschweren stark verschachtelte Strukturen das Crawlen. Googles John Mueller wies darauf hin, dass „if you make it too deep, then that makes it harder for us to crawl“ (Search Engine Journal), also dass eine zu tiefe Struktur das Crawlen für Google erschwert.

Die Google-Search-Central-Richtlinien besagen, dass jede Seite, die dir wichtig ist, mindestens einen Link von einer anderen Seite deiner Website haben sollte, und zwar mit crawlbaren HTML-<a>-Tags mit gültigen href-Attributen. Händler müssen sicherstellen, dass Google dein Menü crawlen kann. Außerdem brauchen tiefere Websites Breadcrumbs, die für jede Ebene der Website von der Startseite bis zur aktuellen Seite einen Link zeigen und so dafür sorgen, dass Käufer die Orientierung behalten (NN/g).

Das Risiko einer übertrieben flachen Navigation

Weil sie die Nachteile tiefer Menüs erkennen, schwenken manche Händler ins andere Extrem: Sie flachen ihren gesamten Katalog zu einer einzigen Ebene ab. Sie setzen Dutzende Kollektionslinks direkt auf die Startseite oder packen eine lange Reihe von Kategorielinks in den oberen Header.

Wer jedoch die strukturelle Tiefe entfernt, bringt gravierende Nutzererfahrungs-Mängel mit sich. NN/g warnt: „users can also become overwhelmed with long, cluttered menus“ (NN/g), also dass Nutzer auch von langen, unübersichtlichen Menüs überfordert werden können. Zeigt ein Onlineshop eine lange Reihe ungeordneter Kategorielinks, können Käufer Schwierigkeiten haben, bestimmte Abteilungen zu finden.

Ein zu stark abgeflachter E-Commerce-Katalog schadet auch der organischen Suche. John Mueller warnte: „if it’s very flat, then we think, oh all of these are equally important“ (Search Engine Journal), also dass bei einer sehr flachen Struktur alle Seiten für Google gleich wichtig wirken. Suchmaschinen stützen sich auf interne Links, um die thematische Hierarchie zu verstehen. Verlinkt ein Shop jede Unterkollektion mit identischem Gewicht direkt aus dem Haupt-Header, wird es schwerer zu signalisieren, welche Kollektionen das Hauptangebot sind und welche nachrangig.

Im Artikel des Search Engine Journal fragte ein Website-Betreiber Mueller zu einer Website mit einem Mega Menu, das über 1.000 Links hatte (Search Engine Journal). Der Artikel berichtet nicht, was mit dieser Website geschah; betrachte es daher nur als Beispiel für die Frage, die Händler stellen. Ein Menü, das jede Kollektion mit demselben Gewicht auflistet, vermittelt kein Gefühl dafür, welche Seiten zusammengehören, und jede Kollektion einfach ins Hauptmenü zu pressen ist keine gesunde flache Architektur.

Abbildung 1: Concept illustration eines zu flachen Menüs neben einer Pyramidenstruktur.

Die Pyramidenstruktur: Ein Gleichgewicht für die meisten Shops

Statt zwischen zwei dysfunktionalen Extremen zu wählen, profitieren Händler davon, einen strukturierten Mittelweg zu etablieren. John Mueller empfahl diesen Ansatz ausdrücklich: „I would try to aim for more of a pyramid structure“ (Search Engine Journal), also eher eine Pyramidenstruktur anzustreben. Eine Pyramidenstruktur hilft Suchmaschinen, den Kontext einzelner Seiten innerhalb der Website deutlich besser zu verstehen (Search Engine Journal).

In einer E-Commerce-Pyramidenhierarchie steht die Startseite an der Spitze. Darunter liegt eine knappe Reihe klarer Kategorien, die die wichtigsten Produktabteilungen darstellen (etwa „Herren“, „Damen“ oder „Wohnzimmer“). Jede Hauptkategorie verzweigt dann in fokussierte Unterkategorien (etwa „Oberbekleidung“, „Schuhe“ oder „Beleuchtung“), die schließlich zu einzelnen Produktseiten führen.

Der visuelle Kontrast verdeutlicht den zentralen Zielkonflikt:

• Eine zu flache Architektur erzeugt lange, überladene Menüs, in denen alle Einträge gleich wichtig erscheinen, Kunden überfordern und die semantische Hierarchie verdecken.
• Eine ausgewogene Pyramidenstruktur gruppiert Produkte in klare Kategorien, minimiert unnötige Klicktiefe und bietet Käufern und Suchmaschinen-Crawlern zugleich intuitive logische Zwischenschritte.

Wie die Nielsen Norman Group folgerte, gibt es keine einzig richtige Antwort (NN/g), und beide Extreme haben ihre Kosten. Der Architektur-Leitfaden von Mailchimp stellte ähnlich fest, dass eine flachere Architektur für die meisten Websites im Allgemeinen besser funktioniert (Mailchimp DE). Ziel ist eine Struktur, die flacher ist als ein labyrinthartiges Verzeichnis, ohne in einen unstrukturierten Katalog zu kippen.

Die passende Menütiefe nach Kataloggröße wählen

Die ideale Navigationstiefe für deinen Shop hängt von Umfang und Komplexität deines Sortiments ab. Weil jede Produktmischung eigene Anforderungen an die Taxonomie stellt, solltest du die folgenden Hinweise als Faustregeln verstehen, nicht als feste Schwellenwerte.

• Kleine Kataloge (einige Dutzend Produkte): Eine Struktur mit 1 oder 2 Ebenen reicht in der Regel aus. Eine Boutique mit handgefertigtem Zubehör oder einer einzigen Kleidungskollektion kann ihre Hauptlinien direkt im Haupt-Header zeigen, ohne verschachtelte Untermenüs. Käufer können die verfügbaren Artikel schnell überblicken, und die Klicktiefe bleibt niedrig.
• Mittelgroße Kataloge (einige hundert Produkte): Eine Hierarchie mit 2 Ebenen funktioniert oft gut. Kategorien der obersten Ebene gliedern die großen Produktbereiche, während Links der zweiten Ebene auf kuratierte Unterkollektionen verweisen und so eine klare thematische Filterung bieten, ohne Käufer zu desorientieren.
• Große Kataloge (Tausende Produkte): Ein wachsendes Sortiment erfordert, Shopifys Grenze von 3 Menüebenen voll auszuschöpfen, kombiniert mit Kollektionsfiltern auf der Seite und eigenen Kategorie-Landingpages. Beim Skalieren ist eine detaillierte Architekturplanung unerlässlich; lies dazu unsere ausführlichen Leitfäden zum Organisieren eines Katalogs mit über 1.000 Produkten und dazu, wie sich die Navigation mit wachsendem Katalog verändert, für strukturierte Taxonomie-Rahmenwerke.

Tiefe Navigation auf dem Smartphone: Drawer, Tab Bars und eingeklappte Ebenen

Eine intuitive Hierarchie zu erhalten ist auf Mobilbildschirmen besonders wichtig, wo der Platz begrenzt ist. Auf Smartphones stützt sich mehrstufige Navigation typischerweise auf seitlich einfahrende Drawer mit Akkordeon-Schaltern oder schrittweisen Drill-down-Panels (für Musterübersichten siehe unsere Beiträge zu mehrstufigen Menümustern in Shopify und zum Design mobiler Drawer-Menüs).

Eine entscheidende Usability-Hürde bei mobilen Drill-down-Menüs ist, Käufern zu ermöglichen, eine übergeordnete Kategorie als Ganzes zu erkunden. Tippt ein Käufer auf „Herrenbekleidung“ und gelangt in Unterkategorien wie „Hemden“ und „Jacken“, möchte er häufig die gesamte Herrenbekleidung auf einmal sehen. E-Commerce-Usability-Benchmarks des Baymard Institute zeigen, dass nur 24 % der Websites dies gut umsetzen (Baymard), nämlich durch einen eigenen „Alle anzeigen“-Link (View All) am Anfang jeder verschachtelten Menüebene.

Angesichts des knappen Platzes auf Mobilgeräten versuchen manche Shops, ihre mobilen Header zu vereinfachen, indem sie tiefere Unterkategorien ganz entfernen. Baymard warnt vor diesem Kompromiss und betont, dass das Entfernen tieferer Ebenen auf Mobilgeräten eine schlechte Umsetzung der mobilen UX ist (Baymard). Das Entfernen von Unterkategorien nimmt Smartphone-Käufern feingliedrige Navigationspfade und zwingt sie, sich durch überwältigende Kollektionsraster zu wühlen. Außerdem weist die Shopify-Help-Dokumentation darauf hin, dass manche Themes CSS-Anpassungen benötigen könnten, um die mobile Bedienbarkeit zu verbessern (Shopify Help).

Um die mobile Klicktiefe zu senken, ohne den Kategoriebaum abzuflachen, kann eine untere Tab Bar als Abkürzung dienen. Eine dauerhaft sichtbare Leiste ermöglicht den Zugriff mit einem Tap auf eine Hauptkollektion oder eine tief verschachtelte, während der darunterliegende Kategoriebaum unverändert bleibt.

Abbildung 2: Concept illustration eines Drawer-Drill-downs mit „Alle anzeigen“-Eintrag (View All) und einer Tab-Bar-Abkürzung.

Ein Mega Menu nutzen, um Wege zu verkürzen ohne Unordnung

Für Desktop-Käufer bietet ein gut gebautes Mega Menu eine praktische Möglichkeit, die Klicktiefe zu senken und dabei eine starke hierarchische Ordnung zu bewahren. Statt Nutzer Ebene für Ebene durch verschachtelte Flyout-Menüs zu schicken, zeigt ein Mega Menu Links der zweiten und dritten Ebene gleichzeitig auf einem großen zweidimensionalen Panel.

Die Wirksamkeit eines Mega Menu liegt in der strukturierten visuellen Gruppierung. Statt einer ungeordneten Linkliste, die Besucher zu überfordern droht (NN/g), oder eines Mega Menu mit über 1.000 Links wie in der Frage beim Search Engine Journal (Search Engine Journal), ordnet ein sauberes Mega Menu die Links in ausgewogene Spalten unter eindeutigen, nicht klickbaren oder klickbaren Kategorieüberschriften. So können Käufer in einer einzigen Interaktion die gesamte Breite einer Abteilung überblicken und behalten dabei eine logische Pyramidenstruktur.

Auf Mobilgeräten muss derselbe Inhalt meist als Drill-down-Drawer oder einklappbares Akkordeon statt als breites Panel dargestellt werden. Ideen zu Layout und Spaltengruppierung findest du in unserem Leitfaden zu Best Practices für Mega Menus.

Wie du die Klicktiefe misst und eine Änderung testest

Wenn du die Navigationsstruktur deines Shops änderst, ändert sich, wie Käufer und Suchmaschinen-Crawler deine Seiten finden. Um deine Hierarchie sicher zu optimieren, ohne die bestehende Leistung zu stören, folge diesem strukturierten Bewertungsverfahren in fünf Schritten:

1. Prüfe deine Bestseller: Ermittle in den Shopify-Analysen deine 10 meistverkauften Artikel. Navigiere als Erstbesucher von der Startseite zu jedem davon und zähle die genaue Anzahl der nötigen Klicks oder Taps. Liegen deine Bestseller viele Klicks entfernt, erwäge direkte Links zu Unterkollektionen oder Abkürzungen.
2. Prüfe crawlbare HTML-Links: Stelle sicher, dass jede wichtige Seite mindestens einen Link von einer anderen Seite deiner Website hat (Google Search Central). Prüfe, dass Navigationslinks als crawlbare HTML-<a>-Tags mit gültigen href-Zielen ausgegeben werden (Google Search Central) und nicht als JavaScript-Klickereignisse, die Suchmaschinen möglicherweise nicht nachverfolgen.
3. Führe einen schlanken Tree-Test durch: Bevor du dein Live-Theme umbaust, führe einen kurzen Tree-Test mit einer kleinen Gruppe von Kollegen oder Kunden durch. Wie die Usability-Forschung zeigt, hilft Tree-Testing, die Seitenstruktur zu validieren, indem Nutzer versuchen, Informationen in der vorgeschlagenen Hierarchie zu finden (NN/g).
4. Starte zuerst mit einer einzelnen Kollektion: Statt deinen gesamten Katalog über Nacht umzustrukturieren, passe eine Hauptkollektions-Abteilung an. Lass bestehende Kollektions-Handles und Produkt-URLs unverändert – das Aktualisieren von Navigationslinks ändert die kanonischen Seiten-URLs nicht. Beobachte Impressionen, Klickraten und Indexabdeckung in der Google Search Console über mehrere Wochen, um die Wirkung zu beurteilen, bevor du die Änderungen im ganzen Shop ausrollst.
5. Behandle die Drei-Klick-Regel als informelle Orientierung: Denk daran, dass die viel zitierte „Drei-Klick-Regel“ lediglich eine praktische Faustregel ist, kein striktes Ranking-Kriterium und kein wissenschaftliches Usability-Gesetz. Googles John Mueller erklärte, dass Suchmaschinen auf eine angemessene Anzahl von Klicks achten (Search Engine Journal) und dabei auf logische Verbindungen statt auf starre Klickgrenzen schauen.

Kompromisse: Wann ein tieferes Menü die richtige Wahl ist

Auch wenn flachere Navigationsstrukturen den Großteil der Direct-to-Consumer-Shops begünstigen, gibt es klare Handelsszenarien, in denen eine tiefere Hierarchie die bessere, praktischere Lösung ist.

Shops mit hochtechnischem oder stark kategorisiertem Sortiment, etwa Kfz-Ersatzteile, geordnet nach Marke, Modell, Baujahr und Motortyp, brauchen möglicherweise tiefere hierarchische Pfade. Wer versucht, einen komplexen Katalog in ein flaches Menü mit 1 oder 2 Ebenen zu zwängen, erzeugt unbeherrschbare Listen, die Käufer frustrieren, die nach einer bestimmten Kompatibilität suchen.

Eine tiefere Navigationsarchitektur gelingt, wenn sie durch klare Breadcrumbs gestützt wird, die Links für jede Ebene von der Startseite bis zur aktuellen Seite zeigen (NN/g). Umgekehrt entfernt das aggressive Abflachen eines stark technischen Katalogs wichtige semantische Beziehungen und verwässert das kontextuelle Verständnis, auf das sich Suchmaschinen stützen (Search Engine Journal).

Da Shopify innerhalb von Liquid-Linklists eine feste Obergrenze von 3 Ebenen durchsetzt (Shopify Dev Docs), sollten Händler mit komplexen Produktlinien facettierte Kollektionsfilter und Unterkollektions-Rasterkarten nutzen, um weitere Tiefe abzubilden. Letztlich gibt es, wie die NN/g-Forschung bestätigt, nicht die eine richtige Antwort für alle Websites (NN/g), und die optimale Hierarchie muss die konkreten Suchgewohnheiten deiner Zielgruppe widerspiegeln.

Wo Navi+ ins Spiel kommt

Wenn dein aktuelles Shopify-Theme dich daran hindert, eine saubere Pyramidennavigation umzusetzen, kannst du mit Navi+ eigene Navigationskomponenten darauf aufbauen. Navi+-Menüs sind auf drei Ebenen begrenzt, dieselbe Obergrenze wie bei Shopify-Menüs.

Navi+ konzentriert sich auf praktische Navigationskomponenten für den Storefront:

• Mobile Menu: Ein mobiler Drawer mit bis zu drei Ebenen. Du kannst oben in jeder Ebene wie bei jedem anderen Menüeintrag einen „Alle anzeigen“-Eintrag (View All) hinzufügen.
• Tab Bar: Eine untere Leiste mit Ein-Tap-Abkürzungen zu deinen wichtigsten oder am tiefsten verschachtelten Kollektionen, die die Klicktiefe senkt, ohne deinen Kategoriebaum zu ändern.
• Desktop & Mobile Mega Menu: Mehrspaltige Panels, die Links unter Überschriften gruppieren statt in einer langen Liste. Ein Mobile Menu kann den Baum eines Desktop Mega Menu einbetten, sodass Desktop und Mobil eine gemeinsame Struktur nutzen.
• Icon Menu: Bildbasierte Kacheln, die als visuelle Einstiegspunkte in deine Hauptkategorien dienen.

Wenn das Menü deines Themes die geplante Struktur nicht darstellen kann, lässt dich Navi+ ein Mobile Menu, eine Tab Bar oder ein Mega Menu darauf aufbauen, innerhalb derselben drei Ebenen – probiere es zuerst an einer Kollektion aus.

Checkliste zum Handeln

• Miss die Klicktiefe von deiner Startseite zu deinen 10 meistverkauften Produkten.
• Prüfe die Einstellungen deines aktiven Themes, um zu bestätigen, wie viele verschachtelte Menüebenen es unterstützt (die meisten unterstützen bis zu 2 verschachtelte Ebenen).
• Gliedere deine Hauptnavigation in eine ausgewogene Pyramidenhierarchie mit eindeutigen übergeordneten Kategorien.
• Stelle sicher, dass mobile Drawer-Menüs oben in jeder verschachtelten Stufe einen sichtbaren „Alle anzeigen“-Link (View All) enthalten.
• Richte direkte Abkürzungen (etwa eine fixierte untere Tab Bar oder Breadcrumbs) für tief verschachtelte Kollektionen ein.
• Teste strukturelle Änderungen zuerst an einer einzelnen Kollektion und lass bestehende URLs unverändert.
• Beobachte Impressionen und Indexierung in der Search Console über mehrere Wochen, um die Wirkung zu sehen.

FAQ

Wie viele Ebenen sollte ein Shopify-Menü haben?

Shopify-Menüs erlauben in Liquid-Linklists höchstens 3 Ebenen, und die meisten Themes unterstützen unterhalb der obersten Einträge bis zu zwei Ebenen verschachtelter Dropdowns. Die meisten Shops fahren gut damit, innerhalb dieser Struktur mit 3 Ebenen zu bleiben.

Sollte jedes Produkt innerhalb von drei Klicks erreichbar sein?

Die Drei-Klick-Idee ist eine Faustregel, kein bewiesenes Gesetz. Google verlangt lediglich eine angemessene Anzahl von Klicks und dass jede wichtige Seite von mindestens einer anderen Seite der Website verlinkt ist.

Ist eine flache Seitenstruktur besser für SEO?

Nicht automatisch. John Mueller wies darauf hin, dass bei einer sehr flachen Website alle Seiten für Suchmaschinen gleich wichtig wirken, und empfiehlt, eine ausgewogene Pyramidenstruktur anzustreben.

Kann ein großes Mega Menu dem SEO schaden?

Es kann die Hierarchie verwischen, wenn es schlecht umgesetzt ist. Der im Search Engine Journal diskutierte Fall betraf ein Mega Menu mit über 1.000 Links; Links in logische Spalten zu gruppieren und Menüs auf echte Kategoriepfade zu beschränken hilft, die Hierarchie klar zu halten.

Wie sollten tiefe Menüs auf dem Smartphone funktionieren?

Behalte die nötigen Kategoriestufen mit Drill-down-Drawern oder Akkordeons bei, füge aber auf jeder Ebene einen sichtbaren „Alle anzeigen“-Eintrag (View All) hinzu. Usability-Forschung von Baymard zeigt, dass das Entfernen tieferer Ebenen auf Mobilgeräten eine schlechte UX-Umsetzung ist.

Quellen

• Nielsen Norman Group (Kathryn Whitenton, 2013): Flat vs. Deep Website Hierarchies
• Search Engine Journal (Roger Montti, zitiert John Mueller, 2021): John Mueller Recommends Pyramid Site Structure
• Shopify Help Center: Drop-down menus in Shopify
• Shopify Developer Documentation: Liquid linklist object
• Google Search Central: Creating crawlable links
• Baymard Institute: Mobile navigation ‘View All’ usability research
• Fresh Consulting: UI/UX Principle #23: Flatter Navigation is Better Than Deeper Navigation
• Mailchimp (DE): Website-Architektur optimieren