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 de Thunder 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 ThunderPrimero averigüe si el clic, el cajón o la superposición están rotos
Abre tu tienda en Chrome, cambia DevTools a una ventana gráfica móvil, recarga, y haz clic en el icono de la hamburguesa. Si la Consola muestra un error de JavaScript antes del clic, arréglalo primero. Un fragmento de aplicación roto puede impedir que el script de encabezado del tema registre el evento del menú.
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>Luego verifica que el JavaScript aún coincida con esos selectores. Si tu tema fue actualizado, copiado de Dawn, o modificado por una aplicación de menú, una falta de coincidencia de selector puede romper todo el menú móvil.
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 Thunder |
|---|---|---|
| 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 Thunder con optimización profesional de la velocidad de Shopify.
FAQ
¿Por qué no funciona el menú de mi Shopify móvil?
La mayoría de los fallos del menú móvil provienen de que el JavaScript del tema no se carga, un error de JavaScript que detiene el script del cajón, una superposición de aplicación que bloquea los toques, código de encabezado personalizado o CSS que oculta el cajón del menú en dispositivos móviles.
¿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 evita que los scripts no críticos ralenticen los toques que los compradores usan para navegar, buscar y comprar.