Du hast gerade Dawn (oder Refresh oder Sense) installiert, und dein Menü funktioniert. Kategorien werden angezeigt, das Hamburger-Symbol öffnet sich auf dem Handy, und der Warenkorb-Icon sitzt in der oberen rechten Ecke. Du denkst: „Reicht aus, ich kümmere mich um Produktfotos.”
Dieser Instinkt wird dich Conversions kosten. Nicht, weil diese Themes schlecht sind – sie sind wirklich gut gebaut. Aber „funktioniert” und „funktioniert gut zum Verkaufen” sind zwei verschiedene Dinge. Jedes Standard-Theme macht spezifische Design-Kompromisse, und manche davon schaden neuen Shops aktiv.
Dieser Guide geht durch die drei beliebtesten kostenlosen Shopify-Themes – Dawn, Refresh und Sense – und zeigt dir exakt, welche Menü-Features gut genug sind zum Beibehalten, welche kleine Anpassungen brauchen, und welche du sofort ändern solltest.
- Dawns Navigation ist clean und schnell, aber ohne Mega-Menu-Support und ohne mobilen Tab Bar out of the box
- Refresh (2024) bringt einen moderneren Header mit sich, nutzt aber immer noch das Standard-Hamburger-Pattern auf dem Handy
- Sense priorisiert visuelle Attraktivität und funktioniert gut für bildlastige Marken, kann sich aber auf schwächeren Handys langsam anfühlen
- Alle drei Themes haben gemeinsame Lücken: kein unterer Tab Bar, keine Menü-Icons, begrenzte mobile Anpassung
- Die meisten Probleme kannst du über Theme-Einstellungen beheben – nur wenige brauchen Apps oder Custom Code
Eine kurze Anmerkung zur Theme-Wahl
Wenn du ein Theme noch nicht ausgesucht hast, überdenk es nicht zu sehr. Dawn, Refresh und Sense sind alle kostenlos, alle werden von Shopify gepflegt, und alle funktionieren out of the box gut. Die Unterschiede sind hauptsächlich visuell – Dawn ist minimal, Refresh ist modern, Sense ist redaktionell.
Für Navigation speziell hat keines der drei Themes einen klaren Vorteil vor den anderen. Die gleichen Lücken und Stärken gelten für alle drei. Wähle basierend auf deiner Brand-Ästhetik, dann passe die Navigation an.
Dawn: das beliebteste Standard-Theme
Dawn ist Shopifys Flaggschiff-Freebie-Theme und das, mit dem die meisten neuen Shops starten. Es ist absichtlich minimal, lädt schnell, und folgt Best Practices für Barrierefreiheit. Lass uns die Navigation aufschlüsseln.
Was gut funktioniert
Saubere Header-Struktur. Dawns Header ist unkompliziert: Logo links, horizontales Menü in der Mitte oder linksbündig, Utility-Icons (Suche, Konto, Warenkorb) rechts. Das folgt dem Standard-E-Commerce-Layout, das Nutzer erwarten.
Anständiges mobiles Menü. Das Hamburger-Symbol öffnet eine saubere ausfahrbare Schublade mit deinen Menüpunkten. Es unterstützt eine Verschachtelungsebene (tippe auf ein Elternelement, um Kinder zu expandieren), was für die meisten kleinen bis mittleren Shops ausreichend ist.
Schnelles Laden. Dawns Navigation ist leichtgewichtig. Sie lädt keine schweren JavaScript-Frameworks oder Custom-Animationen, daher erscheint das Menü schnell auch bei langsamen Verbindungen. In PageSpeed-Insights-Tests erhält Dawn durchweg 85+ für mobile Performance.
Sticky-Header-Option. In Theme-Einstellungen → Header kannst du einen Sticky Header aktivieren, der beim Scrollen sichtbar bleibt. Das hält dein Menü, Suche und Warenkorb jederzeit zugänglich – ein bedeutender Usability-Gewinn, den viele Shop-Besitzer übersehen.
Eingebaute Suche. Dawn beinhaltet ein Such-Symbol im Header, das eine Vorhersage-Such-Overlay öffnet. Sie zeigt Ergebnisse, während du tippst, was Kunden hilft, Produkte schneller zu finden.
Was Anpassung braucht
Kein Mega Menu standardmäßig. Dawn unterstützt Dropdown-Menüs (eine Ebene von Unterkategorien), aber keine echten Mega Menus mit Multi-Spalten-Layouts, Kategorie-Bildern oder Promotions-Bannern. Für Shops mit 30+ Produkten wird ein Dropdown mit 15 Unterkategorien zu einer langen, scrollbaren Liste, die schwer zu navigieren ist.
Abhilfe: Du kannst ein Pseudo-Mega-Menu erstellen, indem du deine Shopify-Navigation in logische Gruppen organisierst (Online Store → Navigation), aber das visuelle Ergebnis ist immer noch ein Single-Column-Dropdown. Für ein echtes Multi-Spalten-Mega-Menu mit Bildern brauchst du eine Navigation-App.
Such-Icon vs. Such-Feld. Auf dem Desktop zeigt Dawn standardmäßig nur ein Lupensymbol. Es anzuklicken öffnet die Such-Overlay, was okay ist – aber Forschung vom Baymard Institute zeigt, dass ein sichtbares Suchfeld (nicht nur ein Icon) die Such-Nutzung um 20-30% erhöht.
Abhilfe: Manche Dawn-Anpassungen ermöglichen es dir, ein persistentes Suchfeld im Header anzuzeigen. Schau in deine Theme-Einstellungen oder die Dawn-Dokumentation nach „Vorhersage-Such”-Optionen. Falls deine Theme-Version das nicht unterstützt, kann eine Such-fokussierte App das hinzufügen.
Ankündigungs-Bar-Limitierungen. Dawns Ankündigungs-Bar unterstützt Text und einen Link, aber keine mehrfachen rotierenden Meldungen oder Countdown-Timer. Um Versandschwellen („Versand ab 50 Euro kostenlos”) oder begrenzte Angebote zu bewerben, ist eine einzelne statische Meldung funktional aber basic.
Was sofort geändert werden sollte
Aktiviere Sticky Header. Gehe zu Theme-Einstellungen → Header → aktiviere „Sticky Header”. Dieser eine Toggle macht deine Navigation jederzeit zugänglich, statt beim Scrollen zu verschwinden. Es gibt keinen Nachteil.
Schalte Vorhersage-Suche ein. In Theme-Einstellungen, stelle sicher, dass Vorhersage-Suche aktiviert ist. Sie zeigt Produkt-Vorschläge, während Kunden tippen, und reduziert die Schritte zwischen Suche und Produktseite.
Überprüfe deine Menü-Tiefe. Gehe zu Online Store → Navigation und überprüfe deine Menü-Struktur. Falls eine Kategorie mehr als zwei Ebenen tief verschachtelt ist (Kategorie → Unterkategorie → Unter-Unterkategorie), flache sie ab. Dawns mobiles Menü verwaltet eine Verschachtelungsebene elegant, wird aber bei zwei oder mehr Ebenen unhandlich.
Refresh: das moderne Update
Refresh ist eines von Shopifys neueren kostenlosen Themes, veröffentlicht 2024. Es nimmt Dawns Performance-fokussierten Ansatz und fügt mehr visuellen Polish hinzu – abgerundete Ecken, weichere Typografie und ein etwas anderes Header-Layout.
Was gut funktioniert
Aktualisiertes Header-Layout. Refresh bietet mehrere Header-Layout-Optionen: Logo links mit Inline-Menü, Logo Mitte mit Menü darunter, oder ein kompaktes Layout für kleinere Bildschirme. Diese Flexibilität ermöglicht dir, deinen Brand-Stil anzupassen, ohne Custom Code.
Verbesserter mobiler Drawer. Der Mobile-Menü-Drawer in Refresh fühlt sich polierter an als Dawns. Er beinhaltet glattere Animationen, klarere Typografie und besseres Spacing zwischen Tap-Zielen. Die visuelle Hierarchie zwischen Eltern-Kategorien und Unterkategorien ist ausgeprägter.
Collection-Seiten-Filter. Obwohl nicht streng Navigation, beinhaltet Refresh’s Collection-Seite eingebaute Filter- und Sortier-Funktionalität, die sauberer ist als Dawns Standard. Kunden können nach Preis, Verfügbarkeit und Produkttyp filtern – das reduziert die Last auf dein Hauptmenü, jede Variante anzuzeigen.
Barrierefreiheit. Wie Dawn, folgt Refresh WCAG-Richtlinien. Menüpunkte haben richtige ARIA-Labels, Focus-States sind sichtbar für Tastatur-Navigation, und Kontrast-Verhältnisse erfüllen Barrierefreiheits-Standards.
Was Anpassung braucht
Ähnliche Mega-Menu-Limitierungen. Refresh erbt die gleiche Einschränkung wie Dawn: Dropdown-Menüs unterstützen Unterkategorien, aber echte Mega Menus mit Bildern und Multi-Spalten-Layouts brauchen zusätzliche Anpassungen oder eine App.
Animations-Performance auf älteren Geräten. Refresh’s glattere Animationen sehen auf neueren Handys toll aus, können aber leichte Verzögerungen auf älteren Geräten verursachen (iPhone SE, Budget-Android-Handys). Falls dein Zielpublikum preissensible Käufer mit älteren Geräten einschließt, teste auf einem Low-End-Gerät.
Abhilfe: Die meisten animations-bezogenen Verzögerungen können mitigiert werden, indem man die Anzahl der Menüpunkte reduziert und Parallax-Effekte in den Theme-Einstellungen deaktiviert.
Was sofort geändert werden sollte
Aktiviere Sticky Header. Wie bei Dawn – aktiviere es in Theme-Einstellungen → Header. Refresh’s Sticky Header ist etwas kompakter als der volle Header, was gut ist: Es spart Bildschirm-Platz, während die Navigation zugänglich bleibt.
Überprüfe Header-Layout-Optionen. Refresh bietet 3-4 Header-Layout-Varianten. Versuche jede und schau, welche deinen Kategorien die beste Sichtbarkeit gibt. Für Shops mit 5+ Top-Level-Kategorien funktioniert ein Layout mit dem Menü unter dem Logo (volle Breite) oft besser als alles in eine Zeile zu quetschen.
Überprüfe mobiles Spacing. Obwohl Refresh’s mobiles Menü besseres Default-Spacing als Dawn hat, überprüfe es mit echtem Thumb-Tapping. Falls Punkte zu nah beieinander sind, erhöhe das Menü-Padding in deinem Theme’s Custom CSS oder Section-Einstellungen.
Sense: das redaktionelle Theme
Sense ist für Marken konzipiert, die sich auf Storytelling konzentrieren – denk an Handwerk-Produkte, Beauty-Brands oder Lifestyle-Shops. Die Navigation spiegelt diesen redaktionellen Fokus wider.
Was gut funktioniert
Visuelles Gewicht im Header. Sense’s Header gibt mehr Platz für dein Logo und Brand-Identität. Die Navigation fühlt sich absichtlich statt utilitaristisch an, was zu Marken passt, wo Ästhetik ein Verkaufsargument ist.
Bilderfreundliche Collection-Seiten. Sense’s Collection-Layout betont Produkt-Bildgebung, und die Navigation unterstützt dies, indem sie Menüs sauber und uncluttert hält. Für Shops, wo Produktfotos besser verkaufen als Kategorienamen, ist das ein Vorteil.
Elegantes mobiles Menü. Sense’s mobiler Drawer ist visuell verfeinert – saubere Typografie, großzügiger Whitespace, glatte Übergänge. Das schafft ein Premium-Gefühl, das zu redaktionellen oder Luxury-Brands passt.
Was Anpassung braucht
Weniger Header-Layout-Optionen. Verglichen mit Dawn und Refresh, bietet Sense weniger Anpassungsmöglichkeiten für Header-Layout. Logo-Platzierung und Menü-Position sind mehr locked-in, was restriktiv anfühlen kann, falls deine Kategoriestruktur nicht ins Standard-Layout passt.
Performance-Trade-offs. Sense lädt etwas mehr CSS und JavaScript als Dawn, hauptsächlich für visuelle Effekte. Für die meisten Shops ist der Unterschied vernachlässigbar (50-100ms auf Mobile), aber falls du andere Apps drauf stapelst, zählt jede Millisekunde.
Abhilfe: Minimiere Third-Party-Scripts und vermeide, mehrere Apps zu installieren, die JavaScript zu deinem Header hinzufügen. Falls du Sense verwendest, sei besonders achtungsvoll bezüglich des gesamten Seiten-Gewichts.
Was sofort geändert werden sollte
Vereinfache deine Menü-Struktur. Sense’s elegantes Menü-Design funktioniert beste mit weniger, gut gewählten Kategorien (5-7 Top-Level-Punkte). Falls du eine komplexe Kategoriestruktur von einem vorherigen Theme geerbt hast, ist jetzt ein guter Zeitpunkt zum Konsolidieren.
Teste auf Mid-Range-Android-Geräten. Sense’s visueller Polish ist für moderne Bildschirme konzipiert, aber ein bedeutender Teil des globalen E-Commerce-Traffic kommt von Mid-Range-Handys. Öffne deinen Shop auf einem Samsung Galaxy A-Serie oder ähnlichem Gerät und verifiziere, dass das Menü reibungslos öffnet.
Aktiviere Suche prominent. Sense’s Such-Symbol kann sich sekundär zur visuellen Gestaltung anfühlen. Stelle sicher, dass es prominent im Header positioniert ist – Kunden sollten nicht danach suchen müssen.
Lücken, die alle drei Themes teilen
Unabhängig davon, welches Theme du wählst, teilen alle drei Navigations-Limitierungen, die neue Shop-Besitzer beeinflussen:
Kein unterer Tab Bar
Keines von Shopifys kostenlosen Themes beinhaltet einen mobilen unteren Tab Bar (die Instagram/Amazon-ähnliche Navigation am unteren Bildschirmrand). Das ist eine bedeutende Lücke, weil:
- Tab Bars halten Navigation sichtbar, ohne einen Tap zum Öffnen des Hamburger-Menüs zu brauchen
- Sie sind thumb-freundlich (der untere Bildschirmrand ist die leichteste Reichweite-Zone)
- Sie reduzieren die Schritte vom „Stöbern” zum „Navigieren” von 2 Taps (Menü öffnen → Kategorie wählen) zu 1 Tap
Einen Tab Bar hinzufügen braucht eine Navigation-App oder Custom-Theme-Code.
Keine Menü-Icons
Alle drei Themes zeigen nur Text-Menüpunkte. Keine Icons für Home, Suche, Warenkorb oder Kategorien. Forschung zeigt, dass das Paaren von Icons mit Text-Labels die Scan-Geschwindigkeit um 20-35% verbessert und Kunden hilft, sich schneller zu orientieren.
Begrenzte mobile Anpassung
Du kannst separate Mobile- und Desktop-Menüs nicht nativ konfigurieren. Was du in Online Store → Navigation einrichtest, gilt für beide Bildschirmgrößen. Aber Mobile- und Desktop-Nutzer haben unterschiedliche Bedürfnisse – Mobile-Menüs sollten flacher und direkter sein, während Desktop-Menüs mehr Tiefe erlauben können.
Keine Menü-Analytics
Keines dieser Themes sagt dir, welche Menüpunkte am meisten geklickt werden, welche Kategorien den meisten Traffic fahren, oder welche Navigations-Pfade zu Käufen führen. Du brauchst Google Analytics Event Tracking oder eine dedizierte Navigation-App, um diese Daten zu bekommen.
| Feature | Dawn | Refresh | Sense | Ideal |
|---|---|---|---|---|
| Sticky Header | Ja (Toggle) | Ja (Toggle) | Ja (Toggle) | Ja |
| Mega Menu | Nein | Nein | Nein | Multi-Spalten mit Bildern |
| Mobiler Tab Bar | Nein | Nein | Nein | 4-5 Tabs unten |
| Menü-Icons | Nein | Nein | Nein | Icons + Text-Labels |
| Vorhersage-Suche | Ja | Ja | Ja | Ja |
| Separate Mobile/Desktop-Menüs | Nein | Nein | Nein | Unabhängige Konfiguration |
| Menü-Klick-Analytics | Nein | Nein | Nein | Eingebautes Klick-Tracking |
| Dropdown-Unterkategorien | Ja (1 Ebene) | Ja (1 Ebene) | Ja (1 Ebene) | 2+ Ebenen |
Wann das Standard genug ist (und wann nicht)
Behalte die Standards, wenn:
- Du weniger als 30 Produkte hast
- Deine Kategoriestruktur ist flach (5-7 Kategorien, keine Unterkategorien)
- Dein Traffic ist hauptsächlich Desktop
- Du gerade startest und die Product-Market Fit validieren willst, bevor du in Navigation investierst
In diesem Szenario wird Dawn, Refresh oder Sense mit aktiviertem Sticky Header und eingeschalteter Vorhersage-Suche dir gut dienen. Gib kein Geld für Navigation-Apps aus, bis du Traffic-Daten hast, die zeigen, wo Kunden stecken bleiben.
Upgrade, wenn:
- Du 30+ Produkte mit Unterkategorien hast
- Mobiler Traffic übersteigt 50% (überprüfe in Shopify Analytics → Online Store → Sessions by device)
- Deine Bounce Rate ist über 60% und du verdächtigst Navigation-Verwirrung
- Du ein Mega Menu mit Kategorie-Bildern, Icons oder Promotions-Bannern willst
- Du einen mobilen Tab Bar für thumb-freundliches Stöbern brauchst
Für diese Szenarien kann eine Navigation-App wie Navi+ Menu Builder die Lücke zwischen dem, was dein Theme bietet, und dem, was deine Kunden brauchen, überbrücken. Sie legt sich über dein existierendes Theme, ohne es zu ersetzen, und fügt Mega Menus, Tab Bars, Icons und separate Mobile/Desktop-Konfigurationen hinzu.
Theme-UpdatesShopify aktualisiert regelmäßig seine kostenlosen Themes. Manche hier erwähnten Lücken könnten in zukünftigen Versionen behoben werden. Nach einem Theme-Update teste deine Navigation erneut, um zu sehen, ob neue Features hinzugekommen sind – und um sicherzustellen, dass existierende Anpassungen nicht überschrieben wurden.
Deine nächsten Schritte
- Identifiziere dein Theme. Gehe zu Online Store → Themes, um zu bestätigen, welches Theme du verwendest.
- Aktiviere Sticky Header. Jedes Theme unterstützt das. Schalte es jetzt ein.
- Aktiviere Vorhersage-Suche. Gleich – ein Toggle, sofortige Verbesserung.
- Überprüfe die Vergleichstabelle oben. Identifiziere, welche Lücken am meisten für deine Shop-Größe und Traffic-Muster zählen.
- Entscheide: Anpassung oder Upgrade. Falls die Standards deine Bedürfnisse decken, konzentriere dich auf Content und Marketing. Falls du Mega Menus, Tab Bars oder mobile-spezifische Layouts brauchst, evaluiere eine Navigation-App.
Standard-Shopify-Themes geben dir einen soliden Ausgangspunkt für Navigation, und für viele neue Shops ist dieser Ausgangspunkt wirklich gut genug. Der Schlüssel ist zu wissen, welche Features sofort aktiviert werden sollten (Sticky Header, Vorhersage-Suche) und welche Limitierungen wichtig werden, wenn dein Shop wächst (kein Mega Menu, kein Tab Bar, keine separaten Mobile-Menüs). Starte mit dem, was du hast, beobachte, wo Kunden Schwierigkeiten haben, und upgrade bewusst, wenn die Daten dir sagen, dass du solltest.
This article is part of the larger guide on Navigationsgrundlagen für deinen ersten Online-Shop: die 5 Essentials.