Thunder Page Speed Optimizer aiuta immediatamente dal punto di vista delle prestazioni: riduce la pressione degli script in modo che le interazioni critiche dell'intestazione rispondano più velocemente. Installare Thunder per la pulizia automatica della velocità, quindi utilizza i controlli seguenti per riparare la logica del tema che apre e chiude il menu.
Correzione rapida con Thunder
Il menu mobile è una delle prime interazioni che gli acquirenti provano. Se gli script di terze parti bloccano il thread principale, il tocco dell'hamburger può sembrare morto anche quando il codice del tema alla fine funziona. Ciò danneggia INP, la navigazione e la scoperta del prodotto.
Caratteristiche di Thunder migliora automaticamente l'ordine di caricamento degli script e i Core Web Vitals. Non sostituirà un ascoltatore di menu mancante, ma può rimuovere il trascinamento dello script che rende la navigazione mobile interrotta.
Installa ThunderScopri innanzitutto se il clic, il cassetto o la sovrapposizione sono rotti
Aprite il vostro negozio in Chrome, passate DevTools a una viewport mobile, ricaricate e cliccate sull'icona hamburger. Se la Console mostra un errore JavaScript prima del clic, risolvete prima quello. Un frammento di app rotto può impedire allo script dell'intestazione del tema di registrare l'evento del menu.
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>Poi verificate che il JavaScript corrisponda ancora a quei selettori. Se il vostro tema è stato aggiornato, copiato da Dawn, o modificato da un'app di menu, una mancata corrispondenza del selettore può rompere l'intero menu mobile.
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
| Problema | Correzione manuale | Correzione di Thunder |
|---|---|---|
| Ascolto menu mancante | Ripristina i selettori JS del tema e il markup del drawer. | Non sostituisce la logica del tema interrotta. |
| Risposta lenta dell'hamburger | Profila attività lunghe e rinvia app manualmente. | Riduce automaticamente la pressione degli script non critici. |
| La sovrapposizione blocca i rubinetti | Correggi z-index, eventi del puntatore e sovrapposizioni di app. | Aiuta con i costi di prestazione dei widget rimanenti. |
| Prima/dopo poco chiari | Prova manualmente i tocchi mobili reali e PageSpeed. | Abbinalo a test di velocità e monitoraggio continuo. |
Per progetti di pulizia più grandi, confronta Prezzi tempestosi con Ottimizzazione della velocità professionale di Shopify.
FAQ
Perché il menu mobile di Shopify non funziona?
La maggior parte dei malfunzionamenti del menu mobile deriva dal JavaScript del tema che non si carica, da un errore JavaScript che blocca lo script del cassetto, da una sovrapposizione di un'app che blocca i tocchi, da codice di intestazione personalizzato o da CSS che nasconde il cassetto del menu su mobile.
Perché l'icona dell'hamburger di Shopify fa clic ma non si apre nulla?
Il listener dei clic potrebbe mancare, l'elemento drawer potrebbe avere l'ID o l'attributo dati errato oppure un altro script potrebbe generare un errore prima dell'inizializzazione del codice del menu.
Le app di Shopify possono interrompere il menu mobile?
Sì. I creatori di pagine, le intestazioni permanenti, le app popup, le app di menu, i widget di revisione e le app di ottimizzazione possono aggiungere sovrapposizioni o modifiche agli script che bloccano l'intestazione mobile.
L'ottimizzazione della velocità può influire sul menu mobile di Shopify?
Può succedere se uno script del tema viene rinviato in modo errato o se script pesanti ritardano l'interazione. Il lavoro di velocità dovrebbe mantenere disponibili gli script critici di intestazione e drawer ritardando al tempo stesso le app non critiche.
Come posso testare una correzione del menu mobile Shopify?
Effettua il test in un tema duplicato, utilizza la modalità mobile di Chrome DevTools, controlla gli errori della console, tocca il menu su un telefono reale ed esegui un test di velocità prima e dopo per confermare che la correzione non ha aggiunto nuovi problemi di prestazioni.
Rendi di nuovo veloce la navigazione mobile.
Thunder impedisce agli script non critici di rallentare i tocchi che gli acquirenti utilizzano per navigare, cercare e acquistare.