Creare una barra di menu Shopify con link Home, Catalogo e Chi siamo per desktop e mobile

Il primo menu di navigazione di un negozio online ha bisogno soltanto di tre collegamenti mirati — Home, Catalogo e Chi siamo. Creato una sola volta in Contenuto > Menu, compare nell’intestazione per computer desktop, nel pannello a comparsa per dispositivi mobili e può essere fissato in una comoda barra inferiore su smartphone per rimanere sempre visibile.

Risposta rapida: come creare una barra di menu con Home, Catalogo e Chi siamo

Crea una pagina Chi siamo in Negozio online > Pagine, entra in Contenuto > Menu, apri il menu principale e inserisci tre elementi: Home (tipo di link Home page), Catalogo (/collections/all o una collezione) e Chi siamo (la pagina appena creata). Salva le impostazioni: il tema mostrerà il menu nell’header desktop e nel drawer mobile. Aggiungi una barra a schede per gli smartphone.

I 5 passaggi essenziali:

1. Creare la pagina Chi siamo in Negozio online > Pagine e impostarla su Visibile.
2. Aprire Contenuto > Menu nel pannello di amministrazione Shopify e selezionare il menu principale.
3. Aggiungere i tre collegamenti: Home (tipo Home page), Catalogo (/collections/all o una collezione) e Chi siamo (la pagina creata).
4. Salvare il menu e verificare nelle opzioni del tema che l’header stia utilizzando questo menu.
5. Collaudare su dispositivi mobili: controllare l’apertura del pannello laterale e aggiungere una barra inferiore per un accesso costante.

Cosa inserire in una barra di menu con Home, Catalogo e Chi siamo

All’avvio di un’attività di e-commerce non occorrono gerarchie di navigazione ponderose. Un menu compatto con tre sole voci garantisce orientamento immediato senza disperdere l’attenzione degli utenti:

• Home: Rappresenta il porto sicuro che consente di ritornare in qualsiasi momento alla vetrina d’ingresso del sito.
• Catalogo: È il fulcro commerciale in cui i clienti esaminano i prodotti, consultano le collezioni e finalizzano gli acquisti.
• Chi siamo: Illustra la storia e i valori del marchio, offrendo ai nuovi visitatori un motivo concreto per fidarsi del negozio.

Restringere il menu iniziale a tre collegamenti tutela la leggibilità su qualsiasi schermo. I test di usabilità del Nielsen Norman Group evidenziano come i menu sempre visibili offrano le migliori prestazioni con 4 o 5 opzioni di primo livello. Preservare tre link primari permette di mantenere le etichette per esteso anche su telefoni compatti, riservando spazio per future voci come Contatti o Domande frequenti.

Passo 1: Creare la pagina Chi siamo e scegliere la destinazione del Catalogo

Prima di comporre il menu nell’interfaccia, predisponi le pagine di destinazione in modo che ogni voce punti a un contenuto già online.

Creare la pagina Chi siamo

Nell’admin di Shopify, recati in Negozio online > Pagine e seleziona Aggiungi pagina. Assegna il titolo Chi siamo o La nostra storia. Scrivi una sintesi descrittiva incentrata sui tuoi prodotti, sulle origini dell’attività e sulla cura per il cliente. La documentazione ufficiale di Shopify sulle pagine chiarisce che le pagine ospitano contenuti stabili nel tempo, mentre la guida Shopify per le pagine Chi siamo ne sottolinea l’importanza nel rassicurare il consumatore. Imposta la visibilità su Visibile e salva. Ricorda che la creazione di una About page non la inserisce da sola nel menu; occorre collegarla manualmente nella gestione del menu.

Definire la destinazione del link Catalogo

Stabilisci l’indirizzo a cui far puntare il Catalog link:

In base alla documentazione del Centro assistenza Shopify per il catalogo, qualsiasi negozio include l’URL /collections/all con ordinamento da A a Z per impostazione predefinita. Per cambiare l’ordine, crea una collezione con handle all, oppure indirizza il link a una collezione predefinita.

Passo 2: Costruire il menu in Contenuto > Menu

Dopo aver pubblicato i contenuti di destinazione, assembla le voci nella gestione della navigazione.

Figura 1: Illustrazione concettuale (Concept illustration) — Passo 2: Costruire il menu in Contenuto > Menu

Aggiungere la Home

In Contenuto > Menu, seleziona il menu principale e fai clic su Aggiungi voce di menu. Assegna il nome Home. Nel selettore Link, seleziona Home page. Con questo tipo di link dedicato, Shopify associa in automatico l’indirizzo principale del tuo negozio.

Aggiungere il Catalogo

Fai clic su Aggiungi voce di menu e digita Catalogo (oppure Negozio). Nella casella Link, scegli una collezione dall’elenco oppure usa la pagina con tutti i prodotti su /collections/all. La documentazione Shopify sulla modifica dei menu raccomanda di non incollare URL manuali, poiché possono spezzare il legame e causare errori 404. Scegli dall’elenco ogni volta che la destinazione è presente.

Aggiungere la voce Chi siamo

Seleziona Aggiungi voce di menu e scrivi Chi siamo. Nel menu Link, accedi alla sezione Pagine e seleziona la pagina pubblicata nel Passo 1.

Ordinare e salvare le voci

Controlla le tre voci nel pannello riepilogativo:

Afferra l’icona con i puntini a sinistra di ciascuna voce per trascinarla nell’ordine desiderato: Home, Catalogo, Chi siamo. La vetrina pubblica adotterà esattamente questo schema. Shopify consente fino a 200 modifiche non salvate: premi con frequenza Salva menu. Puoi anche inserire emoji nei nomi per ravvivare la barra grafica.

Passo 3: Mostrare il menu nell’intestazione su desktop

La creazione nel pannello non implica che il menu compaia da solo nell’intestazione; la posizione a schermo è determinata dalle opzioni del tema grafico.

Per assegnare il menu all’header per computer, vai su Negozio online > Temi e premi Personalizza sul tema attivo. Nella colonna sinistra seleziona la sezione Header (Intestazione). Seleziona lì il menu a tre voci predisposto. I nomi delle impostazioni variano a seconda del tema, quindi cerca l’opzione del menu in quella sezione.

Su schermi di grandi dimensioni, accertati che il tema disponga i link in riga orizzontale anziché racchiuderli dietro un’icona. I riscontri di usabilità del Nielsen Norman Group sulla navigazione desktop provano che i collegamenti visibili promuovono la scoperta dei contenuti rispetto ai menu nascosti. Verifica che il tuo Desktop header menu mostri chiaramente tutte e tre le voci.

Come appare lo stesso menu sui dispositivi mobili

Se i monitor da scrivania hanno una larghezza ragguardevole, gli smartphone devono fare i conti con uno spazio orizzontale estremamente limitato.

Figura 2: Illustrazione concettuale (Concept illustration) — Come appare lo stesso menu sui dispositivi mobili

Gran parte dei temi Shopify contrae l’intestazione su smartphone inserendo i collegamenti all’interno di un pannello laterale (Menu drawer) attivabile tramite l’icona ad hamburger. Le analisi di NN/g confermano che i menu nascosti indeboliscono la fruizione rispetto agli elementi esposti. Trattandosi di un menu composto da soli tre link, consentire agli utenti di visualizzarli ed entrarvi senza dover prima aprire un pannello migliora sensibilmente la scorrevolezza d’uso.

Qualora necessitassi di schemi di navigazione distinti per dispositivo, puoi consultare la nostra guida su come mostrare menu diversi su desktop e mobile.

Passo 4: Aggiungere una barra a schede inferiore per dispositivi mobili

Se molti dei tuoi acquirenti navigano da smartphone, un pulsante ad hamburger tiene nascosti i tuoi link finché non lo toccano.

Una Bottom tab bar fissa i link principali lungo il bordo inferiore dello schermo. La ricerca di NN/g sulla navigazione mobile osserva che le barre a schede sono persistenti: restano visibili sia che l’utente scorra la pagina sia che non lo faccia.

I temi Shopify convenzionali solitamente non includono barre a schede inferiori integrate, quindi di solito serve un’applicazione o del codice personalizzato. Nel configurarla, replica con precisione le tre voci (Home, Catalogo, Chi siamo) con le stesse URL del menu desktop. Una navigazione speculare evita qualsiasi spaesamento quando l’utente si sposta da uno schermo all’altro.

Aggiungere icone e verificare su ogni dimensione di schermo

Le icone aumentano la rapidità di riconoscimento dei pulsanti, ma la loro adozione richiede prudenza progettuale.

Mentre le emoji si digitano liberamente nei testi dell’admin, l’uso di icone grafiche in formato SVG richiede funzionalità del tema o un’app di navigazione. Gli standard usabili del Nielsen Norman Group consigliano di adottare un modello Icon with label (icona con etichetta testuale), poiché i simboli privi di didascalia generano frequenti equivoci. Se fai uso di un’app, consulta il nostro tutorial su come associare un’icona a ciascuna voce di menu.

Accertati inoltre che i comandi touch rispettino i criteri di accessibilità. Il criterio 2.5.8 delle linee guida W3C WCAG 2.2 prescrive un’area di tocco minima di 24×24 pixel CSS (con alcune eccezioni).

Verifica l’interfaccia prima del rilascio:

1. Monitor desktop: Verificare che i tre link rimangano orizzontali senza spezzarsi su più righe.
2. Schermo tablet: Controllare il breakpoint di passaggio tra link aperti e pulsante hamburger.
3. Smartphone in verticale: Assicurarsi che il drawer si apra con scorrevolezza e mostri i tre link.
4. Smartphone in orizzontale: Verificare che la barra non ingombri eccessivamente la schermata.
5. Verifica interattiva: Premere ogni collegamento per accertarsi che reindirizzi alla pagina corretta.

Problemi comuni e soluzioni

Qualora il menu presentasse anomalie, consulta questi interventi tipici e fai riferimento al nostro articolo per risolvere i collegamenti interrotti nei menu di navigazione Shopify:

Il link restituisce una schermata di errore 404

Se Catalogo o Chi siamo mostra una pagina 404, la causa risiede solitamente in un URL manuale errato. Modifica la voce in Contenuto > Menu selezionando la risorsa direttamente dalle liste native di Shopify.

La pagina Chi siamo non compare nell’intestazione

Hai creato il testo ma non compare alcun pulsante. I contenuti creati in Negozio online > Pagine non entrano autonomamente nel menu. Devi aggiungere manualmente il link in Contenuto > Menu e controllare che lo stato della pagina sia Visibile.

Il link Catalogo presenta un ordine prodotti errato

La pagina si carica regolarmente, ma i prodotti non seguono la sequenza desiderata. L’indirizzo /collections/all ordina nativamente per nome alfabetico. Crea una collezione con handle all.

L’intestazione non recepisce le ultime modifiche

Hai salvato il menu nell’admin ma il sito continua a proporre la versione precedente. In Negozio online > Temi > Personalizza, apri il modulo Header e controlla a quale menu sia effettivamente agganciato.

Il tocco sulla voce principale non avvia la navigazione

Se inserisci dei sottomenu sotto Catalogo e premendo Catalogo non succede nulla, ciò dipende dal codice del tema. La maggior parte dei temi attuali tratta le voci con menu a discesa come interruttori di apertura anziché come link di navigazione.

Compromessi: quando un menu a tre link non è più sufficiente

Un’impostazione su tre voci rappresenta una solida base di partenza, ma l’espansione del catalogo richiederà gradualmente una struttura più articolata.

Sviluppare il menu oltre le tre voci

Quando l’assortimento merceologico comprende molteplici categorie, una sola voce Catalogo può risultare limitante. In tale frangente, è opportuno creare un sottomenu gerarchico sotto Catalogo. Shopify consente fino a 2 livelli di annidamento per i menu a discesa. Nel caso di cataloghi molto vasti su computer, puoi inoltre trasformare il Catalogo in un mega menu articolato su colonne e provvisto di immagini promozionali.

Guarda il seguente video ufficiale di Shopify Help Center dedicato all’organizzazione dei menu a discesa:

Vincoli delle barre inferiori su mobile

Nonostante la barra a schede fornisca un’immediata comodità d’uso, gli studi del NN/g ricordano che essa si addice unicamente a strutture con poche opzioni. Oltre le 4 o 5 voci la barra risulta affollata. Inoltre, una barra fissa occupa costantemente un margine verticale di display. Se il tuo pubblico acquista quasi totalmente da desktop, la barra inferiore per smartphone può non essere indispensabile.

Il ruolo di Navi+

Predisporre i collegamenti per Home, Catalogo e Chi siamo nell’admin Shopify richiede poco tempo, ma le impostazioni base dei temi concedono pochissima flessibilità sull’esperienza mobile.

Se vuoi ancorare Home, Catalogo e Chi siamo alla base di ogni schermo smartphone corredando ogni scheda di icona e didascalia, Navi+ Tab Bar ti permette di farlo senza toccare il codice sorgente del tema. Il menu principale di Shopify rimane al suo posto per l’header del computer, mentre i tre pulsanti restano sempre a portata di mano sul telefono.

Quando la tua attività espanderà i propri orizzonti, gli strumenti di Navi+ supporteranno la tua crescita:

• Navi+ Mobile Menu: Realizza un menu laterale su misura coerente con il tuo stile visivo, sincronizzando le voci da Shopify in un solo tocco.
• Navi+ Desktop Mega Menu: Organizza grandi collezioni in schemi a colonne corredati da riquadri promozionali (con supporto fino a 3 livelli di profondità).

Per orientarti verso la tipologia di menu più consona alla tua offerta, leggi il nostro articolo su come scegliere il menu ideale per il tuo negozio Shopify.

Lista di controllo operativa

Segui questo elenco di verifiche prima di lanciare la tua barra a tre voci:

• Pubblicare la pagina Chi siamo: Verificare che sia stata creata e contrassegnata come Visibile in Negozio online > Pagine.
• Stabilire il target di Catalogo: Scegliere tra /collections/all o una collezione con handle all.
• Accedere alla gestione menu: Aprire Contenuto > Menu e selezionare il menu principale.
• Aggiungere la Home: Impostare il tipo Home page per assegnare automaticamente l’indirizzo base.
• Aggiungere il Catalogo: Selezionare la collezione desiderata dal menu a discesa delle collezioni.
• Aggiungere Chi siamo: Selezionare la pagina pubblicata dall’elenco interno Pagine.
• Ordinare e salvare: Regolare la sequenza delle voci e premere Salva menu.
• Agganciare il menu al tema: Nel personalizzatore del tema, confermare che l’Header utilizzi questo menu.
• Controllare il drawer mobile: Aprire l’anteprima su smartphone per ispezionare il pannello laterale.
• (Opzionale) Configurare la barra inferiore: Fissare 3 schede con testo e icone alla base dello smartphone.
• Testare i link attivi: Cliccare ogni collegamento su computer e telefono per escludere qualsiasi anomalia.

Domande frequenti

Verso quale indirizzo deve puntare il link Catalogo?

I negozi Shopify offrono per impostazione predefinita l’URL /collections/all, che elenca tutti i prodotti visibili in ordine alfabetico. Per ridefinire la graduatoria, genera una collezione con handle all o punta il link a una specifica collezione.

Perché la pagina Chi siamo non compare nel menu?

La redazione di una pagina in Negozio online > Pagine non ne determina l’inclusione spontanea nella barra del sito. È necessario entrare in Contenuto > Menu, aprire il menu e collegarla manualmente selezionandola tra le pagine.

Lo stesso menu si mostra automaticamente sui dispositivi mobili?

Sì, gran parte dei temi trasferisce le voci dell’header desktop all’interno del pannello laterale a scomparsa richiamabile con l’icona ad hamburger. Poiché l’aspetto visivo è regolato dal tema, verifica sempre la resa su uno smartphone.

Serve un’applicazione per installare una barra a schede inferiore?

I temi standard per Shopify prevedono l’header e il drawer a comparsa, ma non includono una barra fissa alla base. Per implementarla è consigliabile ricorrere a un’applicazione oppure a codice personalizzato, mantenendo pochi link chiave.

È consentito inserire icone accanto alle voci di menu?

Le emoji possono essere digitate direttamente nei campi del nome nell’admin. Per impiegare icone grafiche vettoriali in formato SVG occorre il supporto del tema o un’applicazione di navigazione, avendo cura di affiancare sempre una dicitura chiara all’icona.

Perché il link del menu produce un errore 404?

Inserire un URL a mano può causare disallineamenti qualora gli handle delle pagine o delle collezioni vengano modificati in seguito. Selezionare le risorse dai menu interni guidati di Shopify preserva l’integrità del collegamento nel tempo.

Fonti

• Shopify Help Center: Editing menus
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Add and edit pages
• Shopify Help Center: Change catalog page
• Shopify Help Center: About us page
• Nielsen Norman Group: Mobile navigation patterns
• Nielsen Norman Group: Visible navigation on mobile
• Nielsen Norman Group: Desktop navigation not hamburger
• Nielsen Norman Group: Hamburger menus and discoverability
• Nielsen Norman Group: Icon usability
• W3C: WCAG 2.2 Target Size (Minimum)