Erste Schritte mit einer Shopify Menü-Builder-App (Schritt-für-Schritt für Einsteiger)

Wenn Online-Händler nach einer Menü-Builder-App suchen, stoßen sie oft auf Anleitungen für Speisekarten von Restaurants anstelle von E-Commerce-Navigation—dieser Leitfaden befasst sich ausschließlich mit der Shop-Navigation für Shopify-Stores. Das erstmalige Einrichten einer Navigations-App kann bei einem aktiven Shop einschüchternd wirken, erfordert jedoch keinerlei Programmierkenntnisse.

Skizzieren Sie Ihre Kategorien auf Papier, üben Sie auf einem Theme-Duplikat, konzentrieren Sie sich zunächst auf einen einzigen Menü-Typ und prüfen Sie die Touch-Ziele auf einem echten Smartphone vor der Veröffentlichung.

Quick answer: how to get started with a Shopify menu builder app

Um mit einer Shopify Menü-Builder-App zu starten, skizzieren Sie Ihr Menü zuerst auf Papier, wählen Sie einen Menü-Typ zum Lernen, aktivieren Sie das App-Embed im Theme-Editor, erstellen Sie einige Einträge, prüfen Sie die Vorschau auf dem Smartphone und veröffentlichen Sie das Menü anschließend:

1. Step 1: Sketch your menu structure: Kategorien auf Papier skizzieren und Standard-Links unter Content > Menüs aufräumen.
2. Step 2: Pick one menu type to learn first: Eine Tab Bar, einen Mobile Drawer oder ein Mega Menu passend zum Nutzerverhalten wählen.
3. Step 3: Install the app and turn on the app embed: App installieren, Schalter im Theme-Editor aktivieren und speichern.
4. Step 4: Build your first menu: Vier bis fünf Kerneinträge mit klaren Labels, Icons und Ziel-Links erstellen.
5. Step 5: Match your brand: Farben, Schriften und Ausrichtung an das Theme anpassen.
6. Step 6: Preview on a phone and a desktop: Auf einem Theme-Duplikat testen und Touch-Ziele auf dem Smartphone tippen.
7. Step 7: Publish, check every link, and fix common problems: In der App veröffentlichen und Live-Links prüfen.

Wenn Sie nur eine Stunde Zeit haben, führen Sie die Schritte 1–3 und 6 auf einem Theme-Duplikat durch.

Four terms to learn before you start

Vor dem Öffnen der Konfiguration sollten Sie diese fünf Kernbegriffe kennen:

Step 1: Sketch your menu structure before you open the app

Beginnen Sie die Einrichtung nicht ohne vorherigen Plan direkt in der Software. Das führt schnell zu unübersichtlichen Strukturen. Bereiten Sie Ihre Inhalte zuerst auf Papier vor.

Notieren Sie die wichtigsten Ziele Ihrer Kunden: Kollektionen, Bestseller, Infoseiten (Über uns, Versand, Kontakt) und Ihren Blog (Shopify Help Center). Skizzieren Sie Ihre Menüstruktur (sketch your menu structure) als Baumdiagramm mit 2 bis 3 Ebenen. Bestimmen Sie 4–5 Hauptkategorien und ordnen Sie Unterkollektionen darunter an.

Öffnen Sie anschließend den Shopify-Adminbereich unter Content > Menus (Shopify Help Center). Bereinigen Sie bestehende Standardmenüs, löschen Sie veraltete Links und prüfen Sie URLs. Wenn ein Haupteintrag nur als Gruppe dient und nicht auf eine eigene Seite führen soll, tragen Sie # in das Link-Feld ein (Shopify Help Center).

Beachten Sie die Shopify-Strukturvorgaben: Ein Haupteintrag kann maximal zwei verschachtelte Dropdown-Ebenen darunter besitzen (Shopify Help Center). Ein sauberes Standardmenü erleichtert die spätere Verknüpfung in der App erheblich.

Shopify’s own video shows how to nest menu items:

Step 2: Pick one menu type to learn first

Moderne Apps bieten viele Varianten: Tab Bars, Mega Menus, Schubladen-Menüs und Floating Buttons. Zu Beginn alles auf einmal konfigurieren zu wollen, führt zu Überforderung. Wählen Sie zunächst einen Menü-Typ zum Lernen (pick one menu type) basierend auf Ihren Shop-Besuchern.

Abbildung 1: Konzeptillustration (Concept illustration) — Step 2: Pick one menu type to learn first

Mobile shoppers first

Wenn die meisten Ihrer Besucher per Smartphone einkaufen, zählt vor allem ein Menü, das sich auf dem Handy leicht finden und antippen lässt (siehe das Zitat der Nielsen Norman Group weiter unten). Für mobile Shops lohnt es sich, zuerst zwei Formate zu lernen:

• Tab Bar: Eine fixierte Leiste am unteren Bildschirmrand, die Kernziele (Startseite, Shop, Suche, Warenkorb) in einer dauerhaft sichtbaren Leiste bündelt.
• Mobile Drawer: Ein seitliches Menü, das beim Antippen aufgleitet und hierarchische Kategorien übersichtlich darstellt.

Desktop shoppers first

Wenn Sie einen umfangreichen Katalog mit Dutzenden Unterkategorien führen und der Großteil der Einkäufe am Computer stattfindet, setzen Sie auf:

• Mega Menu: Ein breites Dropdown-Panel, das mehrere Kategoriespalten und Banner gleichzeitig präsentiert.

Wie die Nielsen Norman Group in ihrer Mobilforschung feststellte: “visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group).

Lesen Sie unseren Vergleich darüber, how to choose the right menu type für Ihre Shop-Größe, und erfahren Sie, wie Händler tab bars and hybrid mobile navigation einsetzen. Konzentrieren Sie sich heute auf genau ein Format.

Step 3: Install the app and turn on the app embed

Installieren Sie Ihre gewünschte Menü-App aus dem Shopify App Store. Nach der Installation erscheint die App im Admin unter Apps, zeigt jedoch noch nichts im Shop an.

Moderne Apps nutzen App-Embeds. Shopify beschreibt App-Embeds als vom App-Anbieter bereitgestellte Elemente, die über dem Theme schweben oder eingeblendet werden (Shopify Help Center), ohne Liquid-Code zu beschädigen.

So aktivieren Sie das App-Embed (turn on the app embed):

1. Gehen Sie in Shopify Admin zu Online Store > Themes.
2. Wählen Sie das Übungs-Theme (idealerweise ein Duplikat, siehe Schritt 6) und klicken Sie auf Customize.
3. Klicken Sie in der linken Leiste auf das Symbol für App-Embeds (Shopify Help Center).
4. Suchen Sie Ihre Menü-App und schalten Sie den Schalter auf Ein (On).
5. Klicken Sie oben rechts auf Speichern (Save).
6. Öffnen Sie die Shop-Vorschau, um die App live zu sehen (Shopify Help Center).

Laut Shopify-Dokumentation können App-Embeds mit jeder Theme-Version verwendet werden (Shopify Help Center). Beachten Sie jedoch: Wenn Sie später das aktive Theme wechseln, müssen Sie das App-Embed im neuen Theme erneut aktivieren (Shopify Help Center).

Weitere technische Details finden Sie in unserem Leitfaden zu how app embeds work with your theme.

Step 4: Build your first menu: items, links, and icons

Öffnen Sie das Dashboard der App im Shopify Admin. Halten Sie den ersten Entwurf schlank: Erstellen Sie 4 bis 5 Haupteinträge gemäß Ihrer Skizze aus Schritt 1.

Praktische Empfehlungen:

• Eindeutige Hauptpunkte: Nutzen Sie vertraute Begriffe wie “Neuheiten”, “Kollektionen”, “Bestseller” oder “Hilfe”.
• Gültige Ziele verknüpfen: Verlinken Sie jeden Eintrag mit einer aktiven Kollektion oder Seite. Vermeiden Sie leere Kategorien.
• Verständliche Icons wählen: Kombinieren Sie in einer Tab Bar klare Icons (Haus für Home, Lupe für Suche, Tasche für Warenkorb) stets mit Textbeschriftungen.
• Unterpunkte sparsam einsetzen: Fügen Sie Unterkategorien erst hinzu, wenn die Hauptebene sauber steht. Beachten Sie die Shopify-Grenze von maximal zwei Unterebenen (Shopify Help Center).
• Bestehende Shopify-Menüs verknüpfen: Viele Apps bieten einen Import bestehender Menüs aus Content > Menus. Wenn Ihre App das unterstützt, nutzen Sie es, statt alles von Hand einzutippen.

Hinweis: Dieser Leitfaden behandelt die Grundeinrichtung. Fortgeschrittene mehrspaltige Mega Menus mit Bannern werden in separaten Artikeln vertieft.

Step 5: Match your brand: colors, fonts, and position

Ein ungestyltes Menü wirkt unprofessionell und mindert das Kundenvertrauen. Passen Sie das Menü optisch an Ihren Shop an.

Drei zentrale Gestaltungsbereiche:

• Farben: Übernehmen Sie die exakten Hex-Codes Ihres Themes für Hintergrund, Header und Schrift. Achten Sie auf hohen Kontrast für mobile Lesbarkeit im Freien.
• Schriften und Größen: Verwenden Sie dieselbe Schriftart wie Ihr Theme. Halten Sie die Schriftgrößen auf dem Smartphone gut lesbar und leicht antippbar.
• Positionierung: Docken Sie eine Tab Bar fest am unteren Bildschirmrand an, richten Sie einen Drawer linksbündig aus und platzieren Sie ein Mega Menu direkt unter dem Header.

Stellen Sie sicher, dass das Menü keine nativen Elemente wie “In den Warenkorb”-Buttons oder Chat-Widgets verdeckt.

Lesen Sie unseren Leitfaden make navigation feel like your store für detaillierte Branding-Tipps.

Step 6: Preview on a phone and a desktop before you publish

Veröffentlichen Sie ein neues Menü niemals ungetestet im Live-Shop. Beachten Sie diese drei Prüfregeln:

Abbildung 2: Konzeptillustration (Concept illustration) — Step 6: Preview on a phone and a desktop before you publish

• Duplicate theme first: Shopify empfiehlt vor Änderungen: “make a backup copy so that you can discard your changes and start again if you need to” (Shopify Help Center). Duplizieren Sie Ihr Theme unter Online Store > Themes. Aktivieren Sie das App-Embed auf dieser Kopie, damit Kunden keine Baustelle sehen.
• Tap every item: Verlassen Sie sich nicht nur auf die Desktop-Simulation. Preview on a phone: Öffnen Sie die Vorschau auf einem echten Smartphone. Halten Sie das Gerät einhändig und tippen Sie jeden Link und jedes Akkordeon an.
• Check the theme menu: Prüfen Sie, ob das Standardmenü des Themes parallel sichtbar bleibt. Da Menüpositionen vom Theme abhängen (Shopify Help Center), müssen Sie das native Theme-Menü eventuell im Header-Bereich ausblenden.

Prüfen Sie anschließend auch die Desktop-Darstellung auf großen Monitoren.

Step 7: Publish, check every link, and fix common problems

Wenn alle Tests erfolgreich waren, können Sie veröffentlichen. Bei einigen Apps, darunter Navi+, aktiviert das App-Embed nur das Skript; Sie müssen im Dashboard der App auf “Veröffentlichen” klicken (Navi+ Help Center).

Check every link: Öffnen Sie ein Inkognito-Fenster und prüfen Sie jeden Link im Live-Shop. Bei Anzeigeproblemen hilft diese Fehlerbehebung:

Bei hartnäckigen Darstellungskonflikten konsultieren Sie die Dokumentation des App-Entwicklers.

Trade-offs: when you don’t need a menu builder app yet

Eine Menü-Builder-App ist nicht für jeden Shopify-Store zwingend nötig. Zu erkennen, wann Bordmittel ausreichen, spart Zeit und Aufwand.

Wenn Ihr Shop nur ein kleines Sortiment führt – etwa ein einzelnes Produkt oder wenige Artikel –, reichen die Standard-Werkzeuge unter Content > Menus oft aus (Shopify Help Center). Standardmenüs unterstützen bis zu zwei Unterebenen (Shopify Help Center) und bleiben angenehm schlank.

Jede zusätzliche App bringt Mehraufwand mit sich: ein weiteres Dashboard, Einarbeitungszeit und das erneute Aktivieren des App-Embeds bei Theme-Updates (Shopify Help Center).

Wenn Ihr Sortiment jedoch wächst und Sie eine fixe Tab Bar am Smartphone, einen flexiblen Drawer oder ein bebildertes Mega Menu benötigen, ist der Wechsel zu einer Menü-App ein lohnender Schritt.

Lesen Sie unsere Analyse zu Shopify theme menu limitations, um zu prüfen, ob Ihr Shop die Theme-Grenzen erreicht hat.

What to learn next: Icon Menu, Floating Button, and seasonal menus

Sobald Ihr erstes Menü live ist, können Sie weitere Navigationsmuster testen:

• Icon Menu: Kreisrunde Kategorie-Icons auf der Startseite für schnelles visuelles Stöbern.
• Floating Button (FAB): Ein schwebender Button für schnellen Zugriff auf Support oder Tracking.
• Saisonale Menüs: Umstrukturierung des Menüs bei Aktionen oder Feiertagen mit Aktionskategorien ganz oben.

Erfahren Sie, when an icon menu beats a text list, und messen Sie den Erfolg anhand von 5 metrics worth tracking.

Where Navi+ fits

Wenn Sie eine App suchen, mit der Sie all diese Schritte an einem Ort umsetzen können, testen Sie Navi+ Tab Bar & Mega Menu.

Navi+ wurde für Shopify-Händler entwickelt, die sticky Tab Bars am unteren Bildschirmrand, Mega Menus, mobile Drawer, Icon-Menüs und Floating Buttons per Drag-and-Drop erstellen möchten (Shopify App Store). Sie können bestehende Shopify-Menüs direkt verbinden, Vorlagen nutzen und Navigation mit KI-Unterstützung aufbauen (Shopify App Store).

Navi+ bietet einen kostenlosen Tarif (Shopify App Store). Die Veröffentlichung erfolgt in zwei Schritten: “Store Connector” im Theme-Editor aktivieren, Menü konfigurieren und im Navi+ Dashboard auf “Publish to website” klicken (Navi+ Help Center).

Navi+ empfiehlt ausdrücklich: “The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center). So testen Sie sicher auf dem Smartphone, bevor Kunden Änderungen sehen.

Action checklist: your first-session plan

Prüfliste für Ihre erste Einrichtung:

• Sketch your menu structure: 4–5 Hauptkategorien und Unterkollektionen auf Papier skizzieren.
• Tidy Content > Menus: Veraltete Links im Shopify-Admin aufräumen (Shopify Help Center).
• Duplicate theme first: Theme-Duplikat für risikofreies Testen anlegen (Shopify Help Center).
• Pick one menu type: Für ein Format entscheiden: Tab Bar, Mobile Drawer oder Mega Menu.
• Turn on the app embed: App-Embed im Theme-Editor aktivieren und speichern (Shopify Help Center).
• Build 4–5 core items: Klare Labels, passende Icons und Kollektions-Links zuweisen.
• Match colors/fonts: Farben und Typografie an das Theme anpassen.
• Tap every item on a phone: Vorschau auf dem Smartphone öffnen und jeden Button tippen.
• Publish and check every link: Im Dashboard veröffentlichen und Links im Live-Shop prüfen (Navi+ Help Center).
• Re-check after theme changes: App-Embed nach künftigen Theme-Wechseln erneut aktivieren (Shopify Help Center).

Wenn Sie diese Schritte in einer App üben möchten: Navi+ Tab Bar & Mega Menu hat einen kostenlosen Tarif, fertige Vorlagen und kann Ihre bestehenden Shopify-Menüs verbinden – starten Sie auf einem Theme-Duplikat und veröffentlichen Sie, wenn Sie zufrieden sind.

FAQ

Welchen Menü-Typ sollte ich zuerst erstellen?
Wählen Sie das Format, auf dem Ihre Kunden einkaufen: eine Tab Bar oder einen Mobile Drawer bei überwiegendem Smartphone-Traffic, oder ein Mega Menu bei vielen Desktop-Kategorien.

Muss ich meine Shopify-Menüs vorher anpassen?
Das Aufräumen unter Content > Menus wird empfohlen (Shopify Help Center); Apps wie Navi+ können bestehende Menüs direkt verknüpfen (Shopify App Store).

Wie aktiviere ich ein App-Embed in Shopify?
Klicken Sie im Theme-Editor auf das App-Embed-Symbol in der linken Seitenleiste, aktivieren Sie die App und speichern Sie (Shopify Help Center).

Warum wird meine Menü-App nicht angezeigt?
Häufige Ursachen sind ein nicht aktiviertes App-Embed (Shopify Help Center), ein inaktives Embed nach einem Theme-Wechsel (Shopify Help Center) oder das fehlende Veröffentlichen im App-Dashboard (Navi+ Help Center).

Kann ich testen, ohne dass Kunden es sehen?
Ja. Duplizieren Sie Ihr Theme, aktivieren Sie das App-Embed auf der Kopie und prüfen Sie die Vorschau privat auf dem Smartphone (Shopify Help Center; Navi+ Help Center).

Wie viele Ebenen kann ein Shopify-Dropdown haben?
In Standardmenüs kann ein Haupteintrag bis zu zwei verschachtelte Dropdown-Ebenen darunter besitzen (Shopify Help Center).

Sources

• Shopify Help Center: Set up drop-down menus in your online store
• Shopify Help Center: Menus and links
• Shopify Help Center: App embeds and theme extensions
• Shopify Help Center: Duplicating themes
• Nielsen Norman Group: Mobile Navigation Discoverability
• Navi+ Help Center: Publishing on Shopify
• Shopify App Store: Navi+ Tab Bar & Mega Menu