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

Hai creato la navigazione in un’app di menu, ma non compare sul tuo storefront. Aggiungere un menu creato in un’app a Shopify richiede una regola fondamentale: il menu risiede nell’app, non nel tema. Diventa visibile solo dopo aver attivato l’app embed del tema, pubblicato nell’app e impostato il posizionamento.

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

Un menu creato in un’app risiede nell’app, non in Shopify Content > Menus, e appare solo una volta collegato al tema. Attiva l’app embed, salva, pubblica nell’app, scegli il posizionamento, nascondi il menu del tema e verifica il negozio live.

Segui questi cinque passaggi:

1. Nel pannello Shopify, vai su Online Store > Themes > Customize, apri Theme settings > App embeds, attiva la tua app e clicca su Save.
2. Nel pannello di controllo dell’app di menu, clicca su pubblica per rilasciare il menu.
3. Scegli il posizionamento: floating overlay, selettore CSS (insert/replace) o blocco app.
4. Nascondi o dissocia il menu predefinito dell’header del tema per evitare duplicati.
5. Visualizza l’anteprima per desktop e mobile, quindi verifica lo storefront live in una finestra di navigazione in incognito.

Se non hai ancora strutturato la tua navigazione, inizia con la nostra guida passo passo per app di menu.

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

In Shopify, gestisci i collegamenti nativi da Content > Menus, e i temi li mostrano automaticamente tramite le impostazioni della sezione Header.

Le app di menu conservano i tuoi menu all’interno dell’app. Secondo la documentazione per sviluppatori di Shopify, i blocchi app embed sono disattivati per impostazione predefinita dopo l’installazione, e i temi non includono automaticamente i blocchi app. L’installazione di un’app non inserisce da sola il menu sullo storefront. I tuoi menu in Content > Menus restano dove sono.

L’editor integrato di Shopify consente a una voce di primo livello di avere fino a due livelli di sottomenu a discesa nidificati. Per layout più complessi, i commercianti creano il menu direttamente in un’app di menu di navigazione.

Questo video ufficiale di Shopify illustra l’editor di menu integrato, che opera in modo del tutto separato rispetto all’app di menu.

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

Il primo passo consiste nell’attivare l’app embed del tema. Secondo Shopify, gli app embed sono elementi forniti dalle app che fluttuano o vengono visualizzati come overlay nel tema.

Per attivare l’app embed:

1. Nel pannello di controllo Shopify, apri Online Store > Themes.
2. Clicca su Customize accanto al tema che desideri modificare.
3. Nella barra laterale, apri Theme settings > App embeds.
4. Individua la tua app di menu nell’elenco.
5. Accanto all’app embed, attiva l’interruttore per abilitarlo.
6. Clicca su Save.

Prima di effettuare modifiche, duplica il tuo tema. Il Centro assistenza Shopify ricorda che duplicare il tema consente di annullare le modifiche se necessario, e anche Helium suggerisce di duplicare prima il tema live.

Gli app embed funzionano sui temi vintage e su Online Store 2.0. L’attivazione di un embed riguarda solo il tema modificato; i temi in bozza non aggiornano il negozio live finché non vengono pubblicati.

Step 2: Publish the menu inside the app

Salvare l’app embed del tema carica solo lo script; devi comunque rilasciare il menu all’interno del pannello dell’app.

Le app di menu separano l’attivazione dell’embed dalla pubblicazione. Ad esempio, la documentazione di Navi+ evidenzia che dopo aver attivato l’embed Store Connector, “il processo non è ancora completo”. Devi aprire l’app e cliccare su Publish to website (o sul pulsante di pubblicazione della tua app).

Prima di pubblicare, verifica le regole di destinazione offerte dalla tua app (ad esempio in Navi+):

• Device targeting: Visualizzare su mobile, desktop o entrambi i formati di schermo.
• Page group rules: Mostrare il menu in tutte le pagine o solo in gruppi di pagine specifici.
• URL keyword filtering: Includere o escludere termini precisi nella barra degli indirizzi.

Se una regola esclude una pagina, il menu non apparirà lì anche con l’embed attivo.

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.

Una volta che l’embed è attivo e il menu è pubblicato, scegli come collegarlo al layout del tema.

Floating menus (tab bar, floating button, drawer)

Gli app embed fluttuano o si posizionano come overlay sul tema. Per barre di schede mobili, pulsanti fluttuanti o menu a cassetto, devi solo attivare l’embed e pubblicare nell’app. Fluttuando sopra la pagina, non richiedono alcun ancoraggio nell’header.

Insert before, insert after or replace

Per gli header desktop o i mega menu, l’app si aggancia tramite un selettore CSS che identifica un elemento del tema.

Alcune app, come Navi+, offrono tre modalità:

• Insert Before: Posiziona il menu direttamente sopra l’elemento selezionato.
• Insert After: Mostra il menu direttamente sotto l’elemento selezionato.
• Replace: Sostituisce completamente l’elemento selezionato con il menu dell’app.

Navi+ consente di aggiungere un suffisso affinché il selettore punti specificamente a mobile, desktop o entrambi.

App block inside a theme section

Il terzo metodo inserisce un blocco app in una sezione del tema. I blocchi app richiedono temi compatibili e Shopify ne descrive il supporto per le sezioni che fanno parte di un template JSON. In Navi+, il blocco “Menu in Section” si applica solo a Mega Menu e Grid Menu, non a Tab Bar o pulsanti fluttuanti.

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

Aggiungere un menu di un’app può creare una doppia barra di navigazione se i collegamenti nativi dell’header restano visibili. Poiché l’installazione di un’app non nasconde il codice del tema, devi nascondere o sostituire il menu nativo.

Puoi eliminare i menu duplicati in due modi:

1. Use Replace mode: Se supportata, la modalità Replace sostituisce automaticamente l’elemento del tema selezionato.
2. Change theme settings: Nell’editor del tema, apri Header. Shopify ricorda che puoi cambiare il menu principale predefinito nella maggior parte dei temi modificando le impostazioni nella sezione Header, dissociando il menu da lì.

Non eliminare mai le liste di link in Content > Menus; mantenerle preserva i link del footer e funge da backup.

Quando utilizzi la modalità Replace, può verificarsi un breve sfarfallio del menu originale durante l’inizializzazione dello script. Su mobile, nascondi il pulsante hamburger del tema se l’app fornisce già il proprio cassetto.

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

L’anteprima nell’editor di personalizzazione di Shopify non è sufficiente. La documentazione di Helium sottolinea che i menu non caricano sempre correttamente nel customizer, richiedendo test diretti sul negozio live.

Per verificare la tua navigazione:

1. Apri l’URL del tuo negozio live in una finestra di navigazione in incognito per visualizzare la pagina come un cliente.
2. Effettua test su schermi desktop, controllando menu a discesa, pannelli mega menu e stati hover.
3. Effettua test su smartphone, esaminando aree di tocco, cassetti mobili e margine inferiore della barra delle schede.
4. Clicca sui link di navigazione per accertarti che categorie e prodotti si aprano correttamente.

Se hai impostato menu separati per desktop e mobile, assicurati che ciascun formato attivi solo il menu dedicato. Se hai testato su un tema duplicato, pubblicalo dopo la verifica.

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.

Se il menu dell’app non viene visualizzato, consulta questa lista di controllo diagnostica:

Se il menu continua a non caricarsi, contatta il team di supporto dell’app di menu per approfondire eventuali anomalie di visualizzazione specifiche dell’applicazione.

When you change or update your theme

Quando cambi tema o effettui un aggiornamento di versione, i menu dell’app non vengono trasferiti automaticamente. Come illustrato nella guida del Centro assistenza Shopify sulle app per temi, le app non sono attive per impostazione predefinita sui nuovi temi e devono essere riattivate.

Segui questa sequenza quando cambi o aggiorni temi:

1. Re-enable app embed: Nell’editor del nuovo tema, apri App embeds, attiva la tua app di menu e clicca su Save.
2. Re-add app blocks: Reinserisci i blocchi di sezione, poiché i nuovi temi non includono i blocchi app automaticamente.
3. Audit CSS selectors: Le classi dell’header variano tra i temi; aggiorna il selettore o consulta i menu Navi+ sui temi Shopify più diffusi.
4. Hide default menu: Nelle impostazioni Header, rimuovi l’assegnazione del menu predefinito per evitare doppie navigazioni.
5. Test on duplicate theme: Configura le regolazioni su un tema duplicato prima di pubblicare sul negozio live.

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

Le app di menu di terze parti offrono grande flessibilità visiva, ma non sono necessarie per ogni negozio. Se il tuo catalogo è semplice, l’editor integrato di Shopify in Content > Menus rappresenta spesso la scelta più pratica. I menu nativi supportano fino a due livelli di sottomenu a discesa nidificati, che possono bastare per un catalogo lineare. Non dipendono da app embed, eliminando la necessità di riattivare alcunché durante gli aggiornamenti del tema.

L’adozione di un’app di menu di terze parti comporta alcune attenzioni specifiche:

• Maintenance: I cambi di tema impongono di riattivare gli embed e controllare i selettori CSS.
• Initial page load: La sostituzione tramite selettore CSS può talvolta provocare un breve sfarfallio del menu originale durante l’inizializzazione dello script.
• Platform limits: Ambienti come Shopify Canvas non supportano ancora le estensioni per app dei temi.

Consulta la nostra guida per scegliere la tipologia di menu adatta per stabilire se il tuo negozio necessiti di un’app o se la navigazione nativa sia adeguata.

Example: putting a Navi+ menu live

Per vedere questi passaggi all’opera, osserviamo la pubblicazione di menu con Navi+. Navi+ supporta Tab Bar mobili, menu scorrevoli mobili, Floating Buttons e Desktop Mega Menu attraverso le estensioni per app di tema standard di Shopify.

Per una Tab Bar, un Mobile Menu o un Floating Button su mobile:

1. Nel pannello Shopify, apri Online Store > Themes > Customize.
2. Nella barra laterale, apri App embeds, attiva Store Connector e clicca su Save.
3. In Navi+, apri il tuo menu e clicca su Publish to website.
4. Configura le regole di visualizzazione per dispositivo, gruppo di pagine o parole chiave URL.

Per un Desktop Mega Menu:

1. In Navi+, scegli Insert Before, Insert After o Replace.
2. Inserisci il selettore CSS dell’header, aggiungendo un suffisso mobile o desktop se necessario.
3. Sui temi Online Store 2.0 con template JSON, puoi anche utilizzare il blocco app Menu in Section (per Mega Menu e Grid Menu).

Se il tuo negozio ha traffico attivo, esegui i test prima su un tema duplicato per verificare i layout in sicurezza.

La guida alla pubblicazione di Navi+ per ciascun tipo di menu illustra questi passaggi con schermate dettagliate. Esplora la documentazione di pubblicazione della Tab Bar Navi+ o la guida di pubblicazione del Mega Menu Navi+ per lanciare la tua navigazione in totale serenità.

Action checklist

Usa questa checklist rapida per assicurare un lancio ottimale del menu della tua app:

• 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?

Sì, nella maggior parte dei casi. Shopify specifica che i blocchi app embed sono disattivati per impostazione predefinita dopo l’installazione di un’app, pertanto devi attivarli nell’editor del tema da Theme Settings > App embeds e cliccare su Save.

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

Il motivo più comune è che l’app embed non è stato attivato e salvato sul tema live corrente, oppure il menu non è stato ancora pubblicato nel pannello di controllo dell’app; consulta la nostra tabella diagnostica per controllare regole e selettori.

Does a menu app delete my Shopify navigation menu?

No. I tuoi link di navigazione nativi rimangono intatti in Content > Menus nel pannello di Shopify, e la sezione Header del tuo tema seleziona semplicemente quale elenco visualizzare.

Will my app menu still work if I change themes?

Dovrai riattivare l’app embed nel nuovo tema perché le app non sono attive per impostazione predefinita sui temi appena pubblicati, e potresti dover aggiornare i selettori CSS se il nuovo tema presenta una struttura di header diversa.

Can I use a menu app on a vintage theme?

Sì, gli app embed sono supportati sia sui temi vintage sia su Online Store 2.0, sebbene i blocchi app possano essere usati solo su temi compatibili con template JSON.

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

Se il tema è stato creato o duplicato in Shopify Canvas, le estensioni per app dei temi — compresi app embed e blocchi app — non sono ancora supportate.

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