Mega Menu PrestaShop: creare una navigazione che converte

La maggior parte dei consigli sui mega menu si ferma a "rendi le categorie più facili da sfogliare". È la base, non l'obiettivo. La barra di navigazione è l'unico elemento che ogni visitatore vede in ogni pagina e, in un negozio con un catalogo profondo, decide silenziosamente dove andranno gli acquirenti dopo: verso un prodotto, verso un vicolo cieco o di nuovo su Google. Questa guida spiega come trattare il menu come uno spazio di merchandising, non come un semplice elenco: cosa inserirci, in che ordine mostrarlo e come capire se sta davvero spostando ordini, invece di sembrare soltanto moderno.

Se sei in una fase precedente — il menu a discesa predefinito trabocca e vuoi solo un pannello pulito, facile da scansionare — parti dalla guida orientata alla navigazione in Mega Menu per PrestaShop: rendere le categorie facili da sfogliare. Questo articolo parte dal presupposto che tu abbia già deciso di crearne uno e voglia che faccia davvero il suo lavoro.

Ultima revisione giugno 2026 — riflette PrestaShop 9 e il tema Hummingbird, ora tema front office predefinito nella generazione PrestaShop 9.

Perché il menu predefinito di PrestaShop limita le conversioni

Il menu superiore predefinito di PrestaShop viene fornito come modulo ps_mainmenu, registrato sull'hook displayTop — il punto di navigazione richiamato nell'header sia dal tema Classic sia dal più recente Hummingbird. Può essere configurato per mostrare gli elementi dell'albero categorie in una barra orizzontale con menu a discesa a cascata, insieme ad altri link — pagine CMS, produttori, fornitori o URL personalizzati — nell'header. Per cinque-dieci categorie va davvero bene: non sostituirlo solo perché "mega menu" suona più importante.

Il limite compare appena il catalogo diventa profondo o ampio, ed è un limite alle conversioni, non solo estetico:

• Le colonne strette a cascata penalizzano la profondità. Tre o quattro livelli (Abbigliamento → Donna → Vestiti → Estate) significano seguire con il mouse un percorso sottile senza uscirne. Ogni errore è una micro-frustrazione, e gli acquirenti frustrati non approfondiscono: se ne vanno.
• Non c'è spazio per il merchandising. Il menu predefinito è fatto solo di link testuali. Non puoi mostrare un banner promozionale, un prodotto di punta o una miniatura "novità" nel punto che ogni visitatore vede. È lo spazio più visto del negozio lasciato inutilizzato.
• Scorrimento per overflow. Un menu a discesa da 50 categorie diventa più alto del viewport e costringe a scorrere dentro il menu: un comportamento che comunica "questo negozio è difficile da usare" prima ancora che il cliente abbia trovato qualcosa.

Il valore del mega menu è che rimuove questi tre limiti insieme: un pannello ampio permette di scansionare decine di link senza scorrere, ospita immagini e blocchi promozionali e sostituisce il fragile percorso hover con una singola superficie stabile. Il punto è farlo in modo che il pannello si guadagni il proprio spazio, invece di riempire semplicemente lo schermo.

[screenshot: un pannello mega menu aperto con colonne di sottocategorie a sinistra, un'immagine di categoria e una scheda prodotto in evidenza a destra]

Strutturare il menu intorno alla decisione d'acquisto

È qui che la maggior parte dei progetti di mega menu sbaglia: si riversa l'albero categorie esistente in un pannello largo e lo si considera finito. Ma l'albero che ha senso nel back office (organizzato per fornitore o per come gestisci lo stock) raramente coincide con il modo in cui ragiona un cliente. Prima ristruttura per intenzione.

Parti dal modo in cui i clienti descrivono ciò che vogliono

Un acquirente non pensa "prodotti tessili": pensa "vestiti da donna". Dai alle voci di primo livello nomi che un cliente direbbe ad alta voce. Questo si sovrappone al lavoro su URL e struttura delle categorie, ma è una decisione distinta: l'etichetta del menu può essere diversa dal nome della categoria salvato. PrestaShop nativo lega l'intestazione della categoria al nome della categoria, salvo che un tema o un modulo li separi, e qui questa distinzione conta: vedi perché l'intestazione della categoria non dovrebbe essere il nome della categoria.

Mantieni la barra superiore intorno a sette voci

Le persone scansionano un insieme ridotto molto più rapidamente di uno lungo; da cinque a nove voci di primo livello è l'intervallo praticabile. Oltre, sposti il sovraccarico dal menu a discesa alla barra stessa. Raggruppa l'eccesso sotto un genitore sensato: "Casa & Giardino" può contenere Cucina, Bagno, Camera da letto ed Esterni come colonne dentro un unico pannello.

Fermati a tre livelli visibili

Dentro un mega pannello, tre livelli sono il limite pratico:

• Livello 1 — la voce della barra superiore ("Elettronica")
• Livello 2 — intestazioni di colonna nel pannello ("Smartphone", "Laptop", "Accessori")
• Livello 3 — link sotto ogni intestazione ("Custodie iPhone", "Pellicole protettive")

Se hai davvero bisogno di un quarto livello per esprimere l'assortimento, è un segnale che l'albero categorie sottostante è troppo profondo — e un albero troppo profondo diluisce anche il valore dei link interni e confonde i crawler. Correggilo prima alla fonte: struttura delle categorie PrestaShop per una navigazione ottimizzata per la SEO spiega come appiattirlo senza lasciare prodotti orfani.

Metti in evidenza ciò che converte già

Apri gli analytics prima di ordinare le colonne. Le categorie con più ingressi e i migliori tassi di aggiunta al carrello devono stare nella prima colonna, in cima alla lista, e sono quelle a cui vale la pena assegnare un'immagine. Il menu non è un indice neutrale: il suo ordine è una raccomandazione, quindi raccomanda ciò che funziona meglio.

Cosa inserire davvero nel pannello

Un mega menu è lo spazio di merchandising più economico che possiedi, perché appare su ogni pagina senza peso aggiuntivo per impressione. Decidi con cura cosa lo riempie:

Un'avvertenza che riguarda solo la conversione, non la decorazione: il pannello deve sovrapporsi alla pagina, mai spingere il contenuto verso il basso. Un pannello che sposta il layout all'apertura danneggia il punteggio Cumulative Layout Shift e dà una sensazione instabile. Rendilo come overlay con un leggero ritardo di apertura/chiusura (200–300 ms), così un mouse che attraversa la barra non attiva pannelli per errore, e carica le immagini in lazy load per evitare di scaricare venti miniature per un pannello che potrebbe non essere mai aperto.

Il mobile è un menu diverso, non più piccolo

Oltre metà delle sessioni nei negozi online avviene ormai da telefono, e un mega pannello desktop non si riduce in modo elegante: l'hover non esiste sul touch e un layout a più colonne da 1200px è illeggibile a 375px. La navigazione mobile va ricostruita, non ridimensionata:

• Overlay a schermo intero al tap, con categorie elencate verticalmente e un livello figlio che scorre sopra il genitore.
• Navigazione drill-down con un controllo indietro chiaro — ogni livello sostituisce il precedente, restando pulito anche con alberi profondi.
• Target di tap di almeno 44×44 px; comprimere trenta link in una striscia grande quanto un pollice rende il menu inutilizzabile e costa ordini mobile senza farsi notare.

La navigazione è solo una parte dell'esperienza da telefono che decide se un visitatore mobile converte: il quadro più ampio (tipi di input, zone raggiungibili dal pollice, pagamenti con wallet) è in Mobile Commerce: il tuo negozio su telefono è ormai più importante del desktop.

Dove finisce il menu e iniziano ricerca e filtri

Un mega menu è uno strumento di esplorazione. È lo strumento sbagliato per due compiti che i proprietari di negozi spesso cercano di forzargli, e sovraccaricarlo danneggia sia il menu sia la conversione che dovrebbe generare:

• Un acquirente che conosce già il nome del prodotto vuole digitare, non cliccare. È un problema di ricerca, e la ricerca predefinita di PrestaShop spesso non è abbastanza buona per gestirlo: vedi Smart Search per PrestaShop.
• Un acquirente dentro una categoria ampia vuole restringere per attributo — taglia, colore, prezzo, marca. Questo è filtro sfaccettato nella pagina categoria, non struttura del menu: Filter Revolution spiega come aiutare i clienti a ridurre un grande catalogo a una lista ristretta.

Il compito del menu è portarli sulla pagina categoria giusta; da lì subentrano layout, filtri e ordinamento della pagina. Il modo in cui quella landing page è costruita decide se il clic converte: Category Pages That Convert riprende esattamente dal punto in cui il menu passa il testimone.

Mantienilo veloce: una navigazione lenta viene ignorata

Un mega menu aggiunge HTML, CSS e JavaScript a ogni pagina, quindi una realizzazione poco attenta appesantisce tutto il negozio, non solo il menu. Due soglie da rispettare:

• Peso del DOM. Un menu da 200 categorie significa oltre 200 nodi che il browser analizza su ogni pagina anche quando tutti i pannelli sono chiusi. Renderizza i pannelli in modo lazy o almeno tieni i pannelli nascosti fuori dal lavoro di layout, così il menu non trascina verso il basso il Largest Contentful Paint.
• Moderazione nello script. Il JavaScript del menu dovrebbe fare tre cose: aprire, chiudere, gestire il ritardo. Se un modulo innesta caroselli o contenuti AJAX nel menu a discesa, il menu inizia a competere con il contenuto vero per il thread principale. La navigazione deve sembrare istantanea; altrimenti gli acquirenti smettono di usarla.

Quindi? Un menu che esita abitua i clienti a ignorarlo, e un menu ignorato non può vendere nulla. Qui le prestazioni sono una funzione di conversione, non una finezza da sviluppatori.

Misura il menu come lo strumento di conversione che è

"Ha un aspetto migliore" non è un risultato. Prima di cambiare qualcosa, registra la situazione attuale del menu, poi valuta il rifacimento sugli stessi numeri per un periodo significativo — almeno 30 giorni, così leggi una tendenza e non una settimana fiacca:

• Ingressi in categoria guidati dalla navigazione — le persone raggiungono le categorie tramite il menu o rimbalzano dalla home page?
• Distribuzione dei clic sul menu (una heatmap basta) — le voci con clic quasi nulli sono etichettate male o posizionate male, non necessariamente indesiderate.
• Qualità del percorso — se i clienti fanno ripetutamente Categoria → sottocategoria sbagliata → indietro → sottocategoria giusta, le etichette li stanno ingannando.
• Conversione della pagina categoria dopo il clic — il vero risultato del menu è se la pagina su cui porta vende.

Se preferisci trattare il menu come parte di un rifacimento più ampio della "prima impressione", si combina naturalmente con il lavoro sulla home page in Homepage Design per PrestaShop, dato che la maggior parte delle sessioni inizia con header e home page visibili insieme.

Costruirlo in PrestaShop senza fare fork del tema

Puoi creare un mega menu in tre modi: codificarne uno a mano nel tema (fragile, e si rompe al successivo aggiornamento del tema), comprare un builder generico o usare un modulo scritto per il tuo tema e la tua versione specifici. La terza strada conta più di prima su PrestaShop moderno, perché il tema front office sta cambiando: Hummingbird è arrivato come tema opzionale in PrestaShop 8.1 ed è diventato il tema predefinito nella generazione PrestaShop 9, e un modulo menu scritto per il markup del vecchio tema Classic non vi si inserirà in modo pulito.

Il nostro modulo mprmegamenu è costruito specificamente per PrestaShop 9.x e il tema Hummingbird, quindi parla la struttura del tema invece di combatterla. Si aggancia al punto di navigazione standard del tema (displayTop, con supporto opzionale per un hook menu personalizzato del tema) invece di sovrascrivere file template, ed è questo che gli permette di sopravvivere agli aggiornamenti del tema e del core. In termini di benefici:

• Il menu fa merchandising, non si limita a elencare. Tab a più colonne, colonne con immagini di categoria e schede prodotto renderizzate tramite il product presenter nativo di PrestaShop: prezzi, immagini e disponibilità restano corretti e localizzati senza dover mantenere un set di dati parallelo. Quindi? Puoi inserire un prodotto più venduto direttamente nel menu e resterà aggiornato mentre stock e prezzo cambiano.
• Contenuti personalizzati e blocchi di fiducia per banner promozionali, gruppi di link o rassicurazioni su consegna e resi dentro il pannello: la superficie di merchandising sostenuta da tutto questo articolo, configurata dal back office invece che da una fattura di sviluppo.
• Un menu mobile a scorrimento progettato apposta, non un pannello desktop compresso, così l'esperienza da telefono segue la navigazione drill-down che funziona davvero sul touch.
• Un livello di cache integrato così un menu ricco di funzioni non viene ricalcolato a ogni caricamento pagina: la navigazione resta veloce, cosa che (come visto sopra) è di per sé un fattore di conversione.

Se il tuo negozio usa ancora il tema Classic su una versione precedente, è meglio saperlo subito: mprmegamenu punta all'era Hummingbird, quindi verifica il tema prima di costruirci sopra il progetto. Preferiamo dirtelo ora piuttosto che lasciarti scoprire dopo che non si adatta.

Domande frequenti

Mi serve un mega menu o basta il menu predefinito di PrestaShop?

Per cinque-dieci categorie il modulo predefinito ps_mainmenu va davvero bene: non sostituirlo solo perché "mega menu" suona più importante. Il limite compare quando il catalogo diventa profondo o ampio: le colonne strette a cascata penalizzano la profondità, non c'è spazio per il merchandising e un menu a discesa da 50 categorie trabocca oltre il viewport. Un mega pannello rimuove questi tre limiti insieme.

Quante voci di primo livello dovrebbe avere un mega menu?

Circa sette: da cinque a nove è l'intervallo praticabile. Le persone scansionano un insieme ridotto molto più rapidamente di uno lungo, e oltre nove non fai che spostare il sovraccarico dal menu a discesa alla barra stessa. Raggruppa l'eccesso sotto un genitore sensato: "Casa & Giardino" può contenere Cucina, Bagno, Camera da letto ed Esterni come colonne dentro un unico pannello.

Un mega menu rallenterà il mio negozio?

Solo se è costruito con poca cura. Un menu da 200 categorie aggiunge oltre 200 nodi DOM che il browser analizza su ogni pagina anche quando tutti i pannelli sono chiusi, e un JavaScript di menu pesante compete con i tuoi contenuti per il thread principale. Renderizza i pannelli in modo lazy, carica le immagini del pannello in lazy load e limita lo script del menu ad apertura/chiusura/ritardo. Il nostro modulo mprmegamenu include un livello di cache, così un menu ricco di funzioni non viene ricalcolato a ogni caricamento pagina.

mprmegamenu funziona con il tema Classic?

È pensato per PrestaShop 9.x e per il tema Hummingbird, agganciandosi al punto di navigazione standard displayTop del tema invece di sovrascrivere template. Un menu scritto per il markup di Hummingbird non si inserisce in modo pulito nel vecchio tema Classic, quindi se il tuo negozio usa ancora Classic su una versione precedente, verifica il tema prima di pianificarlo.

In cosa un mega menu mobile è diverso da quello desktop?

È ricostruito, non ridimensionato. L'hover non esiste sul touch e un layout a più colonne da 1200px è illeggibile a 375px, quindi il menu mobile diventa un overlay a schermo intero al tap, con ogni livello figlio che scorre sopra il genitore (navigazione drill-down con un controllo indietro chiaro) e target di tap di almeno 44×44 px. mprmegamenu include un menu a scorrimento progettato apposta, invece di un pannello desktop compresso.

In sintesi

Un mega menu è uno degli interventi con l'impatto più alto che puoi fare su un grande catalogo PrestaShop, ma solo se lo tratti come uno strumento di conversione. Strutturalo intorno al modo in cui i clienti decidono, riempi il pannello con elementi che muovono gli ordini, ricostruiscilo (non ridimensionarlo) per il mobile, passa il testimone in modo pulito a ricerca e filtri, mantienilo veloce e giudicalo su numeri reali. Fai bene questi passaggi e il menu smette di essere un elenco e diventa il venditore più discreto e più visto del tuo negozio.

Continua a leggere

• Struttura delle categorie PrestaShop: navigazione ottimizzata per la SEO — correggi l'albero alla fonte prima di riversarlo in un pannello.
• Pagine categoria che convertono: layout, filtri e ordinamento — dove il menu passa il testimone una volta atterrato il clic.
• Filter Revolution: aiutare i clienti a trovare prodotti in cataloghi ampi — il restringimento dentro la categoria che un menu non dovrebbe cercare di fare.