Erstellen Sie eine Shopify-Menüleiste mit Home-, Katalog- und Über-uns-Links für Desktop und Mobilgeräte

Das erste Navigationsmenü eines Online-Shops benötigt lediglich drei wohlüberlegte Links — Home, Katalog und Über uns. Einmalig im Shopify-Admin unter Inhalt > Menüs angelegt, erscheint dieses Menü im Desktop-Header sowie im mobilen Drawer und lässt sich auf Smartphones zusätzlich als feste untere Tab-Leiste anheften, damit Ihre wichtigsten Seiten stets sichtbar bleiben.

Schnellantwort: So erstellen Sie eine Menüleiste mit Home, Katalog und Über uns

Erstellen Sie eine Über-uns-Seite unter Onlineshop > Seiten, öffnen Sie Inhalt > Menüs, wählen Sie Ihr Hauptmenü und fügen Sie drei Einträge hinzu: Home (Link-Typ Startseite), Katalog (/collections/all oder eine Kategorie) und Über uns (Ihre erstellte Seite). Speichern Sie das Menü. Ihr Theme zeigt es im Desktop-Header und im mobilen Menü-Drawer an. Ergänzen Sie eine Tab-Leiste für Smartphones.

Die fünf Schritte im Überblick:

1. Über-uns-Seite erstellen: Unter Onlineshop > Seiten anlegen und auf Sichtbar setzen.
2. Inhalt > Menüs öffnen: Im Shopify-Admin das Hauptmenü auswählen.
3. Drei Links hinzufügen: Home (Typ Startseite), Katalog (/collections/all oder eine Kategorie) und Über uns (Ihre Seite).
4. Menü speichern: In den Theme-Einstellungen bestätigen, dass der Header dieses Menü verwendet.
5. Auf Mobilgeräten testen: Die Anzeige im Drawer prüfen und optional eine untere Tab-Leiste für sofortige Erreichbarkeit hinzufügen.

Was gehört in eine Home-, Katalog- und Über-uns-Menüleiste

Beim Start eines neuen Shops ist keine verschachtelte Navigationsstruktur erforderlich. Ein fokussiertes Drei-Link-Menü bietet Erstbesuchern klare Orientierung ohne visuelle Überlastung:

• Home: Dient als verlässlicher Anker, über den Kunden jederzeit mit einem Klick zur Startseite zurückkehren können.
• Katalog: Bildet den zentralen Produkt-Hub, auf dem Besucher stöbern, Kategorien erkunden und Artikel in den Warenkorb legen.
• Über uns: Vermittelt Ihre Markengeschichte und Seriosität und gibt Erstkäufern einen überzeugenden Grund, Ihrem Shop zu vertrauen.

Die Beschränkung auf drei Links garantiert beste Lesbarkeit auf allen Geräten. Usability-Untersuchungen der Nielsen Norman Group belegen, dass dauerhaft sichtbare Navigationspunkte am effektivsten funktionieren, wenn 4 bis 5 Optionen vorhanden sind. Drei Kernlinks stellen sicher, dass alle Bezeichnungen auch auf kleinen Bildschirmen vollständig lesbar bleiben, während Raum für spätere Ergänzungen wie Kontakt oder FAQ bleibt.

Schritt 1: Über-uns-Seite erstellen und Katalog-Ziel wählen

Vor dem Anlegen des Menüs sollten alle Zielseiten existieren, damit jeder Menüeintrag direkt mit einem veröffentlichten Inhalt verknüpft werden kann.

Über-uns-Seite erstellen

Navigieren Sie im Shopify-Admin zu Onlineshop > Seiten und klicken Sie auf Seite hinzufügen. Vergeben Sie den Titel Über uns. Verfassen Sie eine prägnante Markengeschichte über Ihre Werte, Produkte und Standards. Die offizielle Shopify-Dokumentation zu Seiten erläutert, dass Seiten für selten wechselnde Inhalte gedacht sind, während der Shopify-Leitfaden für Über-uns-Seiten betont, wie entscheidend sie für den Vertrauensaufbau sind. Setzen Sie die Sichtbarkeit auf Sichtbar und speichern Sie. Beachten Sie, dass das Erstellen einer About page diese nicht automatisch in die Navigation einfügt; die Verknüpfung im Menü muss manuell erfolgen.

Katalog-Ziel festlegen

Wählen Sie aus, wohin der Catalog link Besucher leiten soll:

Gemäß der Shopify Help Center Katalog-Dokumentation besitzt jeder Shopify-Shop die Standard-URL /collections/all, die sichtbare Produkte standardmäßig alphabetisch auflistet. Um die Reihenfolge zu ändern, erstellen Sie eine Kollektion mit dem Handle all, oder verlinken Sie direkt auf eine spezifische Kollektion.

Schritt 2: Das Menü unter Inhalt > Menüs aufbauen

Sobald die Zielseiten veröffentlicht sind, stellen Sie das Navigationsmenü im Admin-Bereich zusammen.

Abbildung 1: Konzeptillustration (Concept illustration) — Schritt 2: Das Menü unter Inhalt > Menüs aufbauen

Home hinzufügen

Wählen Sie unter Inhalt > Menüs Ihr Hauptmenü aus und klicken Sie auf Menüeintrag hinzufügen. Geben Sie als Namen Home ein. Wählen Sie unter Link den Typ Startseite. Bei Auswahl dieses Link-Typs weist Shopify automatisch die Basis-URL Ihres Shops zu.

Katalog hinzufügen

Klicken Sie auf Menüeintrag hinzufügen und tragen Sie Katalog (oder Shop) ein. Wählen Sie unter Link eine Kollektion aus der Liste oder nutzen Sie die Seite mit allen Produkten unter /collections/all. Die offizielle Shopify-Dokumentation zum Bearbeiten von Menüs warnt davor, rohe URLs manuell einzufügen, da sich Link-Verbindungen trennen und 404-Fehler verursachen können. Wählen Sie das Ziel aus der Liste aus, sobald es dort angeboten wird.

Über uns hinzufügen

Klicken Sie erneut auf Menüeintrag hinzufügen und nennen Sie den Punkt Über uns. Wählen Sie unter Link den Bereich Seiten und klicken Sie auf Ihre im ersten Schritt erstellte Über-uns-Seite.

Reihenfolge anordnen und speichern

Überprüfen Sie die drei Einträge in der Menüliste:

Nutzen Sie die Anfasser-Symbole links neben den Einträgen, um sie in die gewünschte Reihenfolge zu ziehen: Home, Katalog, Über uns. Das Frontend Ihres Shops spiegelt exakt diese Reihenfolge wider. Shopify erlaubt bis zu 200 ungespeicherte Änderungen; klicken Sie daher regelmäßig auf Menü speichern. Sie können bei Bedarf auch Emojis direkt in das Namensfeld einfügen.

Schritt 3: Das Menü im Desktop-Header anzeigen

Das Anlegen im Admin platziert das Menü noch nicht automatisch im sichtbaren Shop; die Anzeigeposition wird über die Theme-Einstellungen gesteuert.

Um das Menü im Desktop-Header zu aktivieren, gehen Sie zu Onlineshop > Themes und klicken Sie beim aktiven Theme auf Anpassen. Wählen Sie in der linken Leiste den Abschnitt Header aus. Wählen Sie dort das zuvor erstellte Menü aus. Die Bezeichnungen der Einstellungen unterscheiden sich je nach Theme, suchen Sie daher in diesem Abschnitt nach der Menü-Option.

Stellen Sie sicher, dass Ihr Theme auf Desktop-Monitoren alle Links horizontal ausschreibt, anstatt sie hinter einem Icon zu verstecken. Untersuchungen der Nielsen Norman Group zur Desktop-Navigation unterstreichen, dass Menüpunkte auf breiten Bildschirmen direkt sichtbar sein sollten, da verborgene Menüs die Auffindbarkeit stark beeinträchtigen. Vergewissern Sie sich, dass Ihr Desktop header menu alle drei Links gut lesbar präsentiert.

Wie dasselbe Menü auf Mobilgeräten dargestellt wird

Während Desktop-Monitore genügend Breite für horizontale Links bieten, gelten auf Smartphones durch die schmalen Displays völlig andere Bedingungen.

Abbildung 2: Konzeptillustration (Concept illustration) — Wie dasselbe Menü auf Mobilgeräten dargestellt wird

Die meisten Shopify-Themes klappen den Header auf Mobilgeräten automatisch zusammen und verlegen die Links in ein seitliches Ausklappmenü (Menu drawer), das über ein Hamburger-Symbol geöffnet wird. NN/g-Studien zeigen, dass versteckte Navigation die Inhaltsentdeckung im Vergleich zu sichtbaren Elementen spürbar verringert. Da drei Menüpunkte nur wenig Platz beanspruchen, verbessert eine direkte Erreichbarkeit ohne zusätzlichen Klick das mobile Einkaufserlebnis erheblich.

Falls Sie auf Mobilgeräten eine andere Menüstruktur als auf dem Desktop benötigen, lesen Sie unseren Leitfaden dazu, wie Sie auf Desktop und Mobilgeräten unterschiedliche Menüs anzeigen.

Schritt 4: Eine untere Tab-Leiste für Mobilgeräte hinzufügen

Wenn viele Ihrer Besucher über Smartphones einkaufen, hält ein Hamburger-Menü Ihre Links verborgen, bis sie darauf tippen.

Eine Bottom tab bar fixiert die wichtigsten Links am unteren Bildschirmrand. Die mobile Navigationsforschung der NN/g hält fest, dass Tab-Leisten dauerhaft sichtbar bleiben, egal ob die Seite gescrollt wird oder nicht.

Die meisten Shopify-Themes enthalten standardmäßig keine feste untere Menüleiste, sodass Sie meist eine App oder individuellen Code benötigen. Verwenden Sie in der Tab-Leiste exakt dieselben drei Links (Home, Katalog, Über uns) mit identischen Ziel-URLs wie im Desktop-Menü. Eine einheitliche Navigation stellt sicher, dass Kunden beim Gerätewechsel stets die gleiche logische Struktur vorfinden.

Symbole hinzufügen und auf jeder Bildschirmgröße testen

Optische Symbole beschleunigen die Orientierung auf kleinen Displays, verlangen jedoch eine durchdachte Gestaltung.

Während Emojis direkt in Textfelder eingegeben werden können, erfordern professionelle SVG-Grafiken Theme-Unterstützung oder eine Navigations-App. Erkenntnisse der Nielsen Norman Group betonen, dass stets ein Icon with label (Symbol kombiniert mit Text) verwendet werden sollte, da reine Symbole ohne Text häufig missverstanden werden. Falls Sie eine App einsetzen, beachten Sie unsere Anleitung dazu, wie Sie jedem Menüeintrag ein Icon zuweisen.

Stellen Sie sicher, dass alle Touch-Elemente den Barrierefreiheitsstandards entsprechen. Die W3C WCAG 2.2 Richtlinie (Erfolgskriterium 2.5.8) schreibt eine Mindestzielgröße von 24×24 CSS-Pixeln vor (mit einigen Ausnahmen).

Prüfen Sie Ihre Navigation vor dem Livegang:

1. Desktop-Monitor: Prüfen Sie, ob die Links horizontal ohne unerwünschte Zeilenumbrüche stehen.
2. Tablet-Bildschirm: Testen Sie den Übergangspunkt zwischen Menüleiste und Hamburger-Symbol.
3. Smartphone Hochformat: Kontrollieren Sie das reibungslose Öffnen des Drawers und alle drei Links.
4. Smartphone Querformat: Vergewissern Sie sich, dass die Menüleiste nicht zu viel Bildschirmhöhe verdeckt.
5. Funktionsprüfung: Klicken Sie jeden Link an, um fehlerfreie Zielseiten zu bestätigen.

Häufige Probleme und Lösungen

Sollte sich Ihr Menü unerwartet verhalten, prüfen Sie folgende Lösungsansätze sowie unseren Ratgeber zum Thema defekte Links in Shopify-Navigationsmenüs reparieren:

Link führt zu einer 404-Fehlerseite

Wenn Katalog oder Über uns einen 404-Fehler erzeugt, wurde die URL vermutlich manuell eingetippt und enthält einen fehlerhaften Handle. Öffnen Sie Inhalt > Menüs und wählen Sie das Ziel direkt aus den Auswahllisten von Shopify.

Über-uns-Seite erscheint nicht im Menü

Sie haben die Seite verfasst, aber im Shop ist kein Link zu sehen. Unter Onlineshop > Seiten erstellte Inhalte werden nicht automatisch verlinkt. Fügen Sie den Eintrag unter Inhalt > Menüs manuell hinzu und stellen Sie sicher, dass die Seite auf Sichtbar steht.

Katalog-Link zeigt unerwartete Produktsortierung

Die Katalogseite öffnet sich, aber die Produkte erscheinen in unpassender Reihenfolge. Shopifys /collections/all sortiert standardmäßig alphabetisch. Erstellen Sie eine Kollektion mit dem Handle all.

Header übernimmt Menüänderungen nicht

Sie haben Änderungen gespeichert, aber der Shop zeigt weiterhin veraltete Links. Öffnen Sie im Theme-Editor (Onlineshop > Themes > Anpassen) den Bereich Header und vergewissern Sie sich, dass dort Ihr aktualisiertes Menü hinterlegt ist.

Klick auf ein übergeordnetes Element öffnet keine Seite

Wenn Sie Untermenüs unter dem Katalog anlegen und der Klick auf den Hauptpunkt nicht navigiert, liegt dies meist an der Theme-Programmierung. Viele Themes nutzen übergeordnete Menüpunkte als reine Aufklapp-Schalter statt als klickbare Links.

Kompromisse: Wann ein Drei-Link-Menü nicht mehr ausreicht

Ein Drei-Link-Menü bietet ein ideales Fundament, stößt bei wachsendem Sortiment jedoch an Grenzen.

Sortimentserweiterung über drei Links hinaus

Sobald Ihr Inventar auf mehrere Kategorien anwächst, reicht ein einzelner Katalog-Link oft nicht mehr aus. In diesem Fall können Sie ein Untermenü unter dem Katalog anlegen. Shopify unterstützt bis zu 2 verschachtelte Ebenen für Dropdown-Menüs. Für sehr umfangreiche Kollektionen auf Desktop-Bildschirmen können Sie den Katalog in ein Mega-Menü umwandeln, um mehrspaltige Produktkategorien mit Werbebannern zu präsentieren.

Sehen Sie sich dazu dieses offizielle Video-Tutorial des Shopify Help Centers an, das den Aufbau hierarchischer Dropdown-Menüs demonstriert:

Grenzen mobiler Tab-Leisten

Obwohl Tab-Leisten unmittelbaren Zugriff bieten, weisen NN/g-Studien darauf hin, dass sie nur für begrenzte Navigationsoptionen geeignet sind. Bei mehr als 4 bis 5 Einträgen wirkt die Leiste überladen. Zudem beansprucht eine feste Leiste vertikalen Bildschirmplatz. Wenn Ihre Kunden überwiegend am Desktop kaufen, ist eine untere Leiste oft entbehrlich.

Wo sich Navi+ einfügt

Die Einrichtung von Home, Katalog und Über uns im Shopify-Admin gelingt schnell, allerdings bieten native Theme-Optionen kaum Freiheiten bei der mobilen Optimierung.

Wenn Sie Home, Katalog und Über uns dauerhaft am unteren Displayrand jedes Smartphones mit Symbol und Text fixieren möchten, lässt sich dies mit Navi+ Tab Bar ohne Code-Eingriffe im Theme umsetzen. Ihr reguläres Shopify-Hauptmenü bleibt für den Desktop-Header aktiv, während dieselben drei Links mobil am unteren Rand bereitstehen.

Wächst Ihr Shop weiter, wachsen die Lösungen von Navi+ mit:

• Navi+ Mobile Menu: Erstellen Sie ein eigenständiges mobiles Ausklappmenü mit individuellem Branding und synchronisieren Sie Ihre Shopify-Links auf Knopfdruck.
• Navi+ Desktop Mega Menu: Organisieren Sie große Kataloge in übersichtlichen, mehrspaltigen Raster-Layouts mit Banner-Bildern (unterstützt bis zu 3 Navigationsebenen).

Um die ideale Struktur für Ihren Store zu ermitteln, lesen Sie unseren Vergleichsartikel darüber, wie Sie den passenden Menütyp für Ihren Shopify-Store auswählen.

Aktions-Checkliste

Nutzen Sie diese Checkliste zur Überprüfung Ihrer neuen Drei-Link-Menüleiste:

• Über-uns-Seite veröffentlichen: Status unter Onlineshop > Seiten auf Sichtbar prüfen.
• Katalog-Ziel festlegen: Zwischen Standard /collections/all oder Kategorie-Handle all wählen.
• Menü-Editor öffnen: Zu Inhalt > Menüs navigieren und das Hauptmenü öffnen.
• Home hinzufügen: Link-Typ Startseite wählen, damit das System das Ziel automatisch setzt.
• Katalog hinzufügen: Ziel direkt aus der Kategorie-Auswahlliste anwählen.
• Über uns hinzufügen: Veröffentlichte Seite aus der Seitenliste auswählen.
• Sortieren und speichern: Reihenfolge anpassen und auf Menü speichern klicken.
• Header im Theme verbinden: Im Theme-Editor prüfen, ob der Header das Menü nutzt.
• Mobilen Drawer prüfen: Vorschau auf dem Smartphone öffnen und Darstellung testen.
• (Optional) Tab-Leiste aktivieren: 3 beschriftete Tabs am Smartphone-Displayrand fixieren.
• Live-Links überprüfen: Jeden Link auf Desktop und Smartphone anklicken und auf 404-Fehler prüfen.

Häufig gestellte Fragen (FAQ)

Wohin sollte der Katalog-Link führen?

Shopify-Shops verfügen über die integrierte Seite /collections/all, die sichtbare Produkte alphabetisch anzeigt. Zur individuellen Sortierung legen Sie eine Kollektion mit dem Handle all an oder verlinken gezielt auf eine bestimmte Produktkategorie.

Warum erscheint meine Über-uns-Seite nicht im Menü?

Das Anlegen einer Seite unter Onlineshop > Seiten verknüpft diese nicht selbsttätig mit der Menüleiste. Sie müssen unter Inhalt > Menüs einen Menüpunkt erstellen und die Seite manuell auswählen.

Erscheint dasselbe Menü automatisch auf Mobilgeräten?

Ja, die meisten Themes übernehmen das Desktop-Header-Menü für den mobilen Ausklapp-Drawer, der über das Hamburger-Symbol aufgerufen wird. Da das visuelle Design vom Theme abhängt, sollten Sie die Anzeige auf einem Smartphone kontrollieren.

Wird eine App für eine untere Tab-Leiste benötigt?

Standardmäßige Shopify-Themes bieten einen Header und ein Schubladenmenü, jedoch keine fixierte Leiste am unteren Rand. Hierfür ist eine App oder eigener Programmcode erforderlich; das Format eignet sich für wenige Kernlinks.

Können Menüpunkten Symbole hinzugefügt werden?

Emojis lassen sich direkt in die Textfelder im Admin einfügen. Grafische SVG-Icons erfordern Theme-Unterstützung oder eine Navigations-App. Zudem sollte jedes Symbol stets durch eine Textbeschriftung ergänzt werden.

Warum führt mein Menü-Link zu einem 404-Fehler?

Das manuelle Eintippen von URLs führt bei späteren Adress- oder Handle-Änderungen häufig zu Linkbrüchen. Wenn Sie Zielseiten direkt aus den Auswahllisten von Shopify zuweisen, bleiben die Verbindungen stabil.

Quellen

• Shopify Help Center: Editing menus
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Add and edit pages
• Shopify Help Center: Change catalog page
• Shopify Help Center: About us page
• Nielsen Norman Group: Mobile navigation patterns
• Nielsen Norman Group: Visible navigation on mobile
• Nielsen Norman Group: Desktop navigation not hamburger
• Nielsen Norman Group: Hamburger menus and discoverability
• Nielsen Norman Group: Icon usability
• W3C: WCAG 2.2 Target Size (Minimum)