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écaler d’autres éléments, chevaucher la navigation ou causer un layout shift.

Diagnostiquez le problème en désactivant les applications une par une pour voir si le souci disparaît.

Solutions courantes : ajustements du z-index en CSS, surcharges des marges pour compenser les barres fixes (sticky bars), et désactivation des app embeds en conflit.

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 casse votre mise en page est une frustration fréquente. Les barres d’annonce fixes poussent le contenu derrière votre header. Les widgets de chat chevauchent votre bouton d’ajout au panier sur mobile. Le z-index d’un popup d’app le bloque derrière votre navigation. Ce sont des problèmes faciles à régler — 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 :

Allez dans Boutique en ligne → Thèmes → Personnaliser → Intégrations d’applications (App Embeds)
Désactivez une application à la fois
Prévisualisez votre boutique après chaque désactivation
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.

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.

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.”

Créez des fonctionnalités Shopify en natif sans conflits d'apps — avec Fudge.

Try Fudge for Free

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 ?

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. Pour corriger cela, réservez de l'espace avec min-height sur le conteneur de l'app, ou configurez l'app pour qu'elle charge plus tôt. Le CLS nuit à la fois à l'UX et à vos scores Core Web Vitals.

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

Fortement déconseillé. Empiler des sticky bars (annonce, progression de la livraison gratuite, compte à rebours BFCM) ruine l'ergonomie sur mobile — le header mange plus de 30 % du viewport. Si vous avez besoin de plusieurs messages fixes, utilisez une seule barre qui alterne entre eux. Pour vous débarrasser complètement de l'accumulation d'apps, décrivez ce que vous voulez à Fudge ("une seule sticky bar qui alterne entre les annonces, la livraison gratuite et la promo du moment") et Fudge le construit nativement dans votre thème : une seule barre, pas de chevauchement, et pas d'app overhead.

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

Bien souvent, les widgets de chat s'injectent eux-mêmes avec des valeurs de z-index très élevées (9999+) et des styles inline pour prendre le dessus sur le reste. Contournez ce problème avec du CSS qui cible l'ID spécifique du conteneur du widget, et utilisez !important sur le z-index et le positionnement. Certaines apps de chat proposent des paramètres pour le contrôler — vérifiez d'abord leur tableau de bord.

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

Les App Embeds, quand ils sont supportés. Les Embeds sont la méthode moderne et isolée par laquelle Shopify permet aux apps d'injecter du contenu sans modifier les fichiers du thème. Ils sont plus simples à désactiver proprement et ne laissent pas de résidus si vous les désinstallez. Les modifications sur theme.liquid sont persistantes et nécessitent un nettoyage manuel. Beaucoup d'apps utilisent encore theme.liquid par défaut ; demandez au développeur s'ils supportent les Embeds.

Est-ce que supprimer une application réglera tous les problèmes de mise en page qui y sont liés ?

Généralement oui, mais pas toujours. Les apps 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'app. Les apps basées sur les App Embeds se nettoient automatiquement à la désactivation. Après la désinstallation, inspectez le fichier theme.liquid et les templates modifiés pour traquer d'éventuels morceaux de code résiduels.