Pubblicazione su Shopify

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

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. Seleziona le impostazioni di visualizzazione e pubblica il menu.

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

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

Passo 3: Seleziona il selettore CSS corretto e metodo di sostituzione/inserimento

In questa guida, ci concentreremo su 2 modi: inserire questo menu sotto l’intestazione o sostituire il Mega Menu predefinito. Puoi anche utilizzare questo metodo in modo creativo trovando e applicando altri selettori CSS per attivare il menu.

Come inserire questo menu sotto l'intestazione del sito web?

Per fare ciò, identifica semplicemente il selettore CSS dell'intestazione del tuo sito web e inseriscilo nella casella di testo. Abbiamo già trovato i selettori CSS per alcuni dei temi più popolari per te, elencati di seguito.

  1. Selettori CSS per alcuni temi popolari e gratuiti.. da Shopify come Dawn, Sense, Savor, Horizon..
header
  1. Non in questo elenco, non preoccuparti
- Puoi chattare con un sostenitore di Navi+ per assistenza immediata: ci vogliono solo pochi minuti per trovare il selettore CSS.

- Oppure, puoi seguire la guida di auto-aiuto nei prossimi argomenti (Subito dopo questo argomento).
Come sostituire il Mega Menu predefinito?

Per fare ciò, identifica semplicemente il selettore CSS dell'intestazione del tuo sito web e inseriscilo nella casella di testo. Abbiamo già trovato i selettori CSS per alcuni dei temi più popolari per te, elencati di seguito.

  1. Selettori CSS per alcuni temi popolari e gratuiti.. da Shopify come Dawn, Sense, Savor, Horizon..
.header-menu
  1. Non in questo elenco, non preoccuparti
- Puoi chattare con un sostenitore di Navi+ per assistenza immediata: ci vogliono solo pochi minuti per trovare il selettore CSS.

- Oppure, puoi seguire la guida di auto-aiuto nei prossimi argomenti (Subito dopo questo argomento).
Come trovare il selettore CSS sul tuo sito web?

Puoi chattare con un sostenitore di Navi+ per ricevere assistenza immediata invece di farlo da solo.\ Tuttavia, (1) questo ti aiuterà a capire l'idea principale, e (2) se vuoi farlo da solo, segui le istruzioni qui sotto.

I.3. Importante! Ottimizza la velocità del Mega Menu e l’esperienza utente (Modalità di sostituzione)

Quando sostituisci un menu con un altro, Navi+ aspetta che il vecchio menu venga visualizzato e poi lo sostituisce istantaneamente con il nuovo. Anche se questo avviene quasi immediatamente, c’è ancora un breve momento in cui appare il vecchio menu, il che può confondere gli utenti.

Con questo passaggio, puoi nascondere completamente il vecchio menu e mostrare invece un effetto di caricamento. Questo fa sembrare il sito web più veloce e migliora l’esperienza utente.

Navi+ fornisce una soluzione semplice per ottimizzare l'esperienza utente e la velocità come segue

Perché hai bisogno di farlo? Navi+ non è già veloce?

Navi+ è molto veloce. È completamente distribuito su una CDN leader con latenza molto bassa (circa 100 ms) e può servire milioni di clienti senza rallentare.

Tuttavia, Navi+ funziona ancora all'interno dell'ecosistema Shopify. Shopify ha le proprie regole di caricamento:

  1. Shopify dà priorità al caricamento delle proprie risorse prima.
  2. Poi Shopify carica il contenuto del tema.
  3. Infine, Shopify carica il contenuto dell'app, ma non in un ordine specifico.

Questo significa che se stai utilizzando più app, Navi+ potrebbe a volte essere caricato più tardi del previsto. Ecco perché può sembrare più lento in alcuni casi.

Qual è la mia soluzione?

Attualmente, Navi+ ha alta priorità quando viene caricato sui siti web Shopify. Tuttavia, c'è ancora un certo ritardo. Affronteremo questi problemi uno per uno qui:

Nota:

  • Aggiungi il suffisso (M) se vuoi che si applichi solo su mobile.
  • Aggiungi il suffisso (D) se vuoi che si applichi solo su desktop.
  • Non lasciare alcun suffisso se vuoi che si applichi su entrambe le piattaforme.

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

Questo metodo inserisce il menu aggiungendo un Blocco/Sezione 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 denominato “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/blocco nel tema Shopify

Di seguito è riportata una guida dettagliata su come inserire un menu Navi+ come sezione/blocco 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.