How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

Sie haben die Navigation in einer Menü-App erstellt, aber sie erscheint nicht in Ihrem Storefront. Das Hinzufügen eines App-Menüs zu Shopify erfordert eine grundlegende Regel: Das Menü befindet sich in der App, nicht in Ihrem Theme. Es erscheint erst, nachdem Sie das Theme-App-Embed aktiviert, das Menü in der App veröffentlicht und die Platzierung festgelegt haben.

Quick answer: how to add a menu from a menu app to your Shopify store

Ein App-Menü befindet sich in der App, nicht in Shopify Content > Menus, und erscheint erst nach der Verknüpfung mit Ihrem Theme. Aktivieren Sie das App-Embed, speichern Sie, veröffentlichen Sie in der App, wählen Sie die Platzierung, blenden Sie das Theme-Menü aus und prüfen Sie das Live-Storefront.

Befolgen Sie diese fünf Schritte:

1. Öffnen Sie im Shopify-Adminbereich Online Store > Themes > Customize, öffnen Sie Theme settings > App embeds, aktivieren Sie Ihre App und klicken Sie auf Save.
2. Klicken Sie im Dashboard Ihrer Menü-App auf Veröffentlichen, um Ihr Menü freizugeben.
3. Wählen Sie die Platzierung: Floating Overlay, CSS-Selektor (insert/replace) oder App-Block.
4. Blenden Sie das standardmäßige Header-Menü Ihres Themes aus oder heben Sie die Zuweisung auf, um Duplikate zu vermeiden.
5. Überprüfen Sie Desktop- und Mobil-Layouts und testen Sie Ihren Live-Shop in einem Inkognito-Fenster.

Wenn Sie Ihre Navigation noch nicht erstellt haben, beginnen Sie mit unserer Schritt-für-Schritt-Anleitung für Menü-Builder-Apps.

Why a menu built in an app doesn’t appear on its own

In Shopify verwalten Sie native Links unter Content > Menus, und Themes zeigen diese automatisch über die Header-Einstellungen an.

Menü-Apps halten Ihre Menüs innerhalb der App. Laut der Shopify-Entwicklerdokumentation sind App-Embed-Blöcke nach der Installation standardmäßig deaktiviert, und Themes enthalten App-Blöcke nicht automatisch. Die Installation einer App bringt ihr Menü nicht von selbst auf Ihr Storefront. Ihre Menüs unter Content > Menus bleiben, wo sie sind.

Der integrierte Shopify-Editor erlaubt für ein Hauptelement bis zu zwei Ebenen verschachtelter Dropdown-Menüs. Für Layouts jenseits nativer Grenzen können Händler das Menü selbst in einer Navigationsmenü-App erstellen.

Dieses offizielle Shopify-Video zeigt den integrierten Menü-Editor, der unabhängig von Ihrer Menü-App arbeitet.

Step 1: Turn on the app embed in the theme editor

Der erste Schritt ist die Aktivierung Ihres Theme-App-Embeds. Laut Shopify sind App-Embeds von Apps bereitgestellte Elemente, die in Ihrem Theme schweben oder als Overlay angezeigt werden.

So aktivieren Sie das App-Embed:

1. Öffnen Sie im Shopify-Adminbereich Online Store > Themes.
2. Klicken Sie beim gewünschten Theme auf Customize.
3. Öffnen Sie in der Seitenleiste Theme settings > App embeds.
4. Suchen Sie Ihre Menü-App in der Liste.
5. Klicken Sie neben dem App-Embed auf den Schalter, um es zu aktivieren.
6. Klicken Sie auf Save.

Duplizieren Sie vor der Bearbeitung Ihr Theme. Das Shopify Help Center weist darauf hin, dass das Duplizieren von Themes es ermöglicht, Änderungen bei Bedarf zu verwerfen, und Helium empfiehlt ebenfalls, das Live-Theme zuerst zu duplizieren.

App-Embeds funktionieren auf Vintage- und Online Store 2.0-Themes. Das Aktivieren eines Embeds betrifft nur das bearbeitete Theme; Entwurfs-Themes aktualisieren den Live-Shop erst nach der Veröffentlichung.

Step 2: Publish the menu inside the app

Das Speichern des Theme-App-Embeds lädt nur das App-Skript; Sie müssen das Menü weiterhin im App-Dashboard freigeben.

Menü-Apps trennen die Embed-Aktivierung von der Veröffentlichung. Beispielsweise betont die Navi+-Dokumentation, dass nach Aktivierung des Store Connector-Embeds “der Vorgang noch nicht abgeschlossen ist”. Sie müssen die App öffnen und auf Publish to website (oder die Veröffentlichungs-Schaltfläche Ihrer App) klicken.

Prüfen Sie vor der Veröffentlichung die Zielregeln, die Ihre App anbietet (zum Beispiel in Navi+):

• Device targeting: Anzeige auf Mobilgeräten, Desktop oder beiden Viewports.
• Page group rules: Menü auf allen Seiten oder nur auf bestimmten Seitengruppen anzeigen.
• URL keyword filtering: Bestimmte Begriffe in der Adressleiste einbeziehen oder ausschließen.

Wenn eine Regel eine Seite ausschließt, wird Ihr Menü dort auch bei aktivem Embed nicht angezeigt.

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

Sobald Ihr Embed aktiv und Ihr Menü veröffentlicht ist, wählen Sie, wie es mit Ihrem Theme-Layout verknüpft wird.

Floating menus (tab bar, floating button, drawer)

App-Embeds schweben oder werden als Overlay in Ihrem Theme angezeigt. Für mobile Tab-Bars, Floating Buttons oder Drawer-Menüs müssen Sie lediglich das Embed aktivieren und das Menü veröffentlichen. Da Elemente über Seiten schweben, ist kein Theme-Header-Anker erforderlich.

Insert before, insert after or replace

Für Desktop-Header oder Mega-Menüs wird die App über einen CSS-Selektor angehängt, der ein Theme-Element identifiziert.

Einige Apps wie Navi+ bieten drei Modi:

• Insert Before: Platziert das Menü direkt über dem ausgewählten Element.
• Insert After: Rendert das Menü direkt unter dem ausgewählten Element.
• Replace: Ersetzt das ausgewählte Element vollständig durch das App-Menü.

Navi+ erlaubt ein Suffix, damit der Selektor gezielt Mobile, Desktop oder beides anspricht.

App block inside a theme section

Die dritte Methode fügt einen App-Block in einen Theme-Abschnitt ein. App-Blöcke erfordern kompatible Themes, und Shopify beschreibt die Unterstützung für Abschnitte, die Teil einer JSON-Vorlage sind. In Navi+ gilt der Block “Menu in Section” nur für Mega-Menüs und Grid-Menüs, nicht für Tab-Bars oder Floating Buttons.

Step 4: Hide the theme’s default menu so you don’t see two

Das Hinzufügen eines App-Menüs kann zu doppelter Navigation führen, wenn native Header-Links sichtbar bleiben. Da die Installation einer App Theme-Code nicht ausblendet, müssen Sie das native Menü verbergen oder ersetzen.

Beseitigen Sie doppelte Menüs auf zwei Wegen:

1. Use Replace mode: Wo unterstützt, tauscht Replace das ausgewählte Theme-Element automatisch aus.
2. Change theme settings: Öffnen Sie im Theme-Editor Header. Shopify weist darauf hin, dass Sie das Standard-Hauptmenü bei den meisten Themes ändern können, indem Sie die Einstellungen im Header-Abschnitt anpassen; heben Sie die Menüzuteilung dort auf.

Löschen Sie Linklisten in Content > Menus keinesfalls; deren Beibehaltung schützt Footer-Links und dient als Ausweichoption.

Bei Verwendung des Replace-Modus kann ein kurzes Aufblitzen des ursprünglichen Menüs auftreten, während das Skript initialisiert. Blenden Sie auf Mobilgeräten den Theme-Hamburger-Button aus, wenn Ihre App einen eigenen Drawer bereitstellt.

Step 5: Preview on desktop and mobile, then check the live store

Die Vorschau im Shopify Theme Customizer reicht nicht aus. Die Helium-Dokumentation weist darauf hin, dass Menüs im Customizer nicht immer korrekt geladen werden, sodass Live-Tests im Storefront erforderlich sind.

So überprüfen Sie Ihre Navigation:

1. Öffnen Sie Ihre Live-Shop-URL in einem privaten Inkognito-Fenster, um Seiten wie ein Kunde zu sehen.
2. Testen Sie auf Desktop-Bildschirmen Dropdowns, Mega-Menü-Panels und Hover-Zustände.
3. Testen Sie auf einem Smartphone Touch-Ziele, mobile Drawer und den Abstand der unteren Tab-Bar.
4. Klicken Sie auf Navigationslinks, um sicherzustellen, dass Kategorien und Produkte ordnungsgemäß öffnen.

Wenn Sie getrennte Desktop- und Mobilmenüs konfiguriert haben, stellen Sie sicher, dass jeder Viewport nur das dafür vorgesehene Menü auslöst. Wenn Sie auf einem duplizierten Theme getestet haben, veröffentlichen Sie es nach der Bestätigung.

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

Wenn ein App-Menü nicht erscheint, prüfen Sie diese Diagnose-Checkliste:

Wenn Ihr Menü weiterhin nicht lädt, wenden Sie sich an das Support-Team Ihrer Menü-App, um app-spezifische Anzeigeprobleme zu untersuchen.

When you change or update your theme

Beim Wechseln von Themes oder Aktualisieren auf neue Versionen werden App-Menüs nicht automatisch übertragen. Wie im Shopify Help Center-Leitfaden zu Theme-Apps beschrieben, sind Apps auf neuen Themes standardmäßig nicht aktiv und müssen reaktiviert werden.

Befolgen Sie diesen Ablauf beim Ändern oder Aktualisieren von Themes:

1. Re-enable app embed: Öffnen Sie im neuen Theme-Editor App embeds, aktivieren Sie Ihre Menü-App und klicken Sie auf Save.
2. Re-add app blocks: Fügen Sie Abschnittsblöcke erneut ein, da neue Themes App-Blöcke nicht automatisch enthalten.
3. Audit CSS selectors: Header-Klassen variieren je nach Theme; aktualisieren Sie Ihren Selektor oder prüfen Sie Navi+-Menüs auf beliebten Shopify-Themes.
4. Hide default menu: Heben Sie in den Header-Einstellungen die Menüzuteilung auf, um doppelte Navigation zu vermeiden.
5. Test on duplicate theme: Nehmen Sie Anpassungen auf einem duplizierten Theme vor, bevor Sie live veröffentlichen.

Trade-offs: when the theme’s own menu is enough

Drittanbieter-Menü-Apps bieten visuelle Flexibilität, sind aber nicht für jeden Shop erforderlich. Wenn Ihr Katalog überschaubar ist, stellt der integrierte Shopify-Editor unter Content > Menus oft die praktischste Wahl dar. Native Menüs unterstützen bis zu zwei Ebenen verschachtelter Dropdowns, was für einen fokussierten Katalog ausreichen kann. Native Menüs hängen zudem nicht von App-Embeds ab, sodass bei Theme-Updates nichts reaktiviert werden muss.

Die Nutzung einer Drittanbieter-Menü-App bringt spezifische Aspekte mit sich:

• Maintenance: Theme-Änderungen erfordern die Reaktivierung von Embeds und die Überprüfung von CSS-Selektoren.
• Initial page load: Das Ersetzen via CSS-Selektor kann gelegentlich ein kurzes Aufblitzen des Originalmenüs verursachen, während das Skript initialisiert.
• Platform limits: Umgebungen wie Shopify Canvas unterstützen Theme-App-Erweiterungen noch nicht.

Lesen Sie unseren Leitfaden zur Auswahl des richtigen Menütyps, um zu entscheiden, ob Ihr Shop ein App-Layout oder native Navigation benötigt.

Example: putting a Navi+ menu live

Um diese Schritte in der Praxis zu sehen, betrachten wir die Veröffentlichung von Menüs in Navi+. Navi+ unterstützt mobile Tab-Bars, ausziehbare Mobile Menus, Floating Buttons und Desktop-Mega-Menüs über standardmäßige Shopify-Theme-App-Erweiterungen.

Für eine mobile Tab Bar, ein Mobile Menu oder einen Floating Button:

1. Öffnen Sie im Shopify-Adminbereich Online Store > Themes > Customize.
2. Öffnen Sie in der Seitenleiste App embeds, aktivieren Sie Store Connector und klicken Sie auf Save.
3. Öffnen Sie in Navi+ Ihr Menü und klicken Sie auf Publish to website.
4. Konfigurieren Sie Anzeigeregeln nach Gerät, Seitengruppe oder URL-Schlüsselwörtern.

Für ein Desktop Mega Menu:

1. Wählen Sie in Navi+ Insert Before, Insert After oder Replace.
2. Geben Sie den Header-CSS-Selektor ein und fügen Sie bei Bedarf ein Mobile- oder Desktop-Suffix hinzu.
3. Auf Online Store 2.0-Themes mit JSON-Vorlagen können Sie alternativ den App-Block Menu in Section verwenden (für Mega-Menüs und Grid-Menüs).

Wenn Ihr Shop Besucher empfängt, testen Sie zuerst auf einem duplizierten Theme, um Layouts sicher zu überprüfen.

Die Navi+-Veröffentlichungsanleitung für jeden Menütyp führt mit Screenshots durch diese Schritte. Nutzen Sie die Navi+ Tab Bar-Veröffentlichungsdokumentation oder die Navi+ Mega Menu-Veröffentlichungsanleitung, um Ihr Layout zuverlässig live zu schalten.

Action checklist

Nutzen Sie diese Checkliste, um sicherzustellen, dass Ihr App-Menü reibungslos startet:

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

Ja, in den meisten Fällen. Shopify legt fest, dass App-Embed-Blöcke nach der Installation standardmäßig deaktiviert sind, sodass Sie sie im Theme-Editor unter Theme Settings > App embeds aktivieren und auf Save klicken müssen.

Why is my app menu not showing after I created it?

Der häufigste Grund ist, dass das App-Embed im aktuellen Live-Theme nicht aktiviert und gespeichert wurde oder das Menü im App-Dashboard noch nicht veröffentlicht wurde; prüfen Sie unsere Diagnosetabelle bezüglich Anzeigeregeln und Selektoren.

Does a menu app delete my Shopify navigation menu?

Nein. Ihre nativen Navigationslinks bleiben in Content > Menus in Ihrem Shopify-Adminbereich unberührt, und der Header-Abschnitt Ihres Themes wählt lediglich aus, welche Menüliste angezeigt werden soll.

Will my app menu still work if I change themes?

Sie müssen das App-Embed in Ihrem neuen Theme reaktivieren, da Apps auf neu veröffentlichten Themes standardmäßig nicht aktiv sind, und eventuell CSS-Selektoren anpassen, falls das neue Theme eine abweichende Header-Struktur aufweist.

Can I use a menu app on a vintage theme?

Ja, App-Embeds werden sowohl auf Vintage-Themes als auch auf Online Store 2.0-Themes unterstützt, wenngleich App-Blöcke nur auf kompatiblen Themes mit JSON-Vorlagen verwendet werden können.

Why can’t I find the app embed in my theme?

Wenn Ihr Theme in Shopify Canvas erstellt oder dupliziert wurde, werden Theme-App-Erweiterungen – einschließlich App-Embeds und App-Blöcke – derzeit noch nicht unterstützt.

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ