Le menu mobile de Shopify ne fonctionne pas : correctifs de thème JavaScript, d'application et CSS (2026)

Solution rapide avec Thunder

Découvrez d'abord si le clic, le tiroir ou la superposition est cassé

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.

S'il n'y a pas d'erreur, inspectez le bouton hamburger. Il doit pointer vers un véritable élément de tiroir via un ID, un contrôle ARIA, un élément personnalisé ou un attribut de données. Les modifications d'en-tête personnalisées renomment souvent le tiroir mais laissent le bouton pointer vers l'ancienne cible.

Inspectez également la page pour détecter les superpositions invisibles. Les bannières de cookies, les applications contextuelles, les barres d'annonces collantes et les applications de menu peuvent figurer au-dessus de l'en-tête avec un haut indice z. Pour les problèmes de parcours d'achat à proximité, consultez le Liste de contrôle de débogage du tiroir du chariot guide des boutons d'ajout au panier, , et .

Restaurer le bouton de menu mobile et le contrat de tiroir

La plupart des thèmes Shopify utilisent un bouton, un tiroir et un petit script qui active une classe ou un attribut ouvert. Les noms diffèrent selon le thème, mais le contrat est le même : un clic sur le bouton ouvre le tiroir, le défilement du corps se verrouille, l'échappement se ferme et le bouton de fermeture inverse l'état.

<button
  type="button"
  class="header__menu-toggle"
  aria-controls="MobileMenuDrawer"
  aria-expanded="false"
  data-mobile-menu-toggle>
  <span class="visually-hidden">Ouvrir le 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);
});

Ajoutez ceci uniquement dans un thème en double et adaptez-le à la structure existante de votre thème. Si votre thème comporte déjà un élément personnalisé pour le tiroir d'en-tête, corrigez le sélecteur cassé au lieu d'ajouter une logique de menu en double.

Vérifiez le CSS qui donne l'impression que le menu mobile de Shopify est mort

Parfois, le menu s'ouvre, mais les acheteurs ne peuvent pas le voir ni le toucher. Inspectez le tiroir après avoir cliqué sur l’icône du hamburger. Rechercher Visibilité : aucun, : masquée, opacité :0, transformations hors écran, faible indice zet les conteneurs parents avec débordement : masqué.

Un tiroir de coffre-fort a besoin d'une disposition mobile prévisible : un positionnement fixe, un z-index au-dessus de l'en-tête et de la barre d'annonce, un arrière-plan visible et une zone de menu déroulante. Évitez d'utiliser de grandes polices d'icônes ou des widgets d'application dans le tiroir, car ils ajoutent du retard au premier appui.

.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);
}

Désactivez les intégrations d'applications et les optimiseurs de script dans un thème en double

Les échecs du menu mobile apparaissent souvent après l'installation d'une fenêtre contextuelle, d'un générateur de page, d'un en-tête collant, d'une traduction, d'une révision ou d'une application rapide. Dupliquez votre thème en direct, désactivez l'intégration d'applications et testez à nouveau. Si le menu fonctionne, réactivez les applications une par une jusqu'à ce que l'échec revienne.

Soyez particulièrement prudent avec les outils qui diffèrent chaque script par défaut. Les scripts de thèmes critiques pour la navigation, les formulaires de produits, les paniers et la recherche doivent rester disponibles au moment de l'interaction. Pour un nettoyage plus large, suivez les guide complet d'optimisation de la vitesse Shopify, Guide Shopify INP, et guide de nettoyage du code inutilisé.

Si une ancienne application a été supprimée mais que le menu échoue toujours, exécutez le Liste de contrôle des restes de l'application Shopify. Extraits orphelins dans thème.liquide est une raison courante pour laquelle JavaScript ne fonctionne plus sur mobile.

Correction manuelle vs Thunder Fix

Pour des projets de nettoyage plus importants, comparez Tarification Thunder avec optimisation de la vitesse Shopify professionnelle.

FAQ