Comment corriger les problèmes de mise en page après l'installation d'applications Shopify (2026)

Points clés

• Les applications qui injectent du contenu peuvent déplacer d’autres éléments, se superposer à la navigation ou causer un layout shift.
• Pour diagnostiquer, désactivez les applications une par une et vérifiez si le problème disparaît.
• Solutions courantes : ajustement du z-index en CSS, modification des marges pour décaler les barres fixes (sticky), et désactivation des app embeds conflictuelles.
• Fudge peut identifier et corriger les conflits de mise en page causés par le code d’une application sans que vous ayez à écrire du CSS manuellement.

Installer une nouvelle application Shopify et découvrir qu’elle a cassé votre mise en page est une frustration courante. Les barres d’annonce fixes poussent le contenu derrière votre header. Les widgets de chat se superposent au bouton d’ajout au panier sur mobile. Le Z-index d’une popup l’affiche derrière votre navigation. Ce sont des problèmes qui se règlent — il suffit de savoir où chercher.

Comment corriger le Cumulative Layout Shift ?

Le Cumulative Layout Shift (CLS) est un problème de mise en page spécifique où les éléments se déplacent après le chargement initial de la page — car le script d’une application s’est chargé tardivement et a décalé le contenu. Cela nuit à la fois à l’expérience utilisateur et à votre score Google PageSpeed.

La solution : Assurez-vous que les widgets de l’application ont leur espace réservé dans la mise en page avant qu’ils ne se chargent. Cela se fait souvent en définissant un min-height sur les éléments conteneurs de l’application.

Étape 1 — Diagnostiquer quelle application cause le problème

Avant de réparer quoi que ce soit, confirmez quelle application est responsable.

Méthode — Désactiver les applications une par une :

1. Allez dans Boutique en ligne → Thèmes → Personnaliser → Intégrations d’applications (App Embeds)
2. Désactivez une application à la fois
3. Prévisualisez votre boutique après chaque désactivation
4. Quand le problème disparaît, vous avez trouvé le coupable

Pour les applications qui injectent du code via theme.liquid (au lieu des App Embeds), vous devrez trouver et commenter leurs balises de script pour tester.

Testez toujours sur un thème dupliqué pour éviter de casser accidentellement votre boutique en ligne.

Problèmes de mise en page fréquents et solutions

La barre d’annonce fixe (sticky) pousse le contenu vers le bas

Certaines applications injectent une barre fixe en haut de la page. Cela peut empiéter sur le header de votre thème ou pousser le contenu de la page en dessous.

La solution — décalez votre header avec du CSS :

.shopify-section-header-sticky,
.header-wrapper {
  top: 40px; /* hauteur de la barre de l'application */
}

Remplacez 40px par la hauteur réelle de la barre de l’application. Mesurez-la à l’aide de l’outil Inspecter de votre navigateur.

Meilleure solution : Vérifiez les paramètres de l’application — la plupart des apps de barres d’annonce permettent de configurer la hauteur de la barre et peuvent proposer une option pour s’intégrer au positionnement du header de votre thème.

Un widget se superpose à la navigation ou aux boutons

Les conflits de Z-index font que des éléments apparaissent les uns sur les autres alors qu’ils ne le devraient pas.

La solution — ajuster le Z-index :

.your-nav-element {
  position: relative;
  z-index: 1000; /* Supérieur au widget de l'application */
}

Trouvez le nom de la classe de l’élément en conflit (clic droit → Inspecter), vérifiez son z-index calculé, et donnez à votre élément un z-index supérieur.

Un widget de chat recouvre l’ajout au panier sur mobile

Les widgets de chat (Gorgias, Tidio, Intercom) sont connus pour se superposer aux barres d’ajout au panier (ATC) sticky sur mobile.

La solution — déplacer le widget de chat :

La plupart des applications de chat ont un paramètre de positionnement (en bas à gauche ou en bas à droite). Si votre bouton ATC est à droite, placez le widget de chat à gauche.

Ou décalez le widget de l’app avec du CSS :

@media (max-width: 767px) {
  /* La plupart des apps de chat ont une classe ou un ID prévisible */
  #chat-widget-container {
    bottom: 80px !important; /* Dégagé de votre barre ATC */
  }
}

Le !important est malheureusement souvent nécessaire pour écraser les styles inline injectés par l’application.

CLS causé par le chargement tardif du contenu d’une application

Si une application charge du contenu tardivement (après le rendu de la page), cela peut faire sauter des éléments.

La solution — réserver de l’espace avec min-height :

.app-widget-container {
  min-height: 200px; /* Hauteur approximative du widget */
}

Cela empêche le saut de la page en gardant l’espace avant le chargement du widget.

Article lié : Modifier le padding et les marges sur Shopify.

Article lié : Supprimer le code inutilisé sur Shopify.

Alternative : Chargez le script de l’application plus tôt, ou utilisez loading="eager" sur les ressources critiques de l’application si celle-ci le permet.

Quand le CSS ne suffit pas

Certains conflits d’application nécessitent plus que du CSS pour être résolus — le JavaScript de l’application entre fondamentalement en conflit avec le JavaScript de votre thème, ou l’application injecte du HTML à un endroit qui casse la structure de votre thème.

Vos options :

• Contactez le développeur de l’application avec un rapport de bug précis — ils ont peut-être un correctif ou une solution de contournement
• Utilisez une autre application qui n’a pas le même conflit
• Supprimez l’application problématique et créez la fonctionnalité en natif avec Fudge

Décrivez la fonctionnalité dont vous avez besoin à Fudge:

“J’utilisais [Nom de l’App] pour une barre d’annonce sticky, mais elle rentre en conflit avec mon header. Crée-moi une barre d’annonce native qui fonctionne correctement avec mon thème.”

Prévenir les problèmes de mise en page lors de l’installation de nouvelles apps

Lisez attentivement les instructions d’installation. Les applications qui modifient le fichier theme.liquid ou qui vous demandent de coller du code dans votre thème sont plus risquées que celles qui utilisent les App Embeds.

Testez sur un thème de test. Dupliquez toujours votre thème actif, installez l’application sur la copie et testez-la minutieusement avant de l’activer sur votre thème en production.

Vérifiez les avis de l’application concernant les problèmes de mise en page. Si d’autres marchands signalent des conflits avec des thèmes courants (Dawn, Craft, Sense), c’est un signal d’alarme.

Minimisez le nombre total d’applications. Chaque application est un conflit potentiel. Chacune ajoute des scripts, des styles et du HTML qui n’ont pas été conçus pour votre thème spécifique. Le code natif créé avec Fudge évite complètement ce problème.

FAQ

Pourquoi ma page Shopify saute-t-elle vers le bas après le chargement d’une application ?

C’est le Cumulative Layout Shift (CLS). Le script de l’application se charge après le rendu de la page, puis injecte du contenu qui pousse le contenu existant vers le bas. Corrigez cela en réservant de l’espace avec min-height sur le conteneur de l’application, ou en configurant l’application pour qu’elle se charge plus tôt. Le CLS nuit à l’UX et aux scores Core Web Vitals.

Puis-je utiliser plusieurs applications de sticky bar en même temps ?

C’est fortement déconseillé. Empiler des sticky bars (annonce, progression de la livraison gratuite, compte à rebours BFCM) ruine l’ergonomie sur mobile — le header consomme plus de 30 % de l’écran (viewport). Si vous avez besoin de plusieurs messages épinglés, utilisez une seule barre qui les fait défiler. Pour vous débarrasser complètement des applications, décrivez ce que vous voulez à Fudge (“une seule sticky bar qui alterne entre l’annonce, la livraison gratuite et la promo en cours”) et il s’intègre nativement dans votre thème — une seule barre, pas de chevauchement, pas de surcharge due aux applications.

Pourquoi le widget de chat ne respecte-t-il pas le z-index de mon thème ?

Les widgets de chat s’injectent généralement avec des valeurs de z-index très élevées (9999+) et des styles inline pour passer au-dessus de tout le reste. Surchargez-les avec du CSS ciblant l’ID du conteneur spécifique du widget et utilisez !important sur le z-index et le positionnement. Certaines applications de chat proposent des paramètres pour contrôler le z-index — vérifiez d’abord le tableau de bord de l’application.

Dois-je utiliser les App Embeds ou theme.liquid pour les nouvelles applications ?

Les App Embeds quand c’est possible. Les embeds sont la méthode moderne et isolée que Shopify utilise pour permettre aux applications d’injecter du contenu sans modifier les fichiers du thème — ils sont plus faciles à désactiver proprement et ne laissent pas de résidus en cas de désinstallation. Les modifications de theme.liquid sont persistantes et nécessitent un nettoyage manuel. De nombreuses applications s’installent par défaut sur theme.liquid ; demandez au développeur si les App Embeds sont disponibles.

Supprimer une application résoudra-t-il tous les problèmes de mise en page associés ?

En général, mais pas toujours. Les applications qui ont injecté du code dans theme.liquid laissent ce code derrière elles lors de la désinstallation — cherchez et supprimez manuellement les snippets spécifiques à l’application. Les applications basées sur les App Embeds se nettoient automatiquement lors de leur désactivation. Après la désinstallation, vérifiez theme.liquid et tout fichier de template modifié pour y repérer des restes de code d’application.

Voir aussi : Accélérer un thème Shopify.

Sur le même sujet : Supprimer les restes de code d’applications sur Shopify.