Barra di navigazione inferiore mobile

Guida pratica Pro Navigation 10 min di lettura

La barra resta sullo schermo mentre i clienti scorrono, come la barra delle schede di un’app mobile, e offre accesso con un tocco a home, menu, carrello, ricerca, chat o una chiamata telefonica. Una voce può anche aprire un piccolo sottomenu, come una voce More con link ad account, contatti e FAQ.

L'editor della barra inferiore: schede delle impostazioni (1) e anteprima dal vivo (2). Cambia il dispositivo dell'anteprima con i pulsanti in basso a sinistra dell'anteprima.

Le schede delle impostazioni sono Voci del menu, Generale, Tipografia, Colori, Posizione, Avanzate e Cronologia versioni.

Crea una barra inferiore

1. Crea la barra

   Nella pagina Home dell’app, fai clic su Aggiungi navigazione inferiore, oppure in Gestore dei menu fai clic su Crea menu e scegli Barra inferiore mobile.

   

   Home: (1) azioni rapide per creare o importare un menu, (2) il pulsante che attiva l'incorporamento dell'app

2. Configura le voci

   In Voci del menu, modifica le voci predefinite e aggiungi le tue. Vedi Aggiungi e modifica le voci.

   

   L'editor della barra inferiore: schede delle impostazioni (1) e anteprima dal vivo (2). Cambia il dispositivo dell'anteprima con i pulsanti in basso a sinistra dell'anteprima.

3. Personalizza la barra

   Regola le schede Generale, Tipografia e Colori. Vedi Personalizza la barra.

   

   Impostazioni generali, inclusi la posizione del sottomenu e lo stile di apertura.

4. Scegli dove compare

   In Posizione, scegli i dispositivi e la posizione sullo schermo. Vedi Scegli dove compare la barra.

   

   Attiva la barra su dispositivi mobili (1) e desktop (2), poi scegli una posizione.

5. Salva e pubblica

   Fai clic su Salva, poi su Pubblica in alto a destra. Vedi Pubblica la barra.

Aggiungi e modifica le voci

1. Mostra le azioni della voce

   In Voci del menu, passa il mouse su una voce per mostrare Modifica, Duplica ed Elimina. Trascina una voce dalla sua maniglia per riordinarla.

   

   Passa il mouse su una voce per modificarla, duplicarla o eliminarla.

2. Aggiungi voci e sottomenu

   Fai clic su Aggiungi voce per aggiungere una voce a quel livello, oppure su Aggiungi sottomenu su una voce per annidare voci al suo interno. Le voci annidate si aprono come sottomenu, fino a tre livelli.

3. Imposta icona, titolo e link

   Fai clic su Modifica per aprire Modifica voce di menu. Scegli un’Icona (fai clic su Modifica), inserisci un Titolo, poi fai clic sul campo Link.

   

   Fai clic sul campo Link per scegliere l'azione della voce.

4. Scegli un’azione

   In Seleziona link, fai clic su Seleziona accanto a un’azione (1). La casella Link (2) riceve l’inizio del link, ad esempio /collections/ per Prodotti per collezione. Completalo come mostrato nella colonna Sintassi, ad esempio /collections/summer-sale, e fai clic su Aggiornamento (3).

   

   Fai clic su Seleziona (1), completa il link (2), poi fai clic su Aggiornamento (3).

Impostazioni della voce

Icona

Fai clic su Modifica per scegliere un’icona o caricare un’immagine.

Titolo

Il testo sotto l’icona.

Link

Cosa succede al tocco. Fai clic per aprire Seleziona link (vedi Azioni delle voci).

Apri in una nuova scheda

Apre il link in una nuova scheda del browser.

Descrizione

Breve testo facoltativo mostrato con la voce.

Dimensione dell'icona

Dimensione dell’icona in px.

Riquadro > Raggio del bordo

Arrotonda gli angoli del riquadro della voce, da 0 a 100 px.

Riquadro > Spaziatura interna

Spazio all’interno del riquadro della voce, da 0 a 100 px.

Riquadro > Posizione

Sposta la voce a sinistra (negativo) o a destra (positivo), da -100 a 100 px.

Colore

Colori di testo, icona, sfondo dell’icona e sfondo solo per questa voce, ciascuno con un colore al passaggio del mouse. Reimposta le impostazioni ripristina i colori della barra.

Badge

Una piccola etichetta sulla voce, con Titolo, Colore del testo del badge e Colore di sfondo del badge.

Visibilità

Nasconde la voce su alcuni dispositivi o per alcuni clienti, oppure la mostra solo tra due date. Vedi Regole di visualizzazione.

Avanzate

Nome classe extra aggiunge una classe CSS per il CSS personalizzato. Divisore aggiunge una linea divisoria accanto alla voce.

Azioni delle voci

Seleziona link raggruppa le azioni in otto sezioni. Fai clic sull’icona info accanto a un’azione per vedere un esempio.

1. Link alle pagine interne del negozio

URL breve esatto /[your-url], Pagina iniziale /, Tutti i prodotti /collections/all, Prodotti per collezione /collections/[collection-handle], Un dettaglio del prodotto /products/[your-product-shorturl], Tutti i post del blog /blogs/news, Un dettaglio dei post del blog /blogs/news/[your-blog-shorturl], Un dettaglio della pagina /pages/[your-page-shorturl], Pagina carrello /cart, Pagina di ricerca /search, Modulo di contatto /pages/contact.

2. Apri pannelli (compatibile con i temi più diffusi)

Apri Menu (mobile) gm-open:MobileMenu, Apri carrello gm-open:Cart, Apri la ricerca gm-open:Search.

3. Apri altre applicazioni (ad es. Shopify Inbox)

Apri Chatbox gm-open:Inbox apre la chat di Shopify Inbox.

4. Scorri nella pagina

Scorri verso l’alto gm-scroll:Top, Scorri fino in fondo gm-scroll:Bottom, Scorri fino a un elemento della pagina gm-scroll:OnPage(htmlElement).

5. Chiama una funzione JavaScript

gm-javascript:Function esegue una funzione JavaScript sul tuo sito.

6. Strumenti di assistenza

Fare una chiamata tel:, Invia un messaggio SMS sms:, Invia un’e-mail mailto:, Chatta con Messenger, Whatsapp, Telegram, Line o Zalo.

7. Condividi

Copia l’URL corrente gm-share:CopyUrl, Condividi su Facebook gm-share:Facebook, Condividi su X (Twitter) gm-share:X.

8. Link a siti esterni

URL completo (qualsiasi indirizzo web completo), Non reindirizzare #.

Sezioni da 2 a 4: apertura di pannelli, altre applicazioni e scorrimento.

Sezioni 5 e 6: JavaScript e strumenti di supporto.

Sezioni 7 e 8: condivisione e link esterni.

Esempi:

• gm-scroll:Top(150): scorre in cima, lasciando un margine di 150 px.
• gm-scroll:OnPage(#page-title): scorre fino all’elemento con l’ID page-title.
• tel:+0123456789: chiama questo numero.
• sms:+012345678?body=I need help: apre un SMS con il testo già inserito.
• https://wa.me/0123456789: apre una chat WhatsApp. Usa il prefisso internazionale, senza +.

Personalizza la barra

Impostazioni generali, inclusi la posizione del sottomenu e lo stile di apertura.

Generale

Menu principale (Livello 1)

Raggio degli angoli del menu

Raggio degli angoli della barra, da 0 a 50 px.

Spaziatura delle voci

Spazio tra le voci, da 0 a 50 px.

Spaziatura interna orizzontale · Spaziatura interna verticale

Spazio orizzontale e verticale all’interno di ogni voce, da 0 a 100 px.

Usa l'ombra del riquadro

Aggiunge un’ombra attorno alla barra.

Sottomenu (Livello 2, 3)

Posizione del sottomenu

Sinistra, Destra, Centro o larghezza Piena.

Stile di apertura del sottomenu

Dropdown (flyout) o Pannello laterale.

Larghezza del sottomenu

Da 100 a 900 px.

Spaziatura interna orizzontale · Spaziatura interna verticale

Spazio orizzontale e verticale all’interno di ogni voce del sottomenu, da 0 a 100 px.

Icona e testo

Dimensione dell'icona · Dimensione icona sottomenu

Dimensioni delle icone per la barra e per i suoi sottomenu, da 0 a 100 px.

Spazio del menu principale: testo - icona · Spazio del sottomenu: testo - icona

Spazio tra icona e testo, da 0 a 50 px.

Avanzate

Nascondi il testo del menu

Solo icone nella barra.

Nascondi il testo del sottomenu

Solo icone nei sottomenu.

Nascondi descrizione sottomenu

Nasconde le descrizioni delle voci nei sottomenu.

Tipografia

Imposta Famiglia di caratteri, Spessore del carattere e Dimensione del carattere per Menu principale, Testo del sottomenu e Descrizione del sottomenu. Usa un font personalizzato funziona come in Regola i caratteri del menu.

Colori

Colore del menu principale

Colore del testo, Colore del testo al passaggio del mouse, Colore dell’icona, Colore dell’icona al passaggio del mouse, Colore di sfondo, Colore di sfondo al passaggio del mouse.

Colore del sottomenu

Gli stessi sei colori, per i sottomenu.

Altro colore del menu

Colore della descrizione, Colore della descrizione al passaggio del mouse, Colore del divisore.

Scegli dove compare la barra

1. Scegli i dispositivi

   In Posizione, attiva Mostra su mobile (1), Mostra su desktop (2), o entrambi.

   

   Attiva la barra su dispositivi mobili (1) e desktop (2), poi scegli una posizione.

2. Scegli una posizione

   Fai clic su un layout sotto ciascun interruttore:

   • Mobile: in basso, in alto, al centro a sinistra, al centro a destra, in basso a sinistra o in basso a destra.
   • Desktop: in basso al centro, in basso a sinistra, in basso a destra, in basso a tutta larghezza, al centro a sinistra o al centro a destra.

3. Nascondi durante lo scorrimento (facoltativo)

   Seleziona Nascondi quando scorri verso il basso così la barra non copre i contenuti mentre il cliente scorre verso il basso.

Impostazioni avanzate

Disponibilità per mercato

Mostra la barra solo nei mercati selezionati. Vedi Mostra i menu per mercato.

Indice z del menu

Ordine di sovrapposizione. Aumentalo se altri elementi coprono la barra; diminuiscilo se la barra copre i popup.

Opacità del menu

Trasparenza della barra, da 0 a 100%.

Margine inferiore

Spazio tra la barra e il fondo dello schermo.

Foglio di stile / CSS

CSS personalizzato per la barra.

Javascript

JavaScript personalizzato per la barra.

Regole di visualizzazione

Dove	Impostazione	Effetto
Scheda Posizione	Mostra su mobile, Mostra su desktop	Mostra o nasconde l’intera barra per dispositivo.
Scheda Avanzate	Disponibilità per mercato	Mostra l’intera barra solo nei mercati selezionati.
Voce > Visibilità	Nascondi sul desktop, Nascondi su mobile	Nasconde una voce su un dispositivo.
Voce > Visibilità	Nascondi se hai effettuato l’accesso, Mostra solo se hai effettuato l’accesso	Mostra una voce solo agli ospiti, oppure solo ai clienti che hanno effettuato l’accesso.
Voce > Visibilità	Pubblicazione secondo piano	Mostra una voce solo tra Data di inizio e Data di fine.

Pubblica la barra

1. Pubblica

   Fai clic su Salva, poi su Pubblica in alto a destra, scegli il tema e conferma. La finestra funziona come per un mega menu (vedi Pubblica un menu). Lo stato passa da Bozza a Attivo.

   

   Finestra Pubblica menu: (1) Scegli il tema, (2) Anteprima e Pubblica

2. Controlla il tuo negozio online

   Apri il tuo negozio online su un telefono, oppure in una finestra del browser stretta.

Modifica o rimuovila

• Toglila dal tuo negozio online: fai clic su Disattiva in cima all’editor.
• Ripristina una versione precedente: apri la scheda Cronologia versioni. Vedi Cronologia versioni.

Risoluzione dei problemi

La barra non compare nel mio negozio online

La barra viene caricata tramite l’incorporamento dell’app, come tutti i menu. Assicurati che l’incorporamento dell’app sia attivo per quel tema: vedi Attiva l’incorporamento dell’app.

Un'azione Apri pannelli non fa nulla

Le azioni Apri pannelli aprono il pannello del menu, il pannello del carrello o la ricerca del tuo tema, quindi funzionano con i temi più diffusi. Se sul tuo non succede nulla, collega invece la pagina (ad esempio Pagina carrello /cart), oppure contattaci.

La barra si sovrappone a un pulsante della chat o a un banner dei cookie

Aumenta Margine inferiore o cambia Indice z del menu nella scheda Avanzate, oppure scegli un’altra posizione nella scheda Posizione.

Pagine correlate

• Attiva l'incorporamento dell'appAttiva l'incorporamento dell'app Globo Mega Menu per consentire al tuo menu di caricarsi nel negozio.
• Aggiungi un'icona a una voce di menuMostra un'icona della libreria o una tua immagine caricata accanto al titolo di una voce di menu.
• Cronologia versioniRecupera una versione salvata in precedenza di un menu caricandola nell'editor e salvandola.
• Piani e fatturazioneConfronta i piani di Globo Mega Menu, avvia una prova gratuita e passa a un piano superiore o inferiore oppure annulla il piano.

Questa pagina ti è stata utile?

Segnala un problema