Quick Answer: How to Customize the Header Menu Layout in Shopify
Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.
So passen Sie Ihr Header-Menü-Layout Schritt für Schritt an:
- Theme-Einstellungen öffnen: Gehen Sie in Ihrer Shopify-Administration auf Online Store > Themes > Customize und klicken Sie in der linken Leiste auf den Bereich Header.
- Logoposition und Layout festlegen: Wählen Sie unter Logo position, ob das Logo linksbündig neben den Menülinks oder zentriert darüber erscheinen soll. (Hinweis: Bezeichnungen variieren je nach Theme; in Dawn heißt die Option Logo position).
- Menü verknüpfen und verschachteln: Öffnen Sie Content > Menus, um Links mit bis zu 2 verschachtelten Unterebenen zu strukturieren, und weisen Sie diese Liste unter Header > Menu zu.
- Menütyp wählen und Mobilansicht prüfen: Wählen Sie unter Menu type zwischen Dropdown, Mega menu oder Drawer, und kontrollieren Sie die Mobilansicht unter Mobile logo position.
What “Header Menu Layout” Means in Shopify
Wenn Shop-Betreiber über die Anpassung ihres Header-Menü-Layouts sprechen, geht es selten nur um eine einzelne isolierte Einstellung. In Shopify basiert das Header-Layout auf dem Zusammenspiel von vier unterschiedlichen Ebenen:
- Branding und Ausrichtung (Logo position): Bestimmt, wo Ihr Markenlogo im Verhältnis zu Navigationslinks, Suchfeld und Warenkorb-Symbol platziert ist.
- Zugewiesene Navigationsliste (Welches Menü erscheint): Das konkrete Menü-Asset, das aus der Shopify-Verwaltung in den Header eingebunden wird.
- Hierarchische Struktur und Menütyp (Menütiefe & Präsentation): Wie Unterkategorien auf Desktop-Monitoren aufklappen – als schmale Listen, breite Mehrspalten-Panels oder verdeckte Drawer.
- Mobile Darstellungsregeln (Mobiles Layout & Drawer-Verhalten): Wie sich das Banner an Touchscreens anpasst, einschließlich Logo-Positionierung und seitlich einblendbarer Menüs.
Gemäß offizieller Shopify-Dokumentation ändern Sie das Standard-Hauptmenü für die meisten Themes über die Einstellungen im Header-Bereich des Themes. Die eigentlichen Links, Beschriftungen und hierarchischen Eltern-Kind-Beziehungen werden jedoch unter Content > Menus verwaltet. Dort unterstützt ein Haupteintrag bis zu zwei Ebenen verschachtelter Dropdown-Menüs (insgesamt maximal drei Hierarchiestufen).
Da jedes Theme Layout-Parameter unterschiedlich verarbeitet, dient das Shopify-Referenz-Theme Dawn in diesem Leitfaden als exemplarisches Beispiel. In Dawn sind dies modulare Schema-Einstellungen; Bezeichnungen und Menüoptionen variieren jedoch in anderen Themes. Weiterführende Desktop-Konzepte, Skalierungsfragen auf Laptops und Umbruch-Breakpoints finden Sie in unserer Analyse zu Header-Layout-Modellen und Breakpoints.
Step 1: Change the Logo and Menu Position in the Theme Editor
Die erste sichtbare Ebene Ihres Header-Layouts ist die Ausrichtung zwischen Logo und Navigationszeile. So stellen Sie diese in Shopify ein:
- Melden Sie sich im Shopify-Adminbereich an.
- Navigieren Sie zu Online Store > Themes.
- Klicken Sie beim aktiven Theme oder einem Duplikat auf Customize.
- Wählen Sie in der linken Seitenleiste den Bereich Header.
In Dawn finden Sie die Einstellung Logo position mit vier zentralen Optionen:
- Middle left: Platziert das Logo links auf gleicher Höhe mit den Hauptmenüpunkten. Diese kompakte Inline-Anordnung spart vertikalen Platz.
- Top left: Setzt das Logo oben links an und verschiebt die Navigationslinks in eine eigene Zeile direkt darunter.
- Top center: Zentriert das Logo prominent im oberen Bereich und platziert das Navigationsmenü zentriert darunter. Wenn Sie ein zentriertes Logo mit unterhalb angeordnetem Menü wünschen, ist dies die native Standardeinstellung.
- Middle center: Zentriert das Logo, das Menü steht links davon und die Header-Icons rechts.
Beachten Sie, dass diese Optionen in Dawn so benannt sind; Bezeichnungen und Layout-Möglichkeiten unterscheiden sich in anderen Themes. Manche Drittanbieter-Themes trennen Logo- und Menüausrichtung in separate Felder oder bieten feste Raster. Wenn Ihr Theme die gewünschte Konfiguration nicht bietet, hilft die Entscheidungsmatrix im Abschnitt zu Theme-Grenzen weiter unten.
Step 2: Choose the Header Menu and Build Nested Links
Eine Änderung der Position nützt wenig, wenn der Header mit der falschen Menüliste verknüpft ist oder Unterkategorien nicht ausklappen. In Shopify werden Menüs zentral erstellt und anschließend dem Theme zugewiesen.
So bauen und verknüpfen Sie Ihr Menü:
- Öffnen Sie in der Shopify-Administration Content > Menus (wie in der Shopify-Hilfe beschrieben).
- Klicken Sie auf Main menu (oder erstellen Sie über Create menu eine neue Liste).
- Fügen Sie Ihre Hauptkategorien als Einträge der obersten Ebene hinzu.
- Um Untermenüs anzulegen, ziehen Sie Unterpunkte mit der Maus leicht nach rechts unter den übergeordneten Eintrag, bis eine Einrückung sichtbar wird.
- Klicken Sie auf Save menu.
Laut Shopify-Vorgaben kann der oberste Menüpunkt bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten (maximal drei Ebenen insgesamt). Alle Shopify-Themes sind darauf ausgelegt, verschachtelte Einträge als Dropdown-Menüs des Hauptmenüs darzustellen.
Sobald die Struktur gespeichert ist, kehren Sie zu Online Store > Themes > Customize zurück, öffnen den Header, klicken bei Menu auf Change, wählen die Liste aus und speichern mit Save. Eine detaillierte Anleitung zur fehlerfreien Menüschachtelung finden Sie in unserem Leitfaden zum Thema Untermenü zur Navigation hinzufügen.
Step 3: Pick Dropdown, Mega Menu, or Drawer
Nachdem die Links im Header verknüpft sind, entscheiden Sie, wie Unterkategorien auf Desktop-Bildschirmen erscheinen. In Dawn finden Sie im Header-Bereich die Einstellung Menu type mit drei Optionen (Bezeichnungen unterscheiden sich je nach Theme):
Abbildung 1: Konzeptillustration (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer
| Menütyp (in Dawn) | Visuelle Darstellung auf Desktop | Optimal geeignet für | Wichtige Usability-Aspekte |
|---|---|---|---|
| Dropdown | Schmale vertikale Listen direkt unter dem aktiven Hauptmenüpunkt. | Kleine bis mittlere Kataloge mit überschaubaren, einstufigen Unterkategorien. | Platzsparend und klar; wird unübersichtlich, wenn Nutzer durch tief verschachtelte Ebenen navigieren müssen. |
| Mega menu | Breites Panel über die gesamte Inhaltsbreite mit mehreren strukturierten Linkspalten. | Große Sortimente, Modekataloge mit mehreren Abteilungen oder umfangreiche Kollektionen. | Ermöglicht es Kunden, das Sortiment auf einen Blick zu erfassen, ohne Unterpunkte erraten zu müssen. |
| Drawer | Ersetzt Desktop-Links durch ein Menü-Icon (Hamburger), das ein seitliches Panel öffnet. | Minimalistische Stores, redaktionelle Marken oder bildstarke Portfolio-Auftritte. | Versteckt die Hauptnavigation hinter einem Zusatzklick, was die Auffindbarkeit von Links deutlich verringert. |
Untersuchungen der Nielsen Norman Group belegen, dass Mega-Menüs “eine exzellente Designwahl zur Unterbringung einer großen Anzahl von Optionen” darstellen. Die NN/g betont, dass Mega-Menüs alle Optionen auf einen Blick zeigen, sodass Nutzer visuell entdecken können, anstatt sich Bezeichnungen merken zu müssen.
Dagegen blendet die Auswahl von Drawer in Dawn (gesteuert durch die Prüfung section.settings.menu_type_desktop == 'drawer' in Dawns header.liquid) die horizontalen Links auf Desktop-Bildschirmen hinter einer Menü-Schaltfläche aus. Das wirkt aufgeräumt, hat aber einen echten Nachteil: Die Forschung der NN/g von 2016 fand, dass die Auffindbarkeit fast halbiert wird, wenn die Hauptnavigation einer Website versteckt wird. Hat Ihr Shop ein großes Sortiment, nutzen Sie den Drawer nur auf Mobilgeräten und auf dem Desktop eine offene Menüstruktur. Für ausgewogene Linkspalten, Überschriften und visuelle Kacheln lesen Sie unseren Leitfaden zu Best Practices für Mega-Menüs.
Show Menu Links Directly in the Header Instead of a Dropdown
Eine häufige Frage, unter anderem in einem Shopify-Community-Thread zum Sense-Theme, lautet: Wie zeige ich die Links der obersten Ebene direkt im Header an, ohne Dropdown?
In Shopify werden Dropdowns nicht über einen Theme-Schalter gesteuert, sondern über die Menühierarchie. Die Shopify-Hilfe dokumentiert ausdrücklich: Alle Themes zeigen verschachtelte Einträge als Dropdowns an. Sobald ein Eintrag untergeordnete Links besitzt, rendert das Theme automatisch ein Ausklappmenü.
Um Links flach nebeneinander auf der Leiste anzuzeigen:
- Öffnen Sie in Shopify Content > Menus.
- Wählen Sie das aktive Header-Menü aus.
- Prüfen Sie die Liste. Falls Unterpunkte eingerückt sind, ziehen Sie diese nach links, bis sie auf oberster Ebene stehen.
- Stellen Sie sicher, dass alle Links auf der Hauptebene liegen.
- Klicken Sie auf Save menu.
Im Shop werden die Links nun ohne Dropdowns nebeneinander in der horizontalen Leiste gerendert.
Beachten Sie die Bildschirmbreite. Die NN/g rät: Hat eine Website höchstens 4 Navigationslinks auf oberster Ebene, sollten sie als sichtbare Links angezeigt werden. Bei vielen Links der obersten Ebene kann die Zeile in zwei Zeilen umbrechen oder auf schmaleren Laptop-Bildschirmen das Logo bedrängen – prüfen Sie daher mehrere Breiten in der Vorschau. Braucht Ihr Sortiment viele Ziele, gruppieren Sie sie unter Oberbegriffen, etwa mit einem Mega-Menü, statt die Hauptleiste zu überladen.
Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar
Ein Header-Menü-Layout, das auf dem Desktop ausgewogen wirkt, kann auf dem Smartphone leicht aus dem Lot geraten. Da der Platz auf Mobilgeräten begrenzt ist, behandeln Themes die mobile Navigation mit eigenen responsiven Layouts.
Abbildung 2: Konzeptillustration (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar
In Dawns Header-Einstellungen steht Ihnen die Option Mobile logo position zur Verfügung:
- Center: Zentriert das Logo in der mobilen Header-Leiste.
- Left: Richtet das Logo links in der mobilen Header-Leiste aus.
Bezeichnungen unterscheiden sich je nach Theme. In Drittanbieter-Themes wie Stiletto nutzt das mobile Menü beispielsweise Einstellungen im Header-Bereich. In vielen Themes werden die mobilen Navigationslinks in ein seitliches Drawer-Panel eingeklappt, das per Tipp auf das Hamburger-Icon geöffnet wird.
Sich ganz auf einen versteckten Hamburger-Drawer zu verlassen, hat jedoch seinen Preis. Die Forschung der Nielsen Norman Group von 2016 fand, dass die Auffindbarkeit fast halbiert wird, wenn die Hauptnavigation einer Website versteckt wird.
Versteckte Drawer bleiben für große Sortimente nützlich, aber Sie können einige wichtige Seiten auch dauerhaft über eine Tab-Leiste am unteren Rand (z. B. Home, Shop, Suche und Warenkorb) in Daumenreichweite sichtbar halten und tiefere Kategorien dem Drawer überlassen. Für getrennte Linkstrukturen je Bildschirmgröße lesen Sie unsere Anleitung zum Einrichten von separate Desktop- und Mobilmenüs.
When Your Theme Runs Out of Options: Code Edits vs a Menu App
Irgendwann stößt jeder Händler an die Grenzen des Theme-Customizers – sei es der Wunsch nach fünf statt vier Spalten im Mega-Menü, einem Split-Layout links und rechts vom zentrierten Logo oder Werbebannern im mobilen Drawer. An diesem Punkt stehen Sie vor der Entscheidung: Theme-Code manuell anpassen oder eine spezialisierte Menü-App nutzen.
Before you edit code: duplicate the theme
Wenn Sie Änderungen an Theme-Dateien (wie sections/header.liquid oder Stylesheets) vornehmen, arbeiten Sie niemals direkt am Live-Theme. Die Shopify-Dokumentation rät dringend dazu, eine Sicherungskopie anzulegen, damit Änderungen bei Fehlern verworfen werden können.
So duplizieren Sie Ihr Theme sicher:
- Gehen Sie im Shopify-Adminbereich zu Online Store > Themes.
- Suchen Sie Ihr aktuelles Theme, öffnen Sie dessen Aktionsmenü und wählen Sie Duplicate.
- Benennen Sie die Kopie eindeutig als Testversion für Code-Anpassungen.
- Führen Sie alle Tests ausschließlich in dieser Kopie durch, bevor Sie sie veröffentlichen.
The hidden cost of custom theme edits
Direkte Code-Änderungen verursachen laufenden Wartungsaufwand. Die Shopify-Dokumentation warnt, dass Ihre Code-Änderungen beim Aktualisieren eines Themes in der aktualisierten Kopie entfernt werden können. Wenn Sie header.liquid umschreiben, um Ausrichtung, CSS-Media-Queries oder Drawer-Animationen zu ändern, prüfen Sie diese Änderungen nach jedem Theme-Update und wenden Sie sie erneut an.
Gehen Ihre Layout-Wünsche über die Standardeinstellungen hinaus, können Sie ein Theme für komplexere Navigation in Betracht ziehen oder eine App, die neben Ihrem Theme arbeitet.
Common Header Menu Problems and Fixes
Beim Anpassen des Header-Layouts können kleine Einstellungsfehler dazu führen, dass Links verschwinden. Nutzen Sie diese Übersicht zur Fehlerbehebung:
| Problem | Wahrscheinliche Ursache | Empfohlene Lösung |
|---|---|---|
| Menü erscheint nicht im Header | Dem Header-Bereich ist keine aktive Menüliste zugewiesen. | Öffnen Sie Themes > Customize > Header. Prüfen Sie das Feld Menu. Weisen Sie über Change das gewünschte Menü zu und speichern Sie. |
| Dropdown-Menüs klappen nicht auf | Links sind im Adminbereich auf oberster Ebene angeordnet statt eingerückt. | Öffnen Sie Content > Menus, ziehen Sie Unterpunkte unter den Haupteintrag nach rechts, bis sie eingerückt sind, und speichern Sie. |
| Gewünschte Logo-Ausrichtung fehlt | Sie nutzen ein Drittanbieter-Theme mit anderer Schema-Struktur als Dawn. | Prüfen Sie das Handbuch Ihres Themes nach alternativen Layout-Feldern. (Bezeichnungen variieren je nach Theme). |
| Mobiles Logo ist abgeschnitten oder verschoben | Die Logo-Ausrichtung kollidiert mit Abständen der Originalgrafik. | Prüfen Sie unter Customize > Header die Option Mobile logo position und schneiden Sie die Bilddatei passgenau ohne weiße Ränder zu. |
| Header verdeckt Seiteninhalte beim Scrollen | Einstellungen für fixierte Header kollidieren mit individuellen Stylesheets. | Überprüfen Sie die Sticky-Header-Optionen Ihres Themes oder nutzen Sie unsere Anleitung zur Einrichtung fixierter Header- und Footer-Menüs. |
Trade-offs: When Not to Change Your Header Layout
Ein Umbau des Header-Layouts ist nicht in jedem Fall sinnvoll. Beachten Sie vor einer Umstellung folgende praktische Abwägungen:
- Kleine Sortimente brauchen kein Mega-Menü: Hat Ihr Shop nur wenige einfache Kategorien, bietet ein breites Mega-Menü-Panel eventuell mehr Platz, als nötig ist. Ein einspaltiges Dropdown oder eine flache Linkreihe reicht oft aus.
- Desktop-Drawer verringern die Sichtbarkeit der Navigation: Drawer auf dem Desktop wirkt aufgeräumt, aber die NN/g-Forschung von 2016 fand, dass das Verstecken der Hauptnavigation die Auffindbarkeit fast halbiert. Reservieren Sie ihn für Shops, in denen die Entdeckung über Storytelling auf der Seite läuft.
- Eigene Liquid-Änderungen erzeugen Update-Aufwand: Laut Shopify-Dokumentation können Änderungen an
header.liquidoder eigenes CSS beim Theme-Update verloren gehen. Wenn niemand die Änderungen über Versionen hinweg pflegen kann, nutzen Sie lieber die Standard-Theme-Einstellungen oder eine App. - Zusätzliche Apps bedeuten Administrationsaufwand: Jedes externe Tool bringt ein weiteres Dashboard mit sich. Nutzen Sie Erweiterungen nur dann, wenn native Theme-Mittel nicht ausreichen.
Where Navi+ Fits
Wenn die Header-Optionen Ihres Themes an ihre Grenzen stoßen, ist Navi+ eine Möglichkeit, Navigationsfunktionen neben Ihrem Theme zu ergänzen.
Sie erstellen das Menü in der Navi+ App und aktivieren es als App-Embed im Theme-Editor. Das Menü wird im Browser neben dem eigenen Header Ihres Themes dargestellt, sodass Sie header.liquid nicht bearbeiten müssen:
- Desktop Mega Menu: Zeigt ein umfangreiches Dropdown mit Spalten, Bildern und hervorgehobenen Links.
- Mobile Menu: Ein einblendbares mobiles Menü, das Ihre gesamte Navigation zeigt, ohne die Seite zu verlassen.
- Tab Bar: Eine feste Tab-Leiste am unteren Rand für Mobilgeräte, die einige wichtige Ziele in Daumenreichweite hält.
Auch Navi+ Menüs gehen bis zu drei Ebenen tief. Welcher Menütyp zu Ihrem Sortiment passt, erfahren Sie in unserem Leitfaden: Auswahl des passenden Menütyps.
If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.
Action Checklist
Nutzen Sie diese 8-Punkte-Checkliste zur Planung und Überprüfung Ihres Header-Menü-Layouts:
- Theme duplizieren: Erstellen Sie unter Online Store > Themes ein Backup vor grundlegenden Layout-Änderungen.
- Logo-Ausrichtung konfigurieren: Wählen Sie unter Customize > Header die passende Logo position (z. B. Top center oder Middle left in Dawn; Bezeichnungen variieren je nach Theme).
- Menühierarchie strukturieren: Bauen Sie Ihre Linkliste unter Content > Menus mit sauber eingerückten Unterpunkten auf (maximal 2 verschachtelte Ebenen unter Haupteinträgen).
- Menü im Header zuweisen: Stellen Sie unter Header > Menu sicher, dass das gewünschte Menü verknüpft ist.
- Desktop-Menütyp festlegen: Wählen Sie je nach Kataloggröße zwischen Dropdown, Mega menu oder Drawer.
- Mobile Ausrichtung prüfen: Kontrollieren Sie das Header-Layout auf Smartphones und passen Sie Mobile logo position (Center oder Left) an.
- Touch-Ergonomie testen: Überprüfen Sie den mobilen Drawer und prüfen Sie, ob eine untere Tableiste den Zugriff auf Hauptseiten erleichtert.
- Responsive Breakpoints prüfen: Testen Sie Darstellung und Zeilenumbrüche auf Desktop-, Laptop- und Tablet-Breiten.
FAQ
How many levels can a Shopify header menu have?
Ein Haupteintrag in einem Shopify-Menü kann bis zu zwei verschachtelte Dropdown-Ebenen darunter haben, was eine Gesamttiefe von maximal drei Ebenen ergibt.
How do I make a dropdown in the Shopify header?
Gehen Sie in der Shopify-Administration auf Content > Menus, wählen Sie das Menü aus, ziehen Sie Unterpunkte mit der Maus nach rechts unter den Haupteintrag, bis sie einrücken, und speichern Sie.
How do I put the logo in the center with the menu below?
Wählen Sie im Dawn-Theme unter Header bei Logo position die Option Top center. Dadurch wird das Logo zentriert und das Menü direkt darunter platziert. (Bezeichnungen unterscheiden sich in anderen Themes).
Can I show menu links in the header instead of a dropdown?
Ja. Shopify-Themes zeigen Einträge mit Unterpunkten automatisch als Dropdown an. Um Links flach in der Leiste anzuzeigen, verschieben Sie alle Einträge in Content > Menus auf die oberste Ebene.
Can I change the menu layout only on mobile?
Ja. Theme Dawn bietet im Header-Bereich die separate Einstellung Mobile logo position (Center oder Left). Das Mobilmenü nutzt meist die gleiche Linkliste im Drawer, manche Themes bieten jedoch eigene Mobileinstellungen im Header.
Should I edit header.liquid?
Bearbeiten Sie header.liquid nur, nachdem Sie eine Sicherungskopie Ihres Themes erstellt haben. Beachten Sie, dass Ihre Code-Änderungen beim Update auf eine neuere Theme-Version entfernt werden können.
Sources
- Shopify Help Center: Drop-down menus — Dokumentation zu Menüebenen, Header-Zuweisungen und Menüverwaltung.
- Shopify Help Center: Duplicating themes — Offizielle Richtlinie zur Erstellung von Theme-Backups vor Code-Änderungen.
- Shopify Help Center: Editing theme code — Hinweise zum Verlust manueller Code-Anpassungen bei Theme-Aktualisierungen.
- Shopify Dawn GitHub Repository: en.default.schema.json — Schema-Definitionen für Logo position, Menu type und Mobile logo position.
- Shopify Dawn GitHub Repository: sections/header.liquid — Quellcode zur Steuerung von Desktop-Menütypen und Drawer-Logik.
- Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Usability-Studie zu Vorteilen mehrspaltiger Mega-Menüs bei großen Auswahllisten.
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Untersuchung zum Verlust von fast der Hälfte der Auffindbarkeit bei verdeckter Menüführung.
- Fluorescent Theme Documentation: Stiletto Header — Dokumentationsbeispiel für Header-Einstellungen in Drittanbieter-Themes.
- Shopify Community: How to change header-menu layout Sense theme — Praxisdiskussion zur flachen Darstellung von Menüpunkten ohne Dropdowns.
Themen entdecken
Dieser Leitfaden verlinkt auf gezielte Artikel — vertiefen Sie jedes Thema.