Shopify-Menü wie die Theme-Demo gestalten (Theme-Einstellungen, Apps oder Code)

Sie öffnen die Demo eines professionellen Shopify-Themes, bewundern die elegante, mehrspaltige Navigation mit Bildkacheln und installieren das Theme in Ihrem Store. Doch nach der Aktivierung sieht das Menü völlig ernüchternd aus: eine schlichte, einspaltige Textliste mit großen Leerräumen.

Ein Demo-Menü ist keine Zauberei. Es entsteht aus den Header-Einstellungen des Themes kombiniert mit einer dreistufigen Menühierarchie, die mit Beispieldaten gefüllt ist. Sie können dieses Erscheinungsbild exakt nachbilden, indem Sie den Menütyp der Demo analysieren, die integrierten Theme-Optionen aktivieren, eine App nutzen oder individuellen Code einbinden – während Sie die mobile Navigation separat planen.

Quick answer: how to make your Shopify menu look like the demo

Ein Theme-Demo-Menü entsteht meist aus den Header-Einstellungen des Themes und einem verschachtelten Menü voller Beispielinhalte, nicht aus dem Standardmenü allein. Um es nachzubilden, ermitteln Sie den Menütyp, bauen bis zu drei Ebenen in Content > Menus auf, aktivieren die Header-Option und ergänzen Bilder oder nutzen eine App, falls Ihr Theme den Stil nicht bietet.

Befolgen Sie diese vier grundlegenden Schritte, um das Menü in Ihrem Store umzusetzen:

1. Menütyp der Demo identifizieren: Prüfen Sie, ob die Demo ein Standard-Dropdown, ein mehrspaltiges Mega-Menü, einen Off-Canvas-Drawer oder eine mobile Tab-Bar nutzt.
2. Verschachtelte Menüebenen anlegen: Erstellen Sie bis zu drei Verknüpfungsebenen unter Content > Menus im Shopify-Adminbereich.
3. Passende Header settings aktivieren: Öffnen Sie den Theme-Editor und schalten Sie die entsprechenden Navigationsblöcke im Header frei.
4. Bilder hinzufügen oder Mega-Menü-App nutzen: Laden Sie Teaser-Bilder in den Theme-Blöcken hoch oder installieren Sie eine Navigations-App, wenn Ihr Theme keine Spalten unterstützt.

Beachten Sie, dass sich mobile Menüs grundlegend von Desktop-Ansichten unterscheiden. Planen Sie Ihren mobilen Drawer oder Ihre Tab-Bar daher unabhängig.

Why your Shopify menu doesn’t look like the theme demo

Der spürbare Kontrast zwischen der Theme-Präsentation und dem frisch installierten Store führt bei vielen Händlern zu Verunsicherung. Das Verständnis der technischen Ursachen erspart langwierige Fehlersuchen.

Demo sample content

Ein Theme-Demo ist darauf angelegt, das Theme von seiner besten Seite zu zeigen. Ein Demo-Store enthält sample products and content to help you get a feel of how the theme looks and works. Die Menüspalten sind mit Kategorien, Fotos und Bannern gefüllt, die Ihr eigener Store noch nicht hat.

Wenn Sie ein Theme in Ihrem Shopify-Admin testen, you can try it by previewing the theme in your Shopify admin. Allerdings gilt dabei: you will need to preview the theme using whatever data is live on your site. Verfügt Ihr Store bisher nur über wenige Kollektionen mit spärlichem Sortiment oder enthält Ihr Menü nur flache Links, fehlen dem Theme schlichtweg die Daten. Der vorbereitete Demo sample content wird nicht automatisch in Ihren Store übertragen. Eine dünne Kategoriestruktur führt tendenziell zu einem dünnen, unausgewogenen Menüfenster.

The theme’s own menu style

Viele Themes bieten von Haus aus mehr als einen Darstellungsmodus für die Navigation an. In einem Thread der Shopify Community zum Theme Prestige fragt beispielsweise ein Händler, warum sein Menü nicht wie in der Demo aussieht. Der Shopify Support antwortet dazu: the Prestige theme also has two different menu styles, and this is likely why your menu looks different. Für diese Vorlage finden Sie detaillierte Hilfestellungen in unserem Leitfaden zum Thema add a mega menu to Prestige.

Zudem hält die offizielle Shopify-Dokumentation fest: the main menu and drop-down menus display in different locations in your online store depending on your theme. Dasselbe Menü kann daher je nach Theme an einer anderen Stelle oder in anderer Form erscheinen.

Ein weiteres Missverständnis betrifft Theme-Presets (Stile). Oft wird angenommen, dass der Wechsel des Presets auch das Navigationslayout ändert. Doch ein Preset betrifft seitenweite Einstellungen: each theme style is a set of pre-selected theme settings that configure site-wide colors, fonts, product options, and more. Weil ein Preset hauptsächlich Einstellungen wie Farben und Schriften anpasst, verwandelt der Preset-Wechsel ein einfaches Dropdown in der Regel nicht in ein mehrspaltiges Menü.

Step 1: Identify the menu type the demo uses

Bevor Sie Einstellungen in Ihrem Adminbereich vornehmen, öffnen Sie die Demo des Themes sowohl auf dem Desktop als auch auf einem Smartphone. Beobachten Sie genau, wie das Menü beim Überfahren mit der Maus oder beim Antippen reagiert.

In der Usability-Forschung der Nielsen Norman Group wird ein Mega-Menü definiert als a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. Die Studien belegen: mega menus show everything at a glance, so users can see rather than try to remember.

Nutzen Sie folgende Übersicht, um die Navigationsform der Demo präzise zuzuordnen:

Notieren Sie bei der Analyse: Wie viele Spalten öffnen sich, sind Bilder integriert und wie tief staffelt sich die Hierarchie? Ein Drawer menu bündelt Katalogzweige sauber, während eine Bottom tab bar häufige Aktionen mobil griffbereit hält. Zur Auswahl passender Muster je nach Sortimentsgröße empfehlen wir unsere Analyse zum Thema choosing the right menu type.

Konzept-Illustration: Gegenüberstellung einer einspaltigen Dropdown-Liste und eines mehrspaltigen Mega-Menü-Panels.

Abbildung 1: Konzept-Illustration — Single column list Dropdown im Vergleich zu einem Multi-column panel Mega-Menü mit Featured image.

Step 2: Check your theme’s header settings and menu structure

Unterstützt Ihr Theme die gewünschte Demo-Navigation von Haus aus, lässt sich das Layout kostenfrei ohne Zusatztools umsetzen. Dazu sind zwei Schritte nötig: Der Aufbau der Verlinkungshierarchie und das Aktivieren der Theme-Blöcke.

Build three levels in Content > Menus

Alle Standard-Menüs werden zentral in der Shopify-Administration verwaltet. Die Dokumentation erklärt: you can add, remove, change, and view your links and menus from Content > Menus in your Shopify admin (in älteren Oberflächen unter Online Store > Navigation).

Für ein mehrspaltiges Layout müssen Sie verschachtelte Ebenen (Nested menu levels) anlegen. Shopify gibt hierbei eine feste Plattformgrenze vor: the top-level item can have up to two levels of nested drop-down menus. Daraus ergeben sich maximal drei Ebenen:

• Ebene 1 (Hauptmenüpunkt): Die primäre Abteilung in der Kopfzeile (z. B. “Herren”).
• Ebene 2 (Spaltenüberschrift): Die Warengruppe, die als Titel der Spalte dient (z. B. “Bekleidung”, “Schuhe”, “Accessoires”).
• Ebene 3 (Kategorielinks): Die konkreten Kollektionen oder Produktseiten unterhalb der Spalte (z. B. “T-Shirts”, “Jacken”, “Hosen”).

Manche Themes benötigen diese dritte Ebene, bevor sie ein Mega-Menü anzeigen. Theme-Entwickler Fluorescent schreibt in der Dokumentation: for the mega navigation, you first need to create a nested menu with 3 levels of links. Fehlt die dritte Ebene, zeigt ein solches Theme die Einträge möglicherweise nur als Single column list statt als breites Multi-column panel.

Turn on the mega menu in Header settings

Nach dem Speichern der Menüstruktur wechseln Sie zu Online Store > Themes > Customize. Klicken Sie links auf den Bereich Header, um die Header settings zu öffnen.

Shopify weist darauf hin: the sections and blocks that are available in the theme editor depend on your theme and theme version. Die Bezeichnungen variieren je nach Theme; suchen Sie im Bereich Header nach der Option für den Menüstil und prüfen Sie die Theme-Dokumentation. Für Shops mit dem Theme Dawn zeigt unsere Anleitung, wie Sie add a mega menu to Dawn.

Themes mit integrierten Werbekacheln erlauben das Hochladen von Bildern direkt im Menüblock: select or upload a Mega nav featured image to display inside the mega navigation menu. Ein solches Featured image verleiht dem Menü die aus der Demo bekannte Hochwertigkeit. Bietet Ihr Theme keine entsprechenden Einstellungen, konsultieren Sie die Entwicklerdokumentation oder den Theme-Support.

Das offizielle Tutorial von Shopify veranschaulicht den Aufbau mehrstufiger Menüs im Detail:

Step 3: Rebuild the demo menu with a mega menu app

Verfügt Ihr Theme über keine integrierten Mega-Menü-Funktionen oder möchten Sie dynamische Produktkarten einbinden, ist eine spezialisierte Mega menu app die wirtschaftlichste Lösung.

Eine App empfiehlt sich insbesondere in drei Situationen:

1. Eingeschränkte Theme-Funktionen: Das Theme erlaubt technisch nur schmale Standard-Dropdowns.
2. Visuelles Merchandising: Sie möchten Produkte, Kollektionen, Bilder oder Icons direkt in den Menüspalten präsentieren.
3. Zukunftssicherheit bei Theme-Wechseln: Bei einem späteren Relaunch bleibt Ihre Navigationsarchitektur ohne Neuaufbau vollständig erhalten.

Der typische Ablauf beim Erstellen mit einer App umfasst folgende Schritte:

• Vorlage wählen: Wählen Sie ein Template, dessen Spaltenaufteilung der Theme-Demo entspricht.
• Kategorien zuweisen: Weisen Sie Ihre Ebene-2-Gruppen als Spaltenköpfe zu und ordnen Sie die Ebene-3-Links ein.
• Bildelemente ergänzen: Binden Sie Kollektionsfotos, Banner oder Aktionsgrafiken in die vorgesehenen Bereiche ein.
• Geräteansichten prüfen: Kontrollieren Sie Lesbarkeit und Abstände auf Desktop- und Mobilbildschirmen.
• Über Theme App Extension aktivieren: Schalten Sie die Einbettung im Theme-Editor frei. Dank moderner Shopify-Standards gilt: merchants won’t need to manually edit their theme code.

Achten Sie bei der App-Wahl auf visuelle Drag-and-Drop-Editoren, die den Theme-Code unberührt lassen. Für bewährte Layout- und Abstandsregeln verweisen wir auf unseren Leitfaden mega menu best practices.

Step 4: Make the mobile menu match the demo

Ein häufiger Fehler bei der Adaption von Demo-Menüs ist die ausschließliche Konzentration auf große Monitore. Auf Touchscreens gelten völlig andere ergonomische Regeln.

Das Baymard Institute stellt in Usability-Studien fest: during usability testing we consistently observe that mobile navigation is particularly difficult for users. Aufgrund des begrenzten Bildschirms gilt: most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon.

Visuelle Desktop-Elemente lassen sich mobil fast nie eins zu eins übernehmen. Bei Themes von Fluorescent heißt es ausdrücklich: this image is not displayed on mobile. Ein breites mehrspaltiges Panel passt auf einem Smartphone selten ohne horizontales Scrollen oder winzige Tippflächen.

So stellen Sie die mobile Qualität sicher:

• Drawer menu: Übertragen Sie Ihre Sortimentshierarchie in ein vertikales Drawer menu. Sorgen Sie dafür, dass Hauptkategorien leicht aufklappen und dieselbe Struktur (Same structure) wie auf dem Desktop abbilden.
• Bottom tab bar: Wenn einige wichtige Seiten stets griffbereit sein sollen, empfiehlt sich die Kombination aus Drawer und einer fixierten Bottom tab bar. Die wichtigsten Einstiege (Home, Suche, Kategorien, Warenkorb, Konto) am unteren Bildschirmrand bleiben stets in Daumenreichweite.

Vertiefende Praxistipps finden Sie in unseren Fachartikeln zum mobile drawer menu und zur Einrichtung einer bottom tab bar for mobile.

Konzept-Illustration: Desktop-Mega-Menü-Struktur übertragen in mobilen Drawer und Tab-Bar.

Abbildung 2: Konzept-Illustration — Desktop-Mega-Menü-Kategorien mit identischer Same structure im mobilen Drawer menu und in der Bottom tab bar.

Custom Liquid code vs. an app: trade-offs

Wenn integrierte Theme-Mittel nicht ausreichen, stehen Händler vor der Wahl zwischen individuellem Liquid-Code und einer spezialisierten App. Beide Wege bringen klare Vor- und Nachteile mit sich:

Native Theme-Einstellungen sind die stabilste Option. Shopify-Dokumentation: any customizations made to your theme using the theme editor are copied over and applied to the updated theme.

Eigener Code bietet die größte gestalterische Freiheit. In der Community wird bestätigt: can be done using custom code on the theme. Doch manueller Code kann bedeuten laufenden Wartungsaufwand: Bei Theme-Updates können Änderungen verloren gehen. Shopify warnt: you should always save a copy of any customized code before updating your theme.

Eine moderne Mega menu app bildet den idealen Mittelweg. Da merchants won’t need to manually edit their theme code, bleibt die Vorlage sauber. Dennoch können laufende App-Kosten entstehen, und Shopify merkt an, dass some apps might not be compatible with a new theme.

Zu den Grenzen nativer Theme-Menüs informieren Sie sich in unserer Übersicht über limits of theme menus.

Common mistakes when copying a demo menu

Beim Versuch, ein Demo-Menü nachzubauen, treten in der Praxis fünf wiederkehrende Fehler auf:

1. Unbefüllte Kollektionen und fehlende Bilder: Demo-Menüs wirken durch hochwertige Fotos professionell. Wenn Kollektionen nur zwei Produkte enthalten oder Beitragsbilder fehlen, wirkt das Menü kahl.
2. Flache Verlinkung im Adminbereich: Werden Links nur auf Ebene 1 oder 2 in Content > Menus angelegt, kann das Theme keine Spalten erzeugen. Manche Themes brauchen alle drei Ebenen, um ein Mega-Menü zu zeigen.
3. Vernachlässigte Mobilansicht: Ein aufwendiges mehrspaltiges Desktop-Menü bricht auf Smartphones oft unbemerkt zusammen; manche Themes blenden Mega-Menü-Bilder mobil aus.
4. Überdimensionierte Struktur bei kleinem Sortiment: Demo-Stores sind darauf ausgelegt, ein volles Sortiment zu zeigen. Wer nur wenige Kollektionen hat, überfordert Kunden womöglich mit einem riesigen Spaltenmenü.
5. Erwartung, dass Presets das Layout ändern: Das Wechseln von Theme-Presets ändert Schriftarten und Farben, generiert jedoch keine neuen Navigationsspalten.

Where Navi+ fits

Wenn Ihr Theme das Menü der Demo nicht unterstützt, können Sie es in Navi+ anhand von Vorlagen nachbauen und Spalten sowie Bilder an Ihr Sortiment anpassen.

Navi+ schließt funktionale Navigationslücken, ohne dass Eingriffe in den Theme-Code erforderlich sind:

• Desktop Mega Menu: Build mega menus with products, collections, images, icons, and flexible layouts bequem im visuellen Editor.
• Mobiles Menü & Drawer: Create mobile menus, drawer menus, and hamburger menus for easier store browsing.
• Fixierte Bottom-Tab-Bar: Add sticky bottom tab bars with icons and labels for app-like mobile navigation.
• Codefreie Menüverwaltung: Generate menus with AI, templates, drag-and-drop editing, and no coding required.

In Navi+ wählen Sie eine Startvorlage, passen Spalten und Bilder an und verknüpfen Ihre Live-Kollektionen. Das mobile Menü kann das Desktop-Mega-Menü einbetten, sodass beide Geräte dieselbe Datenbasis mit bis zu drei Ebenen teilen.

Eine Vorlage ist stets ein struktureller Ausgangspunkt; Inhalte und Bilder müssen Sie selbst einpflegen. Ein automatischer Klon fremder Menüs existiert nicht.

Erfahren Sie mehr zur Theme-Kompatibilität in unserer Übersicht über Navi+ menus on Shopify themes.

Das folgende Video analysiert den Menüaufbau eines Shopify-Themes mit Mega-Menü, fixiertem Header und Tab-Bar:

Pre-publish checklist

Prüfen Sie vor dem Livegang Ihres Menüs folgende acht Qualitätskriterien:

• Menütyp definiert: Geklärt, ob die Vorlage ein Dropdown, Mega-Menü, einen Drawer oder eine Tab-Bar nutzt.
• Drei Ebenen angelegt: Kategorien in Content > Menus auf Ebene 1, 2 und 3 für Spaltenansichten strukturiert.
• Kollektionsinhalte geprüft: Sichergestellt, dass verlinkte Kollektionen aktive Produkte enthalten.
• Alt-Texte hinterlegt: Alle Teaser-Bilder im Menü mit barrierefreien Alt-Texten versehen.
• Header-Optionen aktiviert: Korrekte Menüeinstellung oder App-Einbettung im Theme-Editor eingeschaltet.
• Mobilansicht getestet: Menü-Drawer und Tab-Bar auf einem Smartphone auf Tippfreundlichkeit geprüft.
• Code-Backup erstellt: Vor manuellen Liquid-Änderungen eine Sicherheitskopie des Theme-Codes gesichert.
• Update-Routine dokumentiert: Eingesetzte Apps vermerkt, um nach Theme-Updates die Funktion zu prüfen.

FAQ

Why doesn’t my theme’s menu look like the demo?

Demo-Stores enthalten Musterprodukte und Beispielinhalte, zudem bieten viele Themes mehrere Menüstile. Die Vorschau nutzt Ihre realen Shop-Daten, weshalb leere Kollektionen ein leeres Menü erzeugen.

How many levels can a Shopify menu have?

Ein Hauptmenüpunkt kann maximal zwei verschachtelte Unterebenen haben, was insgesamt drei Menüebenen ergibt. Manche Themes benötigen diese dritte Ebene, um ein Mega-Menü anzuzeigen.

Do I need an app or custom code for a mega menu like the demo?

Prüfen Sie zuerst die Header-Optionen im Theme-Editor, die je nach Theme variieren. Fehlt das Layout, können Sie eine App ohne Code-Anpassung nutzen oder Liquid-Code mit vorheriger Sicherungskopie einbauen.

Will my menu break when I update my theme?

Im Theme-Editor vorgenommene Einstellungen bleiben bei Updates erhalten. Individueller Liquid-Code muss meist manuell übertragen werden, und App-Kompatibilitäten sollten geprüft werden.

Can mobile look the same as desktop?

Auf Smartphones werden Menüs meist hinter einem Hamburger-Icon gebündelt, und manche Themes blenden Bilder mobil aus. Planen Sie mobile Drawer oder Tab-Bars daher separat.

Sources

1. Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
2. Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
3. Shopify Help Center — Sections and blocks in the theme editor. help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks
4. Shopify Help Center — Updating themes. help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
5. Shopify Help Center — Adding, previewing, and buying themes. help.shopify.com/en/manual/online-store/themes/adding-themes
6. Out of the Sandbox — What to look for when trying out Shopify theme demos. outofthesandbox.com/blogs/shopify-theme-blog/shopify-theme-buying-tips
7. Shopify Community — Trying the Prestige theme but my menu doesn’t look like the one the demo. community.shopify.com/t/trying-the-prestige-theme-but-my-menu-doesn-t-look-like-the-one-the-demo/28768
8. Fluorescent Help — Context Mega Navigation. help.fluorescent.co/context/pages/header/mega-navigation
9. Fluorescent Help — Style Presets. help.fluorescent.co/ira/theme-styles/style-presets
10. Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well/
11. Baymard Institute — Mobile Navigation Menu Usability Benchmark. baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
12. Shopify Dev Docs — Theme App Extensions. shopify.dev/docs/apps/build/online-store/theme-app-extensions
13. Shopify Community — How can I set my product collections to a stylish and useful navigation page like this Shopify store. community.shopify.com/t/how-can-i-set-my-product-collections-to-a-stylish-and-useful-navigation-page-like-this-shopify-store/333164
14. Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design