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 sticky en haut de la page. Celle-ci peut se superposer avec le header de votre thème ou pousser le contenu de la page en dessous.

Solution — décalez votre header avec du CSS :

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

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

Meilleure solution : Vérifiez les paramètres de l’application — la plupart des applications de sticky bar vous permettent de configurer la hauteur de la barre et peuvent avoir une option pour s’intégrer au positionnement du header de votre thème.

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

Solution — ajustez le z-index :

.your-nav-element {
    position: relative;
    z-index: 1000; /* Plus élevé que le widget de l'application */
}

Trouvez le nom de classe de l’élément de l’application qui pose problème (clic droit → Inspecter), vérifiez son z-index calculé, et donnez à votre élément un z-index plus élevé.

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

Solution — déplacez le widget de chat :

La plupart des applications de chat ont un paramètre de positionnement (en bas à gauche vs en bas à droite). Si votre bouton d’ajout au panier est à droite, déplacez le widget de chat vers la gauche.

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

@media (max-width: 767px) {
    /* La plupart des applications de chat ont une classe ou un ID prévisible */
    #chat-widget-container {
        bottom: 80px !important; /* Pour ne pas cacher 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 provoquer des sauts d’éléments.

Solution — réservez de l’espace avec min-height :

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

Cela empêche la page de sauter en réservant l’espace avant le chargement du widget.

Article lié : Modifier le Padding et la Marge 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’applications nécessitent plus que du CSS pour être résolus — le JavaScript de l’application entre en conflit direct avec le JavaScript de votre thème, ou l’application injecte du HTML à un endroit qui casse la structure de votre thème.

Options :

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

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

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

Créez des fonctionnalités Shopify natives sans conflits d'applications — 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 ?

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 à la fois à l'UX et aux 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) détruit l'utilisabilité sur mobile — le header consomme plus de 30 % du viewport. Si vous avez besoin de plusieurs messages sticky, utilisez une seule barre qui les fait défiler. Pour sortir complètement de cet empilement d'applications, décrivez ce que vous voulez à Fudge ("une seule sticky bar qui alterne entre l'annonce, la progression de la livraison gratuite et la promo actuelle") et il le construira en natif dans votre thème — une seule barre, pas de chevauchement, et aucune surcharge liée 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 surpasser tout le reste. Écrasez-les avec du CSS en ciblant l'ID de conteneur spécifique du widget et utilisez !important sur le z-index et le positionnement. Certaines applications de chat ont 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 ils sont supportés. Les Embeds sont le moyen moderne et isolé que Shopify offre aux applications pour injecter du contenu sans modifier les fichiers du thème — ils sont plus faciles à désactiver proprement et ne laissent pas de résidus si vous les désinstallez. Les modifications de theme.liquid sont persistantes et nécessitent un nettoyage manuel. De nombreuses applications utilisent encore theme.liquid par défaut ; demandez au développeur si le support des Embeds est disponible.

La suppression d'une application résoudra-t-elle tous les problèmes de mise en page associés ?

Généralement, 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 la désactivation. Après la désinstallation, inspectez theme.liquid et tous les fichiers de template modifiés pour détecter tout code d'application restant.