Come creare un menu Shopify simile alla demo del tema (Impostazioni, app o codice)
Esamini la demo curata di un tema Shopify, apprezzi la sua ampia navigazione a più colonne arricchita da immagini promozionali e procedi all’installazione sul tuo negozio. Eppure, una volta aperta la vetrina online, il risultato appare completamente diverso: un modesto menu a discesa testuale a colonna singola, piatto e pieno di spazi vuoti.
Il menu della demo di un tema non è un prodigio inspiegabile. È la combinazione tra le impostazioni dell’header del tema e una struttura a tre livelli popolata con dati di prova. Puoi ottenere esattamente lo stesso risultato individuando la tipologia di navigazione, configurando le opzioni native del tema, ricorrendo a un’applicazione dedicata o scrivendo codice personalizzato, gestendo l’esperienza mobile in modo separato.
Quick answer: how to make your Shopify menu look like the demo
Il menu della demo di un tema deriva solitamente dalle impostazioni header del tema e da un menu nidificato ricco di contenuti di prova, non dal solo menu predefinito. Per replicarlo, identifica il tipo di menu, crea fino a tre livelli in Content > Menus, attiva l’opzione header corrispondente, quindi aggiungi immagini o usa un’app se il tema non include quello stile.
Per ricostruire questa presentazione sul tuo store, segui questi quattro passaggi essenziali:
- Identificare il tipo di menu della demo: Esamina se la demo adotta un menu a discesa semplice, un mega menu a più colonne, un pannello laterale drawer o una barra di schede inferiore.
- Creare livelli di menu nidificati: Struttura fino a tre livelli di collegamenti all’interno di Content > Menus nel pannello di controllo Shopify.
- Attivare le impostazioni Header (Header settings): Apri l’editor del tema e abilita i blocchi di layout di navigazione corrispondenti.
- Aggiungere immagini o utilizzare un’app mega menu: Carica immagini in evidenza nei blocchi del tema oppure installa un’applicazione di navigazione se il tema non supporta le colonne.
Considera che la navigazione su smartphone risponde a criteri ergonomici differenti rispetto al desktop; per questo motivo occorre progettare il drawer o la barra inferiore mobile in modo mirato.
Why your Shopify menu doesn’t look like the theme demo
Il netto contrasto visivo tra la vetrina di presentazione e il tuo negozio appena configurato disorienta molti commercianti. Comprendere i motivi tecnici alla base di questa differenza evita lunghe ore di tentativi a vuoto.
Demo sample content
Una demo di tema è allestita per mostrare il tema al meglio. Una demo contiene sample products and content to help you get a feel of how the theme looks and works. Le colonne del menu sono riempite di categorie, fotografie e banner che il tuo negozio non ha ancora.
Quando provi un tema nella tua area amministrativa, you can try it by previewing the theme in your Shopify admin. Tuttavia, il sistema adotta i tuoi contenuti reali: you will need to preview the theme using whatever data is live on your site. Se il tuo catalogo include solo poche collezioni con scarse referenze o se il menu presenta solo voci di primo livello, il tema non dispone di elementi da impaginare. Il materiale dimostrativo (Demo sample content) non viene riversato automaticamente nel tuo account. Un catalogo scarno tende a produrre un pannello scarno e asimmetrico.
The theme’s own menu style
Numerosi temi offrono più di un’impostazione visiva per la navigazione. In una discussione della community di Shopify sul tema Prestige, ad esempio, un esercente chiede perché il suo menu non somigli a quello della demo; il supporto Shopify risponde che the Prestige theme also has two different menu styles, and this is likely why your menu looks different. Se utilizzi questo template, consulta il nostro articolo per add a mega menu to Prestige.
Inoltre, le guide di supporto Shopify precisano che the main menu and drop-down menus display in different locations in your online store depending on your theme. Lo stesso menu può quindi comparire in un punto diverso o in una forma diversa da un tema all’altro.
Un ulteriore equivoco riguarda i preset stilistici (theme styles). Spesso si presume che cambiando preset cambi anche la struttura del menu. Al contrario, i preset riguardano impostazioni globali: each theme style is a set of pre-selected theme settings that configure site-wide colors, fonts, product options, and more. Poiché un preset modifica principalmente parametri estetici come tonalità cromatiche e caratteri tipografici, è improbabile che il passaggio a un nuovo stile trasformi un semplice menu a discesa in un mega menu a più colonne.
Step 1: Identify the menu type the demo uses
Prima di intervenire sui parametri del pannello di amministrazione, apri la demo del tema sia su computer desktop sia su smartphone. Esamina attentamente come si comporta il menu al passaggio del cursore o al tocco sulle voci principali.
Nelle ricerche di usabilità condotte dal Nielsen Norman Group, il mega menu viene definito come a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. I loro studi evidenziano che mega menus show everything at a glance, so users can see rather than try to remember.
Fai riferimento alla seguente tabella per riconoscere con precisione la tipologia di navigazione applicata:
| Tipo di menu | Come riconoscerlo nella demo | Dove configurarlo |
|---|---|---|
| Dropdown | Si presenta come un elenco verticale stretto a colonna singola (Single column list) posizionato sotto la voce principale. | Creato in Content > Menus. |
| Mega Menu | Si dispiega in un ampio pannello a più colonne (Multi-column panel) su tutta la larghezza dell’header, con sottocategorie e una scheda visiva (Featured image). | Spesso costruito con 3 livelli nidificati (Nested menu levels) in Content > Menus, più opzioni mega menu nei Header settings (o un’apposita app). |
| Pannello off-canvas | Un pannello laterale scorrevole richiamabile tramite l’icona a tre barre: most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon. | Si configura nelle impostazioni di navigazione mobile del tema o nei blocchi drawer dell’header. |
| Bottom tab bar | Una barra orizzontale fissa alla base dello schermo mobile con alcune icone strategiche situate nella zona di comfort del pollice. | Introdotta mediante opzioni avanzate del tema, codice Liquid o un’applicazione mobile dedicata. |
Durante l’analisi della demo, annota: quante colonne vengono generate, se sono presenti immagini di anteprima e a quale profondità giungono le categorie. Un Drawer menu ordina efficacemente le sezioni secondarie, mentre una Bottom tab bar assicura l’accesso immediato alle azioni principali su mobile. Per comprendere la configurazione più adatta alla tua gamma merci, leggi il nostro approfondimento su choosing the right menu type.
Illustrazione concettuale: Raffronto tra un menu a discesa a colonna singola e un mega menu a più colonne.
Figura 1: Illustrazione concettuale — Dropdown Single column list a confronto con un Mega Menu Multi-column panel dotato di Featured image.
Step 2: Check your theme’s header settings and menu structure
Se il tuo tema supporta nativamente l’impostazione riscontrata nella demo, puoi realizzarla senza investimenti software aggiuntivi. La procedura prevede due azioni coordinate: organizzare la gerarchia dei link nel pannello e abilitare i relativi blocchi nell’editor del tema.
Build three levels in Content > Menus
Tutti i menu nativi di Shopify si impostano nell’area amministrativa. L’Help Center di Shopify illustra: you can add, remove, change, and view your links and menus from Content > Menus in your Shopify admin (nelle versioni precedenti del pannello la voce si trova sotto Online Store > Navigation).
Per generare un prospetto a più colonne, è necessario disporre le voci su livelli nidificati (Nested menu levels). I vincoli della piattaforma stabiliscono che the top-level item can have up to two levels of nested drop-down menus, offrendo una profondità massima di tre livelli:
- Livello 1 (Voce principale): Il reparto primario visibile nella barra di intestazione (es. «Uomo»).
- Livello 2 (Intestazione di colonna): Il raggruppamento che funge da titolo per la colonna (es. «Abbigliamento», «Scarpe», «Accessori»).
- Livello 3 (Collegamenti finali): Le singole collezioni o prodotti posizionati sotto ogni titolo (es. «Camicie», «Giacche», «Pantaloni»).
Alcuni temi Shopify hanno bisogno di questo terzo livello per mostrare un mega menu. Lo sviluppatore Fluorescent chiarisce nei propri documenti: for the mega navigation, you first need to create a nested menu with 3 levels of links. Se ti fermi al livello 2, un tema di questo tipo può mostrare gli elementi come un comune Single column list invece di un esteso Multi-column panel.
Turn on the mega menu in Header settings
Dopo aver salvato la gerarchia delle voci, naviga su Online Store > Themes > Customize per aprire l’editor del tema. Clicca sulla sezione Header nella barra laterale sinistra per accedere ai Header settings.
Shopify evidenzia che the sections and blocks that are available in the theme editor depend on your theme and theme version. I nomi delle opzioni variano a seconda del tema: cerca nella sezione Header l’opzione per lo stile del menu e consulta la documentazione del tema. Se utilizzi il tema Dawn, segui la nostra guida per add a mega menu to Dawn.
Nei temi che consentono l’inserimento di elementi promozionali, puoi associare un’immagine direttamente nel blocco del menu: select or upload a Mega nav featured image to display inside the mega navigation menu. L’aggiunta di una Featured image contribuisce a dare quel tocco sofisticato ammirato nella demo. Se la sezione di intestazione non mostra opzioni per mega menu, esamina la documentazione del fornitore del tema o contatta il supporto dedicato.
Il video ufficiale Shopify che segue illustra concretamente la procedura di nidificazione dei menu nel pannello:
Step 3: Rebuild the demo menu with a mega menu app
Se il tuo tema non prevede alcuna opzione nativa per mega menu o se intendi presentare schede prodotto arricchite non supportate dallo schema Liquid di base, installare una Mega menu app specializzata costituisce la via più efficiente.
Una soluzione applicativa esterna si rivela vantaggiosa in tre scenari principali:
- Assenza di opzioni native: Il tema permette unicamente la visualizzazione di menu a discesa verticali classici.
- Esigenze di visual merchandising: Desideri mostrare prodotti, collezioni, immagini o icone nelle singole colonne.
- Tutela della navigazione nei cambi tema: Intendi preservare l’architettura dei menu intatta anche qualora decidessi di rinnovare il tema in futuro.
La sequenza tipica per realizzare un menu tramite applicazione include cinque tappe:
- Scegliere un modello base: Individua un layout che rispecchi l’articolazione delle colonne della demo presa a modello.
- Mappare le colonne: Definisci le categorie di livello 2 come intestazioni e inserisci i collegamenti di livello 3 pertinenti.
- Inserire componenti visivi: Associa le immagini delle collezioni o banner dedicati agli spazi predisposti.
- Controllare i dispositivi: Verifica proporzioni e facilità di lettura su schermi desktop e display mobili.
- Attivare tramite Theme App Extension: Abilita l’app nell’editor del tema. Con l’attuale architettura Shopify, merchants won’t need to manually edit their theme code.
Opta per applicazioni basate su editor visivi drag-and-drop che mantengano pulito il codice Liquid originario. Per indicazioni su spaziatura e pesi visivi all’interno delle colonne, consulta la nostra guida su mega menu best practices.
Step 4: Make the mobile menu match the demo
Un errore ricorrente nel tentativo di replicare un menu demo è limitare l’attenzione agli schermi desktop. La fruizione su dispositivi touch portatili risponde a dinamiche completamente diverse.
Le analisi di usabilità del Baymard Institute rilevano che during usability testing we consistently observe that mobile navigation is particularly difficult for users. Su display compatti, most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon.
Gli elementi visivi ideati per il desktop difficilmente si adattano automaticamente su mobile. Nei temi realizzati da Fluorescent, ad esempio, le specifiche precisano che this image is not displayed on mobile. Un ampio pannello a più colonne raramente sta nello schermo di uno smartphone senza scorrimento orizzontale o pulsanti minuscoli.
Per garantire che la navigazione mobile mantenga l’eccellenza della demo:
- Drawer menu: Trascrivi la tua classificazione in un Drawer menu a scorrimento verticale. Assicurati che le voci di livello 1 si aprano agevolmente mostrando i livelli 2 e 3, preservando la medesima struttura logica (Same structure) del desktop.
- Bottom tab bar: Se vuoi avere alcune pagine chiave sempre a portata di mano, integra il drawer con una Bottom tab bar permanente. Posizionare pochi accessi chiave (Home, Cerca, Categorie, Carrello, Account) alla base dello schermo mantiene le funzioni vitali a portata immediata di pollice.
Per approfondire le linee guida per dispositivi mobili, esamina i nostri articoli dedicati al mobile drawer menu e all’adozione di una bottom tab bar for mobile.
Illustrazione concettuale: Struttura di mega menu desktop riutilizzata su mobile tramite menu a cassetto drawer e barra inferiore.
Figura 2: Illustrazione concettuale — Categorie del mega menu desktop che preservano la Same structure nel Drawer menu mobile e nella Bottom tab bar.
Custom Liquid code vs. an app: trade-offs
Quando le opzioni native del tema risultano limitate, i titolari di negozi valutano spesso se sviluppare codice Liquid su misura o adottare un’applicazione specialistica. Ogni scelta presenta vantaggi e impegni operativi ben definiti:
| Soluzione | Impegno di sviluppo | Controllo del design | Rischio con aggiornamenti tema | Target ideale |
|---|---|---|---|---|
| Impostazioni native del tema | Basso (Configurazione di blocchi esistenti nell’editor) | Medio (Vincolato ai campi messi a disposizione dal tema) | Basso (Any customizations made to your theme using the theme editor are copied over) | Negozi il cui tema include già il layout visto nella demo |
| Applicazione Mega Menu | Moderato (Scelta di un template e abbinamento visivo) | Elevato (Colonne flessibili, immagini e icone senza codice: merchants won’t need to manually edit their theme code) | Da basso a moderato (File del tema intatti, verificare compatibilità negli avanzamenti di versione) | Negozi sprovvisti di mega menu o orientati alla portabilità |
| Codice Liquid su misura | Elevato (Richiede competenze avanzate di HTML, CSS e Liquid) | Il più alto (limitato soprattutto dal tuo codice e dalle tue competenze) | Elevato (Il codice personalizzato deve essere reintegrato manualmente dopo l’aggiornamento) | Brand con programmatori interni dedicati a requisiti specifici |
Le impostazioni native rappresentano la via più lineare. La documentazione di Shopify indica che any customizations made to your theme using the theme editor are copied over and applied to the updated theme.
Lo sviluppo di codice proprietario offre la massima libertà creativa. Come indicato nei forum di Shopify, can be done using custom code on the theme. Tuttavia, il codice manuale comporta manutenzione continua: a ogni aggiornamento rilasciato dal fornitore del tema, i blocchi modificati potrebbero non essere trasferiti automaticamente. Shopify avverte chiaramente: you should always save a copy of any customized code before updating your theme, poiché potresti dover reinserire manualmente ogni riga.
Una Mega menu app basata su Theme App Extension offre un compromesso ideale. Poiché merchants won’t need to manually edit their theme code, i file del tema rimangono inalterati. Va considerato però che l’app può comportare costi ricorrenti, e che Shopify ricorda come some apps might not be compatible with a new theme.
Per analizzare le soglie delle soluzioni native, consulta il nostro studio sui limits of theme menus.
Common mistakes when copying a demo menu
Nel tentativo di riprodurre il menu di una demo, i gestori di negozi incappano frequentemente in cinque errori caratteristici:
- Collezioni vuote e assenza di fotografie: I menu dimostrativi appaiono curati perché ogni voce rinvia a categorie ricche di prodotti con immagini impeccabili. Se le tue collezioni contano appena uno o due articoli o non hanno immagini copertina, il menu sembrerà spoglio e trascurato.
- Gerarchia piatta nel pannello amministrativo: Inserire tutte le voci al livello 1 o 2 in Content > Menus preclude al tema la possibilità di formattare le colonne. Alcuni temi hanno bisogno di tutti e tre i livelli per mostrare il mega menu.
- Mancato collaudo su dispositivi mobili: Allestire un sontuoso pannello a più colonne per computer senza testarlo su smartphone porta spesso a menu disfunzionali; alcuni temi nascondono le immagini del mega menu su mobile.
- Adottare una struttura imponente per un piccolo catalogo: I negozi demo sono pensati per mostrare un catalogo completo. Se hai solo poche collezioni, forzare il negozio in un mega menu a più colonne può disorientare i clienti e appesantire la navigazione.
- Presumere che il cambio di preset modifichi i menu: Modificare il preset stilistico rinnova la palette colori e la tipografia, ma non aggiunge collegamenti né crea blocchi di menu.
Where Navi+ fits
Se il tuo tema non prevede la tipologia di menu ammirata nella demo, puoi ricostruire quel formato in Navi+ partendo da un modello preimpostato, adattando colonne e immagini al tuo catalogo reale.
Navi+ è progettato per superare le limitazioni di layout della navigazione senza richiedere modifiche manuali al codice del tema:
- Desktop Mega Menu: Build mega menus with products, collections, images, icons, and flexible layouts grazie a un editor visivo intuitivo.
- Menu mobile e drawer: Create mobile menus, drawer menus, and hamburger menus for easier store browsing.
- Barra di schede inferiore fissa: Add sticky bottom tab bars with icons and labels for app-like mobile navigation.
- Configurazione no-code: Generate menus with AI, templates, drag-and-drop editing, and no coding required.
All’interno di Navi+, puoi selezionare un layout iniziale dalla schermata «Create from a template», regolare colonne e immagini e agganciare direttamente le tue collezioni Shopify. Inoltre, il menu mobile di Navi+ può incorporare la struttura del tuo Desktop Mega Menu, consentendo a desktop e mobile di condividere la stessa tassonomia strutturata fino a 3 livelli.
È essenziale ricordare che i template rappresentano un’intelaiatura di partenza. L’app non duplica magicamente il menu privato di un altro negozio; dovrai sempre associare le tue collezioni e caricare i tuoi contenuti fotografici.
Per verificare come Navi+ si integra con i temi Shopify più diffusi, esplora la nostra rassegna su Navi+ menus on Shopify themes.
Il video di analisi sottostante esamina la costruzione del menu di un tema Shopify, con mega menu, header fisso e barra a schede:
Pre-publish checklist
Prima di rendere accessibile ai clienti il nuovo menu, esamina questi otto punti di controllo:
- Tipo di menu accertato: Verificato se la demo di riferimento impiega un menu a discesa, un mega menu, un pannello drawer o una barra inferiore.
- Tre livelli strutturati: Controllato che in Content > Menus le voci siano distribuite su livelli 1, 2 e 3 per le sezioni a colonne.
- Contenuto collezioni verificato: Accertato che ogni collezione collegata contenga articoli disponibili e immagini curate.
- Testi alternativi inseriti: Verificato che tutte le immagini promozionali nel menu presentino un testo alternativo (alt text) descrittivo.
- Impostazioni header attivate: Abilitata la corretta opzione di menu o l’estensione app nell’editor del tema.
- Verifica ergonomica mobile: Testata l’apertura del drawer e la comodità d’uso della barra delle schede su uno smartphone reale.
- Salvataggio di sicurezza del codice: Creata una copia completa del tema prima di effettuare modifiche manuali a Liquid.
- Pianificazione post-aggiornamento: Registrate le app installate per accertarne la compatibilità dopo futuri aggiornamenti del tema.
FAQ
Why doesn’t my theme’s menu look like the demo?
I negozi demo contengono prodotti e testi dimostrativi, e molti temi dispongono di diversi stili di menu. Poiché l’anteprima fa riferimento ai tuoi dati reali, collezioni prive di prodotti genereranno un menu scarno.
How many levels can a Shopify menu have?
Una voce principale su Shopify può ospitare fino a due sottolivelli nidificati, per un totale di tre livelli di navigazione. Alcuni temi hanno bisogno di questo terzo livello per mostrare un mega menu.
Do I need an app or custom code for a mega menu like the demo?
Controlla prima le opzioni header nell’editor del tema, variabili a seconda di tema e versione. Se il layout manca, puoi ricorrere a un’app mega menu senza toccare il codice oppure inserire codice Liquid previa copia di backup.
Will my menu break when I update my theme?
Le impostazioni effettuate nell’editor del tema vengono conservate automaticamente durante gli aggiornamenti. Al contrario, le modifiche manuali al codice Liquid richiedono spesso un reintegro manuale, e la compatibilità delle app va verificata.
Can mobile look the same as desktop?
Su smartphone la navigazione viene solitamente raccolta dietro un’icona ad hamburger, e alcuni temi non mostrano le immagini del mega menu su schermi piccoli. Si raccomanda di organizzare un drawer o una barra inferiore specificamente per il mobile.
Sources
- Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Sections and blocks in the theme editor. help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks
- Shopify Help Center — Updating themes. help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Help Center — Adding, previewing, and buying themes. help.shopify.com/en/manual/online-store/themes/adding-themes
- Out of the Sandbox — What to look for when trying out Shopify theme demos. outofthesandbox.com/blogs/shopify-theme-blog/shopify-theme-buying-tips
- Shopify Community — Trying the Prestige theme but my menu doesn’t look like the one the demo. community.shopify.com/t/trying-the-prestige-theme-but-my-menu-doesn-t-look-like-the-one-the-demo/28768
- Fluorescent Help — Context Mega Navigation. help.fluorescent.co/context/pages/header/mega-navigation
- Fluorescent Help — Style Presets. help.fluorescent.co/ira/theme-styles/style-presets
- Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well/
- Baymard Institute — Mobile Navigation Menu Usability Benchmark. baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- Shopify Dev Docs — Theme App Extensions. shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Shopify Community — How can I set my product collections to a stylish and useful navigation page like this Shopify store. community.shopify.com/t/how-can-i-set-my-product-collections-to-a-stylish-and-useful-navigation-page-like-this-shopify-store/333164
- Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.