Limiti dei menu nei temi Shopify: Quando passare a un sistema di navigazione dedicato? (2026)

Per un brand emergente di vendita diretta (DTC) con poche decine di prodotti, il menu predefinito di Shopify rappresenta una soluzione semplice ed efficace. È sufficiente organizzare le collezioni nel pannello di amministrazione, collegarle al menu principale e il tema mostrerà una barra orizzontale su desktop e un pratico menu a cassetto (drawer) su smartphone.

Tuttavia, quando il catalogo cresce e raggiunge centinaia o migliaia di SKU suddivise in numerose collezioni, questa architettura monolitica incontra rigidi limiti tecnici ed ergonomici: un limite massimo di 3 livelli gerarchici, quote restrittive sui blocchi nell’editor del tema, un appesantimento esponenziale del DOM e percorsi di navigazione su smartphone che costringono il pollice a movimenti scomodi.

Figura 1: Confronto architetturale tra la navigazione monolitica di un tema Shopify (a sinistra) e una moderna architettura disaccoppiata su Edge CDN (a destra). Illustrazione concettuale.

Di seguito analizziamo in dettaglio le cause tecniche di queste limitazioni, l’impatto sull’usabilità e le conversioni, e un modello decisionale per capire quando mantenere il menu nativo e quando adottare un motore di navigazione dedicato.

Panoramica rapida e confronto architetturale

Tesi fondamentale (The Core Thesis)

I temi Shopify sono concepiti come modelli di presentazione monolitici, non come motori di ricerca e scoperta scalabili. Il limite dei 3 livelli, le quote di blocchi e il menu hamburger sono meccanismi di sicurezza intenzionali di Shopify. Ma oltre le 200 SKU, questi limiti diventano un collo di bottiglia che penalizza l’esperienza di acquisto.

1. Realtà tecnica: Perché i temi Shopify impongono questi limiti

Molti commercianti ritengono che queste restrizioni siano sviste dei designer. In realtà derivano direttamente dai vincoli del motore Liquid e dal sistema di salvataggio delle impostazioni di Shopify.

{% comment %} Ciclo di navigazione monolitico standard in Liquid di Shopify {% endcomment %}
{% for link in linklists[section.settings.menu].links %}
  <li class="menu-item menu-item--level-1">
    <a href="{{ link.url }}">{{ link.title }}</a>
    {% if link.links != blank %}
      <div class="mega-menu-dropdown">
        {% for child_link in link.links %}
          <div class="menu-column menu-item--level-2">
            <span class="column-heading">{{ child_link.title }}</span>
            {% if child_link.links != blank %}
              <ul class="sub-column-list menu-item--level-3">
                {% for grandchild_link in child_link.links %}
                  <li><a href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </li>
{% endfor %}

Il limite dei 3 livelli gerarchici

In Negozio online → Navigazione, Shopify consente l’annidamento solo fino al terzo grado:

1. Livello 1 (es. Abbigliamento Uomo)
2. Livello 2 (es. Top e Maglie)
3. Livello 3 (es. Felpe con cappuccio)

Questo blocco impedisce l’esecuzione di cicli ricorsivi pesanti in Liquid che esaurirebbero la memoria del server. Se questo basta per cataloghi snelli, settori specializzati (come ricambi auto o forniture tecniche) necessitano di 4 o 5 livelli di tassonomia. Realizzarli via Liquid puro richiede soluzioni improvvisate che si rompono al primo aggiornamento del tema.

Quote per blocchi di sezione (max_blocks)

Nei temi moderni, i mega menu sono composti da blocchi (blocks/mega_menu.liquid). Nel file sections/header.liquid, gli sviluppatori impostano una soglia compresa tra 16 e 50 blocchi per evitare che config/settings_data.json superi il limite di sicurezza di 2 MB imposto da Shopify.

Appesantimento del DOM iniziale

Quando un mega menu di 150 collegamenti viene generato lato server in Liquid, l’intestazione inietta da 1.200 a oltre 1.600 nodi DOM direttamente nell’HTML di apertura. Oltre i 1.400 nodi totali, Google Lighthouse segnala problemi di prestazioni, ritardando il Largest Contentful Paint (LCP).

2. Usabilità e architettura informativa: I costi dei menu nascosti

Teoria del foraggiamento informativo e “Odore dell’informazione”

In base all’Information Foraging Theory (sviluppata da Peter Pirolli e Stuart Card presso Xerox PARC), gli utenti navigano seguendo indizi percettivi («odore dell’informazione»).

Se le categorie sono costrette in un lungo elenco testuale a causa dei limiti del tema, questo indizio svanisce. Un utente in cerca di Copertoni gravel davanti a 40 link puramente alfabetici senza icone o suddivisioni chiare subisce un carico cognitivo eccessivo e abbandona il negozio.

Ergonomia del pollice su smartphone

Secondo le ricerche di Steven Hoober (Designing for Mobile Interfaces), il 49% degli utenti maneggia lo smartphone con una sola mano.

Sui moderni display da 6,1 a 6,7 pollici, l’icona del menu nell’angolo in alto a sinistra ricade in piena «zona di sforzo». Raggiungerla richiede un cambio di impugnatura che rallenta l’esplorazione del catalogo.

3. Casi reali: Tema predefinito vs Navigazione disaccoppiata

Scenario A: Tema Dawn predefinito

• Su desktop: Menu a tendina testuali di base. Massimo 2 immagini promozionali. I link di livello 3 creano colonne verticali che escono dallo schermo sui portatili da 1080p.
• Su smartphone: Raggiungere una sottocategoria di livello 3 richiede 4 tocchi separati (Hamburger → Categoria genitore → Sottocategoria → Collezione finale), impiegando circa 4,8 secondi prima di visualizzare un prodotto.

Scenario B: Architettura disaccoppiata (es. Gymshark)

• Su desktop: Mega menu visivo con schede prodotto, etichette e transizioni immediate al passaggio del mouse.
• Su smartphone: Elimina il menu ad hamburger per l’esplorazione principale, introducendo una barra a schede fissa sul fondo dello schermo nella zona naturale del pollice.

4. Quattro segnali che il tuo negozio ha superato il menu del tema

1. Sottomenu che escono dallo schermo: Gli elenchi di terzo livello fuoriescono dal margine inferiore del browser.
2. Quota blocchi esaurita: L’editor dei temi rifiuta ulteriori elementi nell’intestazione.
3. Frequenza di rimbalzo alta su mobile: Meno di 2,2 pagine visitate per sessione indica ostacoli nell’orientamento.
4. Impossibilità di aggiornare il tema: Rimanere su versioni vecchie per paura di perdere le modifiche manuali a header.liquid.

5. Quando mantenere il tema e quando passare a un menu dedicato?

Quando il tema nativo è ideale:

• Meno di 50 SKU: Negozi monoprodotto o cataloghi ristretti con 4–6 link principali.
• Brand con un solo reparto: Un’unica categoria non necessita di articolazioni complesse.
• Estetica minimalista: Gallerie d’arte e studi di design che evitano intenzionalmente mega menu vistosi.

Quando un sistema dedicato è indispensabile:

• Oltre 200 SKU: Cataloghi con percorsi articolati su più livelli.
• Traffico prevalentemente mobile: Negozi che ricevono la maggioranza delle visite da social o ricerche su smartphone.
• Attività promozionale costante: Necessità di evidenziare badge (“SALDI”, “NOVITÀ”) senza toccare il codice.

6. Schema decisionale in base alla dimensione del catalogo

[1 - 100 SKU]        ──> Menu nativo del tema Shopify (Dawn / Menu a tendina)
                         - Nessuna dipendenza, 100% Liquid su server.

[100 - 500 SKU]      ──> Mega menu del tema premium (Enterprise / Prestige / Impulse)
                         - Adatto se la tassonomia rientra in 3 livelli e <2 banner.

[500 - 10.000+ SKU]  ──> Motore disaccoppiato su Edge CDN (es. Navi+)
                         - Profondità illimitata, icone visive, barra inferiore mobile.
                         - Header leggero senza sovraccarico di DOM; cache CDN immediata.

[10.000+ SKU B2B]    ──> Architettura Headless + Motori di ricerca avanzati (Algolia)
                         - Scoperta guidata da filtri avanzati e API dedicate.

7. Il ruolo di Navi+ e limiti oggettivi

Navi+ è stato progettato per superare le limitazioni strutturali dei temi Shopify. Invece di modificare file Liquid, opera come motore di navigazione disaccoppiato distribuito tramite Edge CDN.

Caratteristiche tecniche:

1. Distribuzione su Edge CDN: I menu sono compilati in file JSON compatti distribuiti sulla rete globale Cloudflare R2.
2. Zero appesantimento del DOM: L’HTML iniziale inviato da Shopify resta snello. I componenti si caricano in modo asincrono (~15 KB compressi).
3. Barra a schede ergonomica per smartphone: Converte i menu per desktop in una comoda barra fissa sul fondo dello schermo.
4. Indipendenza dal tema: Si integra tramite App Embeds senza intaccare i file di sistema, agevolando i cambi di tema.

Limiti trasparenti:

• Richiede l’attivazione dell’App Embed: Comporta l’esecuzione di un leggero script client-side.
• Pannello di controllo autonomo: Si gestisce dalla dashboard di Navi+ anziché dalla sezione Navigazione di Shopify.

8. Audit di navigazione in 5 passaggi

• Passo 1: Misurare il DOM dell’intestazione: Digita document.querySelectorAll('header *').length nella console del browser. Oltre 800 nodi segnalano una struttura troppo pesante.
• Passo 2: Contare i tocchi su mobile: Misura quanti clic servono per arrivare alla sottocategoria più profonda. Più di 3 tocchi causano abbandoni.
• Passo 3: Testare la portata del pollice: Prova ad aprire il menu con una sola mano su un telefono da 6,7 pollici senza muovere il palmo.
• Passo 4: Verificare le quote dei blocchi: Prova ad aggiungere nuovi blocchi all’header nell’editor del tema Shopify.
• Passo 5: Verificare la chiarezza dei nomi: Limita ogni gruppo a 7–10 link con etichette chiare e non sovrapposte.

Fonti e riferimenti

1. Shopify Developer Documentation: Theme Section Architecture & Liquid Schema Specifications (shopify.dev/docs/themes).
2. Nielsen Norman Group (NN/g): Menu Design: What Makes Menus Work & Information Foraging Theory (nngroup.com).
3. Baymard Institute: Mobile Navigation & Taxonomy Usability Benchmarks (baymard.com).
4. Steven Hoober: How Do Users Really Hold Flagship Smartphones? Ricerca UXmatters (uxmatters.com).
5. W3C Web Accessibility Initiative (WAI): WAI-ARIA Authoring Practices Guide: Menu Navigation Patterns (w3.org/WAI/ARIA/apg).