Pubblicazione su Shopify

Passo 2: (Shopify) Pubblica il menu sul tuo sito web.

I) METODO 1: INSERISCI (PRIMA O DOPO) QUESTO MENU IN UNA POSIZIONE SPECIFICA SUL TUO SITO WEB, O SOSTITUISCI UN MENU ESISTENTE, UTILIZZANDO UN SELETTORE CSS. (RECOMMENDED)

I.1. Attiva Navi+ su App Embeds

Passo 1: Fai clic su Negozio Online, quindi fai clic su Temi. Suggerimenti: Fai clic con il tasto destro su Negozio Online e seleziona “Apri link in una nuova scheda” per risparmiare tempo.

Passo 2: Seleziona il tema in cui desideri pubblicare il menu. Fai clic: Personalizza

• Se il tuo sito web è nuovo e non ha ancora utenti, sentiti libero di pubblicare il menu senza preoccupazioni: puoi facilmente attivarlo o disattivarlo in qualsiasi momento senza influenzare i visitatori.
• Se il tuo sito web ha già un traffico regolare, sii più cauto. La prassi migliore è creare un Tema duplicato e testare Navi+ su quella versione prima.

Passo 3: Vai su App embeds, trova “Navi+ su tutte le pagine”, e attivalo.

Passo 4: Non dimenticare di fare clic su “Salva” per applicare le modifiche.

Dopo questi 4 passaggi, Navi+ è stato installato sul tuo sito web ed è pronto per essere visualizzato. Tuttavia, il processo non è ancora completo. Torna alla scheda dell’app Navi+ per attivare effettivamente Pubblica Menu.

I.2. Comprendere il Selettore CSS

Un Selettore CSS è un modo per mirare a un elemento HTML specifico sulla tua pagina web. Navi+ lo utilizza per sapere esattamente dove posizionare il tuo menu — se inserirlo prima o dopo un elemento, o sostituirne uno esistente completamente.

Per trovare il selettore CSS corretto per il tuo sito web, puoi utilizzare:

• Modalità Debug — lo strumento integrato di Navi+: passa il mouse su qualsiasi elemento e copia istantaneamente il suo selettore
• Browser DevTools — metodo manuale utilizzando l’ispezionatore del tuo browser

Come trovare il selettore CSS utilizzando Browser DevTools

Puoi chattare con un sostenitore di Navi+ per ricevere aiuto immediato invece di farlo da solo. Tuttavia, se vuoi farlo da solo, segui gli screenshot qui sotto.

I.3. Tre opzioni di pubblicazione

Passo 1: Fai clic sul pulsante Pubblica sul sito web.

Passo 2: Attiva l’interruttore “Pubblica menu con il metodo Inserisci/Sostituisci”.

Passo 3: Inserisci il tuo Selettore CSS e scegli una delle tre opzioni di pubblicazione qui sotto.

Opzione 1: Inserisci Prima (più comune per il Menu a Griglia)

Inserisce il menu Navi+ immediatamente prima dell'elemento selezionato.

Esempio: Selettore CSS main → il Menu a Griglia appare sopra l'area dei contenuti principali della pagina.

Selettori CSS comuni per i temi Shopify (Dawn, Sense, Savor, Horizon):

• main — la maggior parte dei temi Shopify
• #MainContent — tema Shopify Dawn

Non in questa lista? Chattare con un sostenitore di Navi+, o utilizzare Modalità Debug o Browser DevTools.

Opzione 2: Inserisci Dopo

Inserisce il menu Navi+ immediatamente dopo l'elemento selezionato.

Esempio: Selettore CSS header → il Menu a Griglia appare appena sotto l'intestazione.

Selettori CSS comuni per i temi Shopify (Dawn, Sense, Savor, Horizon):

• header — la maggior parte dei temi Shopify
• .header-wrapper — alcuni temi

Non in questa lista? Chattare con un sostenitore di Navi+, o utilizzare Modalità Debug o Browser DevTools.

Opzione 3: Sostituisci

Nella maggior parte dei negozi Shopify, non c'è un elemento Menu a Griglia integrato da sostituire. Inserire Prima main è l'approccio raccomandato.

Se il tuo tema ha un elemento in stile griglia che desideri sostituire, utilizza Modalità Debug o Browser DevTools per trovare il suo selettore.

I.4. Targeting specifico per dispositivo

Puoi controllare se il Selettore CSS si applica a mobile, desktop, o entrambi aggiungendo un suffisso:

Suffisso	Si applica a
(M)	Solo mobile
(D)	Solo desktop
(nessuno)	Sia mobile che desktop

Esempi: main(D) — solo desktop · main(M) — solo mobile · main — entrambe le piattaforme.

II) METODO 2: AGGIUNGI QUESTO MENU COME UNA SEZIONE/BLOCK NEL TEMA SHOPIFY

Questo metodo inserisce il menu aggiungendo un Block/Section nel tuo tema Shopify. È un approccio tradizionale, quindi non lo descriverò in dettaglio. Con questo metodo, non è nemmeno necessario “Attivare Navi+ in App Embeds” come richiesto nel Passo 1 del Metodo 1.

Copia l’ID di incorporamento di questo menu, quindi inseriscilo nel blocco chiamato “Navi+ su Sezione” nelle Sezioni del Tema. Puoi aggiungere un titolo, impostare la larghezza completa e regolare il margine per questa sezione dopo averla aggiunta.

Guida per aggiungere questo menu come sezione/block nel tema Shopify

Di seguito è riportata una guida dettagliata su come inserire un menu Navi+ come sezione/block nel tuo tema Shopify. Questo metodo ti consente di aggiungere il menu in un modo standard, supportato da Shopify, anche se non è flessibile come gli altri metodi forniti da Navi+.

Questo metodo si applica a Mega Menus e Grid Menus. Non si APPLICA a Tabbar, FAB, o Slide Menus.