Pubblicazione su Shopify

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

2.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, fai più attenzione. 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.

2.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 (visibile solo quando aperto dall’utente)”.

Passo 3: Seleziona il metodo di visualizzazione

Metodo 1: Apri questo menu da un altro elemento del menu Navi+ utilizzando la sintassi open:NaviMenu

Questo metodo consente di aprire un menu a scorrimento quando l’utente fa clic o tocca un elemento del menu di un altro menu Navi+ (ad esempio: su una tab bar, un FAB nell’angolo in basso dello schermo o un mega menu). Scopi principali di questo metodo:

Scopo 1: Maggiore visibilità e esperienza utente mostrando la mappa del sito completa nel menu a scorrimento mantenendola facile da accedere.

Il menu a scorrimento è ideale per visualizzare la mappa completa del tuo sito grazie al suo ampio spazio e layout flessibile, rendendolo perfetto per mostrare l'intero catalogo prodotti, collegamenti a pagine chiave, blog, strumenti di supporto, ecc. Tuttavia, il menu a scorrimento è spesso meno visibile per impostazione predefinita. Per migliorare la scoperta, puoi utilizzare un altro menu Navi+ (come una tab bar) per presentare i tuoi collegamenti più importanti e riconoscibili, e posizionare un elemento di menu evidenziato che attiva il menu a scorrimento. Questo garantisce una migliore visibilità e coinvolgimento degli utenti per il menu a scorrimento.

Scopo 2: Profondità illimitata del menu con una grande struttura di menu flessibile (Solo Navi+)

Invece di mostrare un popup con spazio limitato quando viene cliccato un elemento del menu, puoi aprire un altro menu a scorrimento con tre livelli e più modi per presentare informazioni. Questo può essere ripetuto per altri elementi del menu—o anche per lo stesso menu a scorrimento—consentendoti di creare una profondità virtualmente illimitata per i tuoi menu Navi+.

Metodo 2: Quando un elemento UI (definito da un selettore CSS come #id_of_element o .class_name) viene cliccato o toccato, questo menu verrà visualizzato.

Questo è senza dubbio il metodo migliore e più comunemente usato con il Menu a scorrimento.
In questa guida, ci concentreremo sul sostituire il menu hamburger predefinito del sito web su mobile.
Puoi anche applicare questo metodo in modo creativo trovando e utilizzando altri selettori CSS per attivare il menu.

Come sostituire il menu hamburger predefinito del tuo sito web con il Menu a scorrimento Navi+ (Guida popolare)?

Su la maggior parte dei siti web Shopify, il menu hamburger predefinito è generato dalla versione desktop tramite design reattivo. Di conseguenza, è solitamente molto semplice, ha una profondità superficiale e manca di supporto per icone, immagini o layout avanzati. Sostituirlo con un Menu a scorrimento Navi+ è una scelta comune e pratica per sfruttare le funzionalità avanzate di Navi+.

Per fare ciò, identifica semplicemente il selettore CSS dell'icona del menu hamburger 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 gratuiti e popolari.. da Shopify come Dawn, Sense, Savor, Horizon..
#Details-menu-drawer-container
  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 comprendere l'idea principale, e (2) se vuoi farlo da solo, segui le istruzioni qui sotto.

2.3. Importante! Ottimizza la velocità del menu a scorrimento, aggiungi un effetto di caricamento e previeni menu duplicati

Non è qualcosa che devi risolvere subito, ma a lungo termine è importante per l’esperienza del menu a scorrimento creata da Navi+. Prima che Navi+ sostituisca completamente il vecchio menu a scorrimento, il menu originale del tema è ancora attivo. Per un breve momento—circa mezzo secondo—se un utente carica il menu e tocca rapidamente il pulsante hamburger (un caso raro, ma comunque possibile), il vecchio menu del tema potrebbe apparire e causare un glitch visivo.

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

Perché devi farlo? Navi+ non è già veloce?

Navi+ è molto veloce. È completamente distribuito su una CDN leader con latenza molto bassa (circa 100ms) 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. Quindi Shopify carica il contenuto del tema.
  3. Infine, Shopify carica il contenuto delle 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:

Menu a scorrimento: Aggiungi un effetto di caricamento e blocca il selettore di attivazione

Molto semplice: inserisci semplicemente il selettore CSS che usi per il Menu a scorrimento nella sezione di incorporamento dell'app Navi+ (vedi immagine qui sotto).

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 suffisso se vuoi che si applichi su entrambe le piattaforme.