Fiche incident

Theme bug on mobile sur Shopify - Causes & solutions

Rédigé par Soulaimane Aattar — 850+ interventions e-commerce documentées Mis à jour le 14 juin 2026 Versions concernées : Shopify, thèmes OS 2.0 (Dawn, Craft, Sense, Refresh) et thèmes payants legacy (Palo Alto 4.6.3, Blockshop, Blue Light) sur l'éditeur de thèmes actuel.

Ta boutique Shopify est nickel sur ton ordinateur, mais sur smartphone le menu burger ne s'ouvre plus, les boutons « Ajouter au panier » disparaissent, ou la page entière s'affiche « comme si le mode PC s'était mis sur mobile ». C'est exactement là que ça fait mal : plus de 70 % du trafic e-commerce arrive par mobile, et l'index de Google est mobile-first. Un bug d'affichage mobile, c'est de la conversion qui fuit en silence pendant que tes campagnes social ads continuent de payer le clic.

Ce guide ne te sert pas une liste de généralités. On part de ton symptôme exact, on remonte au fichier responsable (theme.liquid, base.css, l'app fautive), et on te donne le correctif copiable. La méthode est celle qu'on applique chez BugRescue sur des thèmes OS 2.0 chargés d'apps : isoler d'abord, corriger ensuite, sans casser le thème en production.

Contexte technique

Les bugs mobile Shopify viennent fréquemment de la combinaison thèmes OS 2.0 (Dawn, Craft, Sense) + apps qui injectent des sections custom. Les sélecteurs de variantes swatch, les sticky add-to-cart et les pop-ups newsletter sont les premiers responsables. Le Lighthouse Score mobile chute rapidement quand plus de 4 apps front-facing sont installées en simultané. Sur iOS Safari, le viewport 100vh se comporte différemment de Chrome Android : un menu mobile full-screen mal codé peut couper l'accès au bouton panier.

shopify mobile bugshopify theme issue mobileshopify responsive problem

Cet incident peut impacter votre chiffre d’affaires.

Si ce problème touche le checkout, la disponibilité ou la performance, la perte de revenu peut être immédiate.

Note expert BugRescue

Testez toujours sur device réel, pas uniquement en DevTools. Les bugs de scroll et de touch ne se reproduisent pas en émulation. Préférez BrowserStack ou un iPhone + Android physique.

Prise en charge par des experts avec 15+ ans d’expérience e-commerce.

Équipe senior full-stack PrestaShop, WooCommerce, Magento, Shopify et WordPress. Intervention rapide sur incidents critiques et stabilisation durable — France, Maroc, Belgique et Suisse.

Symptômes : comment confirmer le diagnostic

Avant de toucher au code, identifie précisément ce qui casse. Un « bug mobile » Shopify recouvre cinq familles de symptômes, et chacune pointe vers un fichier différent. La règle d'or : ne jamais te fier au DevTools de Chrome seul. Les bugs de scroll, de tap et de menu ne se reproduisent souvent pas en émulation. Teste sur un iPhone (Safari) ET un Android (Chrome) physiques, ou via BrowserStack.

Boutons CTA invisibles ou non cliquables (sticky add-to-cart qui passe sous un autre élément, z-index ou tap target trop petit).
Éléments qui se chevauchent sur la fiche produit (PDP) : prix, swatch de variantes et bouton panier empilés.
Menu mobile / icône burger qui ne s'ouvre pas au tap (presque toujours un conflit JavaScript d'app).
Scroll horizontal parasite : la page glisse de droite à gauche, un élément déborde du viewport.
Site qui s'affiche en « mode PC » : texte minuscule, dézoom complet, pas de mise en page mobile (balise viewport manquante ou écrasée).

Reproduis le bug sur deux navigateurs mobiles réels distincts (Safari iOS + Chrome Android).
Vide le cache et les cookies, puis recharge en navigation privée : un bug qui disparaît en privé est un problème de cache, pas de thème.
Ouvre la boutique via l'app Shopify et via un 4G hors Wi-Fi pour écarter une extension navigateur locale.
Note l'URL exacte (accueil, collection, PDP, panier) où le bug apparaît : un bug limité à la PDP isole déjà le fichier section concerné.

Impact business immédiat

Un bug mobile n'est pas un défaut cosmétique, c'est une fuite de chiffre d'affaires sur ton canal principal. Voici ce qu'il coûte réellement pendant qu'il reste en ligne.

Chute directe de la conversion mobile : un CTA non cliquable ou un menu bloqué = panier abandonné avant même le checkout.
Hausse du taux de rebond sur les campagnes social ads (Meta, TikTok, Pinterest) qui envoient 100 % de trafic mobile vers une page cassée — tu paies le clic pour rien.
Perte de revenu sur la majorité de ton trafic, puisque le smartphone domine les sessions e-commerce.
Dégradation SEO : Google indexe la version mobile en priorité. Un Lighthouse mobile en berne ou une erreur « viewport » pèse sur le classement de tes landing pages.

Causes classées par probabilité

Sur les thèmes OS 2.0 modernes, la cause la plus fréquente n'est pas le thème lui-même mais ce qu'on lui a greffé. Voici l'ordre statistique réel que l'on rencontre en intervention.

1. Conflit d'app injectant CSS/JS (le plus courant) : pop-up newsletter, sélecteur de variantes swatch, sticky cart, app d'avis. Elle ajoute un script qui casse le menu burger ou un style qui déborde. Symptôme typique : menu qui ne s'ouvre plus depuis l'installation d'une app.
2. CSS personnalisé non responsive : une édition manuelle dans base.css ou un bloc <style> avec une largeur fixe en px qui ignore le breakpoint mobile (provoque le scroll horizontal).
3. Balise viewport manquante ou écrasée : absente du <head> de theme.liquid, ou réécrite par une app → site en « mode PC ».
4. Mise à jour de thème partielle ou édition Liquid cassée : balise non fermée, restauration incomplète → message « Theme error » / « HTML error found ».
5. Images au mauvais ratio / non optimisées : visuels déformés, CLS et lenteur qui dégradent le score mobile.

Diagnostic : les commandes à lancer

Shopify est une plateforme hébergée : pas de SSH ni d'accès serveur, donc pas de tail sur un access.log distant. Le diagnostic se fait avec trois outils concrets : la console JavaScript du navigateur mobile, l'inspecteur d'élément, et — pour qui développe le thème en local — la Shopify CLI. Voici les commandes réelles à exécuter.

Commence par traquer le coupable du scroll horizontal et les erreurs JS. Ouvre la console du navigateur sur la page cassée (Safari : Réglages > Avancé > Inspecteur web, puis connecte l'iPhone au Mac ; Chrome Android : chrome://inspect depuis le desktop).

Surligner l'élément qui déborde et casse la mise en page (à coller dans la console)

// Trace chaque élément plus large que le viewport (cause du scroll horizontal)
document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    el.style.outline = '2px solid red';
    console.log('Déborde:', el, el.scrollWidth + 'px');
  }
});

Vérifier la présence et la valeur de la balise viewport

// Doit renvoyer un <meta> avec width=device-width. null ou absent = bug "mode PC"
console.log(document.querySelector('meta[name="viewport"]')?.content || 'AUCUNE BALISE VIEWPORT');

Repérer les erreurs JS qui bloquent le menu burger

// Dans l'onglet Console, filtre sur Errors. Un menu burger mort affiche souvent :
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
// ou un conflit de double déclaration injecté par une app :
Uncaught SyntaxError: Identifier 'cart' has already been declared

Auditer le thème en local avec la Shopify CLI (développeurs)

# Installer / mettre à jour la CLI
npm install -g @shopify/cli@latest

# Récupérer une copie locale du thème pour inspecter le code
shopify theme pull --store ta-boutique.myshopify.com

# Lancer un serveur local avec hot-reload pour tester le mobile
shopify theme dev --store ta-boutique.myshopify.com

# Détecter les erreurs Liquid/JSON dans les templates et sections
shopify theme check

Solutions pas-à-pas

Toujours dans cet ordre : sécuriser, isoler, corriger. La première étape n'est pas négociable — elle t'évite de transformer un bug d'affichage en boutique hors-ligne.

DUPLIQUE LE THÈME AVANT TOUTE ÉDITION. Boutique en ligne > Thèmes > [ton thème] > Actions > Dupliquer. Tu travailles sur la copie ou tu gardes l'original comme point de retour.
ISOLE thème vs app. Active le thème gratuit Dawn (non publié, en aperçu). Si le bug disparaît sur Dawn, le problème vient de ton thème payant ou d'une app qui cible ses sélecteurs. S'il persiste, désactive les apps une à une en commençant par les plus récentes (pop-up, swatch, sticky cart) et recharge en privé après chacune.
CORRIGE le « mode PC » : Actions > Modifier le code, ouvre le dossier « Mise en page » > theme.liquid. Juste après l'ouverture de <head>, vérifie/ajoute la balise viewport. Sauvegarde puis re-teste sur device réel.
CORRIGE le scroll horizontal : repère l'élément surligné en rouge par le script de diagnostic, puis ajoute une règle de confinement au bon breakpoint dans base.css (ou un bloc <style> en bas de theme.liquid).
CORRIGE le menu burger bloqué : si l'isolation pointe vers une app, désinstalle-la proprement et nettoie le code résiduel qu'elle a pu laisser dans theme.liquid (balises <script src> orphelines). Vérifie qu'aucune double déclaration JS ne subsiste dans la console.
CORRIGE le texte/tap targets : passe les tailles de police en unités relatives (rem/em) et garantis des boutons d'au moins 44x44 px au tactile via une media query mobile.
RESTAURE si l'édition a tout cassé : Modifier le code > l'icône « ... » à côté du fichier > Afficher les anciennes versions, et reviens à la version antérieure au bug. C'est le correctif n°1 quand le problème suit une modification.

Balise viewport correcte — dans le <head> de theme.liquid

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

Stopper le scroll horizontal au breakpoint mobile Dawn (749px)

@media (max-width: 749px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Confine tout conteneur full-bleed qui déborde */
  .page-width, .banner, .slideshow {
    max-width: 100%;
    box-sizing: border-box;
  }
}

Tap targets et police lisibles sur mobile

@media (max-width: 749px) {
  .button, .product-form__submit {
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem;
  }
  .banner-text {
    font-size: 1.1rem;
    text-align: center;
  }
}

Spécificités par version

Le piège n°1 des guides anglais : ils citent tous le breakpoint 768px. C'est faux pour les thèmes Shopify modernes. Connaître les vrais breakpoints crédibilise ta correction et évite que ta media query ne s'applique au mauvais endroit.

Thèmes OS 2.0 (Dawn, Craft, Sense, Refresh) : les vrais breakpoints sont 750px (bascule mobile/desktop) et 990px (large). Le CSS vit dans base.css et des fichiers component-*.css ; les templates sont en JSON (sections/*.json), pas en Liquid pur. Édite plutôt les settings de section que le code quand c'est possible.
Erreur fréquente OS 2.0 : « Exceeded maximum number of unique handles » sur l'accueil = trop de sections Featured Product (>20). Remplace-les par une section Featured Collection.
Thèmes payants legacy (Palo Alto 4.6.3, Blockshop, Blue Light) : souvent basés sur des breakpoints custom et un theme.css monolithique. Le bug responsive y vient typiquement d'une version de thème non mise à jour — vérifie qu'une mise à jour vendeur est disponible avant de patcher à la main, car ton correctif sautera à la prochaine update.
iOS Safari vs Chrome Android : le 100vh se comporte différemment. Un menu mobile full-screen en height:100vh peut couper l'accès au bouton panier sur iPhone (la barre d'URL mange la hauteur). Utilise plutôt 100dvh (dynamic viewport height) ou un fallback JS sur la hauteur réelle.
Lighthouse : les messages « Does not have a <meta> tag with width or initial-scale » et « No <meta name=viewport> tag found » pointent directement vers theme.liquid — pas vers un réglage de l'éditeur.

Quand appeler un expert

Tu peux régler seul un cache, une app fautive, une balise viewport ou un scroll horizontal avec les snippets ci-dessus. Appelle un expert quand : le bug persiste sur Dawn après isolation (problème structurel du thème), une app indispensable au business crée le conflit et tu ne peux pas la désinstaller, ou l'édition Liquid a déjà cassé la boutique en production et tu perds des ventes en temps réel.

Chez BugRescue, on intervient sur ces cas en gardant l'original intact : isolation thème/app reproductible, correctif ciblé testé sur device réel, et restauration propre si nécessaire — sans repartir de zéro ni te forcer à changer de thème quand un patch suffit. Soulaimane Aattar, fondateur, traite ces incidents Shopify mobile au quotidien.

FAQ

Comment prévisualiser mon site en mode mobile sur Shopify ?

Dans l'éditeur de thème (Boutique en ligne > Thèmes > Personnaliser), utilise la bascule de taille d'écran en haut pour passer en aperçu mobile. Mais cet aperçu ne reproduit pas les bugs de tap, de scroll et de viewport : valide toujours sur un iPhone et un Android physiques, ou via BrowserStack, avant de conclure.

Pourquoi mon site s'affiche-t-il en version PC sur mobile ?

C'est presque toujours la balise viewport : elle est absente du <head> de theme.liquid, ou une app l'a écrasée. Vérifie-la avec la commande console du guide. Si elle renvoie null, ajoute <meta name="viewport" content="width=device-width, initial-scale=1.0"> juste après l'ouverture de <head>. C'est aussi la cause des erreurs Lighthouse « No meta viewport tag found ».

Mon menu burger ne s'ouvre plus sur mobile, comment le réparer ?

Dans 9 cas sur 10 c'est un conflit JavaScript d'app. Ouvre la console du navigateur mobile : une erreur du type « Cannot read properties of null (addEventListener) » ou « Identifier already declared » confirme le conflit. Désactive les apps une à une en commençant par la dernière installée. Une fois la coupable trouvée, désinstalle-la et nettoie le script résiduel dans theme.liquid.

Faut-il changer de thème complet pour corriger un bug mobile ?

Rarement. Un correctif ciblé — balise viewport, media query au bon breakpoint, désactivation de l'app fautive — est plus rapide et bien moins risqué qu'une migration. Ne change de thème que si le bug persiste même sur Dawn après isolation, signe d'un problème structurel du thème payant.

Un bug d'affichage mobile peut-il impacter mon SEO ?

Oui. Google indexe la version mobile en priorité (mobile-first). Une mise en page cassée, une erreur viewport ou un Lighthouse mobile faible dégradent le classement de tes landing pages, en plus de tuer la conversion sur ton canal de trafic principal.

Comment éviter de casser ma boutique en éditant le code du thème ?

Duplique toujours le thème avant toute modification : Actions > Dupliquer. Travaille sur la copie, ou garde l'original comme point de retour. Si une édition tourne mal, utilise « Afficher les anciennes versions » sur le fichier concerné dans l'éditeur de code pour restaurer la version d'avant le bug.