So passen Sie ein Navigationsmenü an Ihr Shopify-Theme an (Farben, Schriftarten, mobiles Menü)

Ein Navigationsmenü sollte niemals wie ein nachträglich aufgesetztes Element wirken. Wenn Kundinnen und Kunden durch Ihre Kollektionen stöbern, sollten Typografie, Farben, Abstände und Eckenradien der Menülinks nahtlos mit dem gesamten Storefront verschmelzen. Dennoch stellen viele Shopify-Händler fest, dass ihre Menüleiste isoliert wirkt—mit generischen Systemschriften, unpassenden Hintergrundfarben, harten Kanten oder einem völlig unformatierten mobilen Menü-Drawer.

Das Kernprinzip ist einfach: Ein Menü passt zu Ihrem Theme, wenn es genau die Werte wiederverwendet, die Ihr Theme bereits nutzt. Anstatt neue Farbcodes zu erfinden oder beliebige Schriftarten auszuwählen, erfassen Sie zunächst die Design-Tokens Ihres Themes auf einem Referenzblatt und wenden dieselben Werte auf die Desktop-Kopfzeile, den mobilen Drawer und Menüs von Drittanbieter-Apps an.

Quick Answer: How to Match a Navigation Menu to Your Store Theme

Um ein Navigationsmenü an Ihr Shop-Theme anzupassen, übernehmen Sie die Werte, die Ihr Theme bereits nutzt: Farbschema, Schriften, Eckenradius und Abstände. Wenden Sie sie zuerst über die Header-Einstellungen an, schließen Sie Lücken dann mit kurzem CSS in einem duplizierten Theme und prüfen Sie auch den mobilen Drawer.

Befolgen Sie diese fünf praxisorientierten Schritte:

1. Design-Tokens des Themes auslesen: Überprüfen Sie in den Theme-Einstellungen die aktiven Farbschemata, Schriftfamilien und Eckenradien.
2. Vorhandene Header-Einstellungen nutzen: Wählen Sie Ihr Menü aus, weisen Sie das passende Farbschema zu und testen Sie integrierte Layoutoptionen.
3. Lücken mit CSS und Theme-Variablen schließen: Fügen Sie im Header-Bereich kurze CSS-Regeln ein, die Theme-Variablen statt statischer Werte referenzieren.
4. Den mobilen Drawer anpassen: Stimmen Sie Hintergrund, Schriftarten, Trennlinien und das Hamburger-Symbol des mobilen Menüs ab.
5. App-Menüs synchronisieren: Übertragen Sie die Werte Ihres Referenzblatts in die Designeinstellungen von Drittanbieter-Apps.

Beachten Sie, dass Änderungen in den globalen Theme-Einstellungen für Ihren gesamten Online-Shop gelten. Wenn Sie ausschließlich das Navigationsmenü anpassen möchten, ist abschnittsbezogenes CSS oder eine spezialisierte Menü-App erforderlich.

What “Matching Your Theme” Means: The Theme Match Sheet

Visuelle Kohärenz lässt einen Shop fertig wirken. Unser Leitfaden zu Menüdesign und Markenidentität behandelt die Markenprinzipien dahinter; der Leitfaden, den Sie gerade lesen, ist der praktische, technische Teil. Ein an das Theme angepasstes Menü funktioniert nicht nur zuverlässig, sondern wirkt wie ein natürlicher Bestandteil des Storefronts.

Um diese Harmonie zielgerichtet zu erreichen, erstellen Sie ein Theme-Match-Sheet. Diese Referenztabelle erfasst die sieben grundlegenden Design-Tokens Ihres Themes und zeigt, wo Sie sie finden und wie Sie sie auf Ihr Menü anwenden:

Konzentrieren Sie sich beim Ausfüllen und Anwenden auf vier Kernaktionen:

• Copy theme colors: Übernehmen Sie das exakte Farbschema des Header-Bereichs, anstatt willkürliche Farbtöne zu wählen.
• Reuse theme fonts: Wenden Sie die bestehende Schriftfamilie Ihres Storefronts direkt auf Ihre Menü-Links an.
• Match corner radius: Stellen Sie sicher, dass Dropdown-Flächen und Menü-Buttons denselben Eckenradius wie Ihre Shop-Buttons aufweisen.
• Mobile menu match: Übertragen Sie Farbschema, Schriftart und Trennlinien auf den mobilen Drawer, damit Smartphone-Nutzer dasselbe Design erleben.

Step 1: Read Your Theme’s Design Tokens

Ein „Design-Token“ ist eine benannte Gestaltungsentscheidung—ein gespeicherter Wert für eine bestimmte Farbe, Schriftart, einen Abstand oder Radius. Indem Sie diese Werte direkt aus Ihrem Shopify-Theme ablesen, vermeiden Sie visuelle Abweichungen.

Colors and color schemes

Gehen Sie im Shopify-Adminbereich zu Onlineshop > Themes, klicken Sie auf Anpassen und öffnen Sie die Theme-Einstellungen. Wählen Sie das Menü Farben.

Shopify-Themes verwalten Paletten über ein Color scheme—eine vordefinierte Kombination aus Hintergrund-, Text- und Schaltflächenfarben. Im Shopify-Theme-Editor können Sie bis zu 21 Farbschemata verwalten. Ermitteln Sie, welches Farbschema Ihrem Header-Bereich zugewiesen ist, und notieren Sie die genauen Farbwerte.

Fonts and text size

Öffnen Sie anschließend Theme-Einstellungen > Typografie. Hier sehen Sie die aktiven Schriftfamilien für Überschriften und Fließtext sowie deren Schriftschnitte.

Notieren Sie diese Angaben. Die Shopify-Hilfe erklärt, dass Änderungen in den Theme-Einstellungen für Ihren gesamten Onlineshop gelten. Wenn Sie hier Schriften anpassen, ändern sich auch alle Überschriften und Absätze im Shop. Außerdem empfiehlt die Shopify-Dokumentation, Systemschriften für Ihre Typografie in Betracht zu ziehen.

Corner radius and spacing

Sehen Sie sich die Einstellungen für Schaltflächen, Karten und Eingabefelder in den Theme-Einstellungen an. Viele Themes bieten eine Einstellung für den Eckenradius, oft als Button radius bezeichnet; die genaue Bezeichnung variiert je nach Theme.

Prüfen Sie, ob Ihre Schaltflächen kantige Ecken, leichte Rundungen oder eine vollständig abgerundete Pillenform haben. Wenn Menü-Dropdowns und Badges dieselbe Kurvenform aufgreifen, wirkt die Navigation stimmig. Prüfen Sie zudem die Abstände um Schaltflächen und Abschnitte, um zu entscheiden, wie kompakt oder großzügig Menülinks gesetzt werden sollten.

Reading CSS variables in your browser

Um festzustellen, wie Ihr Theme diese Gestaltungsentscheidungen im Code abbildet, nutzen Sie die Browser-Entwicklertools:

1. Öffnen Sie Ihren Storefront im Browser (Chrome, Firefox oder Safari).
2. Klicken Sie mit der rechten Maustaste auf den Header und wählen Sie Untersuchen.
3. Wählen Sie das <html>- oder <body>-Element aus und prüfen Sie den Bereich Styles.

Moderne Themes wie Dawn definieren Einstellungen direkt als CSS-Variablen in theme.liquid. Dawn nutzt dafür Variablen wie:

• --font-body-family: spiegelt die gewählte Fließtextschrift wider.
• --font-heading-family: entspricht der primären Schrift für Überschriften.
• --color-foreground: enthält die aktive Textfarbe, gespeichert als rote, grüne und blaue Zahlenwerte, und wird daher als rgb(var(--color-foreground)) verwendet.
• --buttons-radius: übernimmt den Eckenradius für Buttons aus den Theme-Einstellungen.

Durch das Erfassen von Color scheme, Typography und Button radius können Sie auf das Designsystem des Themes aufbauen, anstatt feste Werte manuell zu codieren. Da Variablennamen je nach Theme variieren, prüfen Sie Ihre exakten Selektoren immer in den DevTools.

Concept illustration: Theme-Einstellungen neben einem Referenzblatt zur Übernahme von Farbschema, Typografie und Eckenradius in das Menü.

Step 2: Use the Header Settings Your Theme Already Has

Bevor Sie eigenen Programmcode schreiben oder zusätzliche Apps installieren, nutzen Sie alle nativen Funktionen des Shopify-Theme-Editors.

Connecting your menu and color scheme

1. Öffnen Sie im Theme-Editor den Abschnitt Header.
2. Suchen Sie die Menü-Einstellung (die Bezeichnung variiert je nach Theme) und stellen Sie sicher, dass Ihre gewünschte Navigationsliste verknüpft ist. Menüs werden unter Onlineshop > Navigation erstellt, wo Links bis zu drei Ebenen tief verschachtelt werden können.
3. Suchen Sie im Header-Bereich nach einer Farbschema-Einstellung (die Bezeichnung variiert je nach Theme) und wählen Sie das zuvor notierte Schema aus.
4. Prüfen Sie die Vorschau: Je nach Theme können Kopfzeile und Menü nun die Hintergrund- und Textfarben dieses Schemas übernehmen.

Evaluating header menu layouts

Shopify-Themes bieten verschiedene Darstellungsformen für Navigationsleisten. Laut Shopify-Dokumentation hängen Position und Darstellung von Haupt- und Dropdown-Menüs vom jeweiligen Theme ab, wobei ein Haupteintrag bis zu zwei verschachtelte Dropdown-Ebenen enthalten kann.

Je nach Theme stehen Ihnen folgende Optionen zur Verfügung:

• Menütyp: Standard-Dropdown, mehrspaltiges Mega-Menü oder seitlicher Drawer.
• Desktop-Position: Oben links, zentriert über dem Logo oder neben der Suchleiste.
• Fixierter Header (Sticky): Die Menüleiste bleibt beim Scrollen am oberen Bildschirmrand sichtbar.

Native customizer boundaries

Native Einstellungen sind unkompliziert, haben jedoch klare Grenzen:

• Bezeichnungen und Schieberegler unterscheiden sich von Theme zu Theme; einige Themes erlauben Linkabstände, andere bieten hierfür keine Regler.
• Da Typografie-Optionen global gelten, können Sie die Schriftart der Menülinks nicht isoliert anpassen, ohne den gesamten Shop zu verändern.

Wenn diese Standardoptionen nicht ausreichen, um Ihr Theme-Match-Sheet umzusetzen, folgt der Einsatz von gezieltem Custom CSS.

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

Mit benutzerdefiniertem CSS können Sie das Erscheinungsbild Ihres Menüs verfeinern, ohne Core-Dateien des Themes verändern zu müssen. Saubere Regeln erleichtern spätere Anpassungen erheblich.

Duplicate the theme first

Erstellen Sie vor dem Einfügen von CSS immer eine Sicherheitskopie Ihres Themes.

Die Shopify-Hilfe zum Duplizieren von Themes empfiehlt, eine Sicherungskopie anzulegen, um Änderungen bei Bedarf verwerfen und von vorne beginnen zu können. Öffnen Sie im Shopify-Adminbereich unter Onlineshop > Themes das Aktionsmenü neben Ihrem aktiven Theme und wählen Sie Duplizieren. Nehmen Sie alle Anpassungen zunächst an dieser Kopie vor.

Where custom CSS goes and its limits

Shopify bietet im Theme-Editor zwei Stellen für benutzerdefiniertes CSS:

1. Theme-weites CSS: Unter Theme-Einstellungen > Benutzerdefiniertes CSS für shopweite Anpassungen.
2. Abschnitts-CSS: Am Ende des Eigenschaftenbereichs des Abschnitts unter Custom CSS (zum Beispiel im Header-Abschnitt).

Beachten Sie die technischen Begrenzungen von Shopify:

• CSS-Regeln für das gesamte Theme sind auf 1500 Zeichen beschränkt.
• CSS-Regeln für einen bestimmten Abschnitt sind auf 500 Zeichen limitiert.
• Wenn Sie CSS zu einem Abschnitt hinzufügen, beschränkt sich die Wirkung automatisch auf diesen Bereich.
• Theme-weites CSS gilt nicht für die Checkout-Seite.

Da sich das Navigationsmenü im Header befindet, ist das Eintragen kompakter Regeln im CSS-Feld des Header-Abschnitts die sauberste Methode.

Use var() instead of hard-coded values

Vermeiden Sie es, statische Farbcodes oder Schriftnamen fest in das CSS zu schreiben. Wenn Sie später Ihr Farbschema überarbeiten, führt festes CSS zu Darstellungsfehlern. Greifen Sie stattdessen mithilfe der var()-Funktion auf CSS-Variablen des Themes zu, wie von MDN dokumentiert:

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

(Hinweis: Klassen- und Variablennamen folgen dem Theme Dawn; prüfen Sie Ihre Selektoren in den DevTools).

Durch var(--font-heading-family) und rgb(var(--color-foreground)) folgt das Menü Ihrem Theme, wenn Sie Farben oder Schriften in den Theme-Einstellungen ändern. Um Änderungen rückgängig zu machen, löschen Sie einfach den CSS-Code oder aktivieren Sie Ihr dupliziertes Theme.

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

Ein häufiger Fehler besteht darin, den Desktop-Header sorgfältig abzustimmen, während das mobile Menü unformatiert oder uneinheitlich bleibt.

Why mobile drawers diverge

In vielen Shopify-Themes teilen sich Desktop- und Mobilmenü nicht denselben HTML-Aufbau. Desktop-Links liegen oft horizontal im Header, während mobile Links in einem separaten Seiten-Drawer gerendert werden.

Da der mobile Drawer oft ein eigenständiges Element ist, greifen CSS-Regeln für Desktop-Links dort möglicherweise nicht. Hinzu kommt: Die Farbe des Hamburger-Symbols wird häufig von der Textfarbe des Headers geerbt, daher braucht der Drawer selbst unter Umständen eigenen Hintergrund, eigene Textfarbe und eigene Trennlinien.

Aligning drawer styling

Stellen Sie sicher, dass Ihr mobiler Drawer folgende Kriterien erfüllt:

• Same font family: Die Links im Drawer müssen dieselbe Schriftart wie der Desktop-Header nutzen.
• Same text color: Kategorienamen und Unterlinks müssen der Textfarbe des Header-Farbschemas folgen.
• Same divider style: Horizontale Trennlinien zwischen Links sollten den feinen Rahmenfarben Ihrer Produktkarten entsprechen.

Studien der Nielsen Norman Group (Pernice & Budiu, 2016) belegen, dass versteckte Navigation (wie Hamburger-Menüs) schwerer auffindbar ist als sichtbare Navigation. Da mobile Menüs einen Klick erfordern, müssen alle sichtbaren Punkte—Hamburger-Symbol, Drawer-Fläche und Schriftzüge—sofort klar erkennbar und markenkonform sein.

Detaillierte Empfehlungen für mobile Menüs finden Sie in unserem Leitfaden über Best Practices für mobile Drawer-Menüs. Testen Sie die mobile Navigation stets auf einem echten Smartphone.

Concept illustration: Desktop-Kopfzeile und mobiles Drawer-Menü nutzen dieselbe Schriftfamilie, Textfarbe und Trennlinienstil aus dem Theme.

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

Wenn einfache Dropdowns nicht mehr ausreichen, ergänzen viele Händler Navigations-Apps für fixierte mobile Tab-Leisten, mehrspaltige Mega-Menüs oder schwebende Buttons.

Da App-Menüs getrennt von Ihrem Theme in den Shop eingebunden werden, folgen sie den Farb- und Schrifteinstellungen Ihres Themes möglicherweise nicht automatisch. Ohne Konfiguration können sie anders aussehen als der Rest Ihres Shops.

Applying your theme match sheet to app settings

Nutzen Sie Ihr Theme-Match-Sheet, um Werte in das Dashboard der App zu übertragen:

1. Typografie: Wählen Sie die Schriftart und Stärke aus den Theme-Einstellungen für Überschriften oder Fließtext.
2. Farben: Tragen Sie die Hex-Codes aus Ihrem Header-Farbschema für Hintergründe, Texte und Aktiv-Zustände ein.
3. Eckenradius: Passen Sie Container- und Button-Rundungen an den Button-Radius des Themes an.
4. Trennlinien: Stimmen Sie Rahmenstärken und Farben auf die Kanten Ihrer Produktkarten ab.

Keeping custom CSS inside the app

Wenn für ein App-Menü CSS-Anpassungen nötig sind, tragen Sie diese direkt im CSS-Eingabefeld der App ein statt in Theme-Dateien.

Speichert die App ihr CSS außerhalb Ihrer Theme-Dateien, bleibt dieses Styling bei Theme-Updates oder einem Theme-Wechsel erhalten. Prüfen Sie, wie Ihre App das handhabt, bevor Sie sich darauf verlassen.

Wenn Sie zum ersten Mal ein Menü über eine App einrichten, lesen Sie unsere Anleitung über erste Schritte mit einer Menü-Builder-App.

Common Mismatches and How to Fix Them

Nutzen Sie diese Diagnosetabelle, um häufige optische Abweichungen rasch zu identifizieren und zu beheben:

Trade-offs: When Not to Restyle the Menu

Optische Anpassungen verbessern den Eindruck, sind jedoch nicht in jeder Situation der richtige Schritt:

Strukturelle Probleme im Produktkatalog

Wenn Kundschaft Produkte nicht findet, weil Menüstrukturen unübersichtlich oder überfüllt sind, helfen neue Farben oder Schriften nicht weiter. Design kann eine mangelhafte Informationsarchitektur nicht ausgleichen. Beachten Sie die strukturellen Grenzen von Shopify-Theme-Menüs, um festzustellen, ob eine Neuordnung der Kollektionen erforderlich ist.

Wartungsaufwand und Zeichenlimits von Theme-CSS

Benutzerdefiniertes CSS im Theme verursacht fortlaufenden Wartungsaufwand. Da shopweites CSS auf 1500 Zeichen und Abschnitts-CSS auf 500 Zeichen limitiert ist, stoßen komplexe Regeln schnell an Grenzen. Bei jedem Versions-Update des Themes muss eingebettetes CSS manuell geprüft und migriert werden.

Nebenwirkungen auf die Gesamttypografie

Wer Menüschriften über die globalen Typografie-Einstellungen ändert, beeinflusst gleichzeitig alle Produktkarten, Kollektionstitel und Absätze. Die Shopify-Dokumentation empfiehlt, Systemschriften in Betracht zu ziehen; eine zusätzliche Schrift nur für Menülinks sollten Sie sich daher gut überlegen.

Where Navi+ Fits

Wenn Ihr Shopify-Theme erweiterte Navigationsformen—wie eine mobile Tab-Leiste, mehrspaltige Mega-Menüs, spezialisierte mobile Drawer, Icon-Menüs oder schwebende Buttons—nicht unterstützt, bietet Navi+ entsprechende Werkzeuge, um sie zu erstellen.

Im Navi+-Dashboard ermöglicht der Tab Design die visuelle Konfiguration von Hintergrundfarben, Typografie (Schriftfamilie und -größe) sowie Icons und Bildern. Händler können Werte aus dem Theme-Match-Sheet direkt eintragen.

Zusätzlich bietet Navi+ ein integriertes CSS-Feld, in dem Regeln automatisch menüspezifisch präfixiert und außerhalb von Theme-Dateien gespeichert werden. Theme-Updates oder ein Theme-Wechsel haben daher keine Auswirkung auf Ihre Navi+-Menüs.

Beachten Sie die technischen Rahmenbedingungen:

• Navi+-Menüs unterstützen hierarchische Navigation bis zu 3 Ebenen.
• Der Design-Tab bietet native Schieberegler für die ersten 2 Ebenen.
• Spezifische Schrift- oder Icon-Größen für die Ebenen 2 und 3 erfordern kleine CSS-Regeln im app-eigenen CSS-Feld.

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

Prüfen Sie diese 10 Punkte vor dem Livegang:

• Theme dupliziert: Sicherheitskopie des aktiven Themes erstellt, um Änderungen jederzeit verwerfen zu können.
• Theme-Match-Sheet ausgefüllt: Aktive Farbschemata, Schriftfamilien, Gewichte und Eckenradien vollständig notiert.
• Header-Farbschema zugewiesen: Sichergestellt, dass der Header-Bereich das vorgesehene Farbschema nutzt.
• Schriftfamilien synchronisiert: Bestätigt, dass Menü-Links die im Theme definierte Überschriften- oder Fließtextschrift nutzen.
• WCAG-Kontrast überprüft: Kontrastverhältnis von mindestens 4.5:1 für Standardtext und 3:1 für großen Text verifiziert.
• Eckenradien abgeglichen: Dropdown-Flächen, Badges und Menü-Buttons an den Button-Radius des Themes angepasst.
• Hover- und Fokus-Zustände kontrolliert: Visuelle Rückmeldung bei Mauszeigerkontakt und Tastatur-Fokusringe überprüft.
• Mobilen Drawer auf echtem Smartphone getestet: Hamburger-Symbol, Hintergrund, Linien und Touch-Reaktion geprüft.
• App-Menüs synchronisiert: Theme-Tokens in mobile Tab-Leisten, Mega-Menüs oder Drawer von Drittanbieter-Apps übertragen.
• CSS schlank gehalten: Kurze CSS-Regeln (unter 500/1500 Zeichen) verfasst und Variablen mit var() referenziert.

FAQ

Can I change only the menu font without changing my whole store’s font?

Theme-Typografie-Einstellungen gelten für den gesamten Shop. Um ausschließlich die Menüschrift anzupassen, nutzen Sie abschnittsbezogenes CSS im Header-Bereich des Theme-Editors oder konfigurieren Sie die Schriftart direkt in einer Menü-App.

Where do I add custom CSS in Shopify?

Im Theme-Editor können Sie benutzerdefiniertes CSS für das gesamte Theme (maximal 1500 Zeichen) oder für einzelne Abschnitte wie den Header (maximal 500 Zeichen) einfügen. Abschnitts-CSS wirkt nur in diesem Bereich; shopweites CSS gilt nicht für den Checkout.

Why does my mobile menu look different from my desktop menu?

Themes erstellen den mobilen Drawer als separates HTML-Element, sodass Desktop-Styles ihn oft nicht erreichen. Das Hamburger-Symbol übernimmt oft die Textfarbe des Headers, der Drawer-Hintergrund und dessen Typografie müssen jedoch separat gestaltet werden.

How do I keep my menu matching after I change theme colors later?

Verwenden Sie CSS-Variablen des Themes mit der var()-Funktion (wie var(--font-heading-family) oder var(--font-body-family)) statt fester Hex-Werte. Bei späteren Anpassungen im Theme folgt das Menü automatisch.

What contrast should menu text have?

Gemäß den Web Content Accessibility Guidelines (WCAG 2.1) muss Menütext ein Kontrastverhältnis von mindestens 4.5:1 bei Standardtext und mindestens 3:1 bei großem Text gegenüber dem Hintergrund aufweisen.

Should I edit CSS or use an app?

Nutzen Sie zunächst die integrierten Header-Einstellungen und kurzes CSS für kleine Anpassungen. Benötigen Sie Menütypen, die das Theme nicht bietet—wie eine mobile Tab-Leiste oder Mega-Menüs—nutzen Sie eine Menü-App und prüfen Sie, ob sie ihre Styles außerhalb Ihrer Theme-Dateien speichert, damit sie Theme-Wechsel überstehen.

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify