Thunder Page Speed Optimizer ayuda con el rendimiento de inmediato: reduce la presión del script para que las interacciones críticas del encabezado respondan más rápido. Instalar Thunder para una limpieza de velocidad automatizada, luego use las comprobaciones a continuación para reparar la lógica del tema que abre y cierra el menú.
Solución rápida con Thunder
El menú móvil es una de las primeras interacciones que prueban los compradores. Si los scripts de terceros bloquean el hilo principal, el grifo de hamburguesas puede parecer muerto incluso cuando el código del tema finalmente funcione. Eso perjudica el INP, la navegación y el descubrimiento de productos.
Características del Trueno mejorar el orden de carga de scripts y Core Web Vitals automáticamente. No reemplazará un oyente de menú que falta, pero puede eliminar el arrastre del script que hace que la navegación móvil parezca rota.
Instalar TruenoPrimero averigüe si el clic, el cajón o la superposición están rotos
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.
Si no hay ningún error, inspecciona el botón de hamburguesa. Debe apuntar a un elemento de cajón real a través de un ID, control ARIA, elemento personalizado o atributo de datos. Las ediciones de encabezado personalizadas a menudo cambian el nombre del cajón, pero dejan el botón apuntando al destino anterior.
También inspeccione la página en busca de superposiciones invisibles. Los banners de cookies, las aplicaciones emergentes, las barras de anuncios adhesivos y las aplicaciones de menú pueden ubicarse encima del encabezado con un alto índice z. Para problemas de rutas de compra cercanas, consulte el guía del botón agregar al carrito, lista de verificación de depuración del cajón del carrito, y guía de limpieza de scripts de aplicaciones.
Restaurar el botón del menú móvil y el contrato del cajón
La mayoría de los temas de Shopify usan un botón, un cajón y un pequeño script que alterna una clase o atributo abierto. Los nombres difieren según el tema, pero el contrato es el mismo: al hacer clic en el botón se abre el cajón, el desplazamiento del cuerpo se bloquea, la salida se cierra y el botón de cerrar invierte el estado.
<button
type="button"
class="header__menu-toggle"
aria-controls="MobileMenuDrawer"
aria-expanded="false"
data-mobile-menu-toggle>
<span class="visually-hidden">Abrir menú</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);
});Agregue esto solo en un tema duplicado y adáptelo a la estructura existente de su tema. Si su tema ya tiene un elemento personalizado para el cajón del encabezado, arregle el selector roto en lugar de agregar una lógica de menú duplicada.
Verifique CSS que hace que el menú móvil de Shopify parezca muerto
A veces, el menú se abre, pero los compradores no pueden verlo ni tocarlo. Inspeccione el cajón después de hacer clic en el ícono de la hamburguesa. buscar pantalla: ninguna, visibilidad:oculta, opacidad:0, transformaciones fuera de pantalla, baja índice zy contenedores principales con desbordamiento: oculto.
Un cajón de seguridad necesita un diseño móvil predecible: posicionamiento fijo, un índice z encima del encabezado y la barra de anuncios, un fondo visible y un área de menú desplazable. Evite el uso de fuentes de íconos grandes o widgets de aplicaciones dentro del cajón porque agregan demora al primer toque.
.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);
}Deshabilitar incrustaciones de aplicaciones y optimizadores de scripts en un tema duplicado
Los fallos en el menú móvil suelen aparecer después de instalar una ventana emergente, un creador de páginas, un encabezado fijo, una traducción, una revisión o una aplicación de velocidad. Duplique su tema en vivo, desactive las incrustaciones de aplicaciones y vuelva a probar. Si el menú funciona, vuelva a habilitar las aplicaciones una por una hasta que vuelva a aparecer el error.
Tenga especial cuidado con las herramientas que posponen cada secuencia de comandos de forma predeterminada. Los guiones de temas críticos para la navegación, los formularios de productos, los carritos y la búsqueda deben permanecer disponibles en el momento de la interacción. Para una limpieza más amplia, siga las guía completa de optimización de velocidad de Shopify, Guía Shopify INP, y guía de limpieza de código no utilizado.
Si se eliminó una aplicación antigua pero el menú aún falla, ejecute el Lista de verificación de restos de la aplicación Shopify. Fragmentos huérfanos en tema.liquido son una razón común por la que JavaScript solo para dispositivos móviles se rompe.
Solución manual frente a solución Thunder
| Problema | Corrección manual | Solución de trueno |
|---|---|---|
| Falta el oyente del menú | Restaurar los selectores JS del tema y el marcado del cajón. | No reemplaza la lógica del tema rota. |
| Respuesta lenta de hamburguesa | Perfile tareas largas y posponga aplicaciones manualmente. | Reduce automáticamente la presión del script no crítico. |
| La superposición bloquea los grifos | Corrige el índice z, los eventos de puntero y las superposiciones de aplicaciones. | Ayuda con el costo de rendimiento de los widgets restantes. |
| Poco claro antes/después | Pruebe manualmente los toques móviles reales y PageSpeed. | Combínelo con pruebas de velocidad y monitoreo continuo. |
Para proyectos de limpieza más grandes, compare Precios de trueno con optimización profesional de la velocidad de Shopify.
FAQ
¿Por qué no funciona el menú de mi Shopify móvil?
Most mobile menu failures come from theme JavaScript not loading, a JavaScript error stopping the drawer script, an app overlay blocking taps, custom header code, or CSS that hides the menu drawer on mobile.
¿Por qué hace clic en el ícono de hamburguesa de Shopify pero no se abre nada?
Es posible que falte el detector de clics, que el elemento del cajón tenga un ID o un atributo de datos incorrectos, u otra secuencia de comandos puede generar un error antes de que se inicialice el código del menú.
¿Pueden las aplicaciones de Shopify romper el menú móvil?
Sí. Los creadores de páginas, encabezados fijos, aplicaciones emergentes, aplicaciones de menú, widgets de revisión y aplicaciones de optimización pueden agregar superposiciones o cambios de script que bloqueen el encabezado móvil.
¿Puede la optimización de la velocidad afectar el menú móvil de Shopify?
Puede ocurrir si el guión de un tema se pospone incorrectamente o si los guiones pesados retrasan la interacción. El trabajo rápido debería mantener disponibles los scripts de encabezado y cajón críticos y, al mismo tiempo, retrasar las aplicaciones no críticas.
¿Cómo pruebo una corrección del menú móvil de Shopify?
Pruebe en un tema duplicado, use el modo móvil Chrome DevTools, verifique los errores de la consola, toque el menú en un teléfono real y ejecute una prueba de velocidad antes y después para confirmar que la solución no agregó nuevos problemas de rendimiento.
Vuelve a acelerar la navegación móvil.
Thunder keeps non-critical scripts from slowing the taps shoppers use to browse, search, and buy.