Il menu Shopify Mobile non funziona: correzioni JavaScript, app e CSS del tema (2026)

Correzione rapida con Thunder

Scopri innanzitutto se il clic, il cassetto o la sovrapposizione sono rotti

Open your store in Chrome, switch DevTools to a mobile viewport, reload, and click the hamburger icon. If the Console shows a JavaScript error before the click, fix that first. One broken app snippet can stop the theme's header script from registering the menu event.

Se non sono presenti errori, ispezionare il pulsante dell'hamburger. Dovrebbe puntare a un elemento drawer reale tramite un ID, un controllo ARIA, un elemento personalizzato o un attributo dati. Le modifiche personalizzate dell'intestazione spesso rinominano il drawer ma lasciano il pulsante rivolto al vecchio target.

Controlla anche la pagina per eventuali sovrapposizioni invisibili. Banner di cookie, app popup, barre di annunci permanenti e app di menu possono trovarsi sopra l'intestazione con un alto z-indice. Per i problemi relativi al percorso di acquisto nelle vicinanze, consulta la guida ai pulsanti aggiungi al carrello, Lista di controllo per il debug del cassetto del carrelloe Guida alla pulizia degli script dell'app.

Ripristina il pulsante del menu mobile e il contratto del cassetto

La maggior parte dei temi Shopify utilizza un pulsante, un cassetto e un piccolo script che attiva/disattiva una classe o un attributo aperto. I nomi differiscono in base al tema, ma il contratto è lo stesso: il clic del pulsante apre il cassetto, lo scorrimento del corpo si blocca, l'Esc chiude e il pulsante di chiusura inverte lo stato.

<button
  type="button"
  class="header__menu-toggle"
  aria-controls="MobileMenuDrawer"
  aria-expanded="false"
  data-mobile-menu-toggle>
  <span class="visually-hidden">Apri il menu</span>
</button>

<aside id="MobileMenuDrawer" class="mobile-menu" hidden>
  <!-- menu links -->
</aside>

Then verify the JavaScript still matches those selectors. If your theme was updated, copied from Dawn, or modified by a menu app, one selector mismatch can break the entire mobile menu.

const button = document.querySelector('[data-mobile-menu-toggle]');
const drawer = document.querySelector('#MobileMenuDrawer');

button?.addEventListener('click', () => {
  const isOpen = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!isOpen));
  drawer.hidden = isOpen;
  document.documentElement.classList.toggle('overflow-hidden', !isOpen);
});

Aggiungilo solo in un tema duplicato e adattalo alla struttura esistente del tuo tema. Se il tuo tema ha già un elemento personalizzato per il cassetto dell'intestazione, correggi il selettore rotto invece di aggiungere una logica di menu duplicata.

Controlla il CSS che fa sembrare morto il menu mobile di Shopify

A volte il menu si apre, ma gli acquirenti non possono vederlo o toccarlo. Ispeziona il cassetto dopo aver fatto clic sull'icona dell'hamburger. Cerca :nessuno, visibilità:nascosto, opacità:0, trasformazioni fuori schermo, basse z-indicee contenitori principali con overflow: nascosto.

Un cassetto sicuro necessita di un layout mobile prevedibile: posizionamento fisso, uno z-index sopra l'intestazione e la barra degli annunci, sfondo visibile e un'area menu scorrevole. Evita di utilizzare caratteri di icone di grandi dimensioni o widget di app all'interno del drawer perché aggiungono ritardo al primo tocco.

.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  z-index: 1000;
  overflow-y: auto;
  background: #fff;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.mobile-menu:not([hidden]) {
  transform: translateX(0);
}

Disabilita gli incorporamenti di app e gli ottimizzatori di script in un tema duplicato

Gli errori del menu mobile compaiono spesso dopo l'installazione di un popup, di un generatore di pagine, di un'intestazione fissa, di una traduzione, di una revisione o di un'app di velocità. Duplica il tuo tema live, disabilita gli incorporamenti dell'app e riprova. Se il menu funziona, riattiva le app una alla volta finché l'errore non si ripresenta.

Presta particolare attenzione agli strumenti che rinviano ogni script per impostazione predefinita. Gli script dei temi critici per la navigazione, i moduli dei prodotti, i carrelli e la ricerca dovrebbero rimanere disponibili al momento dell'interazione. Per una pulizia più ampia, seguire il guida completa all'ottimizzazione della velocità di Shopify, Guida Shopify INPe guida alla pulizia del codice inutilizzato.

Se una vecchia app è stata rimossa ma il menu continua a non funzionare, esegui il file Elenco di controllo degli avanzi dell'app Shopify. Snippet orfani in tema.liquid sono un motivo comune per cui JavaScript si interrompe solo per dispositivi mobili.

Correzione manuale vs. Correzione Thunder

Per progetti di pulizia più grandi, confronta Prezzi tempestosi con Ottimizzazione della velocità professionale di Shopify.

FAQ