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 :

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 theme.liquid ou qui vous demandent de coller du code dans votre thème sont plus risquées que celles utilisant les App Embeds.

Testez sur un thème d’environnement de test (staging). Dupliquez toujours votre thème actif, installez l’application sur la copie et testez minutieusement avant de l’activer sur votre boutique en production.

Consultez les avis de l’application concernant les bugs d’affichage. Si d’autres marchands signalent des conflits avec des thèmes courants (Dawn, Craft, Sense), c’est un signal d’alarme.

Réduisez le nombre total d’applications. Chaque application est un conflit potentiel. Chaque app ajoute des scripts, des styles et du HTML qui n’ont pas été conçus pour s’adapter parfaitement à votre thème. Le code natif créé avec Fudge permet d’éviter cela totalement.