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, chevaucher la navigation ou causer un “layout shift” (décalage de mise en page).
• Diagnostiquez le problème en désactivant les applications une par une et en vérifiant si cela le résout.
• Corrections courantes : ajustements du z-index en CSS, remplacement des marges pour compenser les barres fixes (sticky), et désactivation des intégrations d’applications (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.

Pour corriger les problèmes de mise en page après l’installation d’une application Shopify, trouvez l’application qui en est la cause en désactivant les intégrations d’applications (app embeds) une par une dans l’éditeur de thème. Ensuite, résolvez le conflit avec du CSS (décalages de l’en-tête, z-index, un espace réservé min-height) ou via les paramètres de positionnement de l’application elle-même.

Problèmes typiques : les barres d’annonce fixes poussent le contenu derrière votre en-tête, les widgets de chat recouvrent votre bouton d’ajout au panier sur mobile, et le pop-up d’une application se place derrière votre navigation.

Étape 1 — Diagnostiquer l’application responsable du problème

Avant de corriger 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 les applications une par une
3. Prévisualisez votre boutique après chaque désactivation
4. Lorsque le problème disparaît, vous avez trouvé le coupable

Pour les applications qui injectent du code via theme.liquid (plutôt que via les intégrations d’applications), 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 courants et solutions

La barre d’annonce fixe pousse le contenu de la page vers le bas

Certaines applications injectent une barre fixe (sticky) en haut de la page. Cela peut chevaucher l’en-tête de votre thème ou pousser le contenu de la page derrière celui-ci.

Solution — décaler votre en-tête avec du CSS :

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

Remplacez 40px par la hauteur réelle de la barre de l’application. Mesurez-la à l’aide des outils d’inspection de votre navigateur.

Meilleure solution : Vérifiez les paramètres de l’application — la plupart des applications de barre fixe vous permettent de configurer la hauteur de la barre et peuvent proposer une option pour s’intégrer au positionnement de l’en-tête de votre thème.

Un widget chevauche la navigation ou les boutons

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

Solution — ajuster le Z-index :

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

Trouvez le nom de la classe de l’élément de l’application en conflit (clic droit → Inspecter), vérifiez son z-index calculé, et définissez un z-index plus élevé pour votre élément.

Le widget de chat recouvre le bouton d’ajout au panier sur mobile

Les widgets de chat (Gorgias, Tidio, Intercom) sont connus pour chevaucher les boutons d’ajout au panier (ATC) fixes sur mobile.

Solution — déplacer 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: 749px) {
    /* La plupart des applications de chat ont une classe ou un ID prévisible */
    #chat-widget-container {
        bottom: 80px !important; /* Dégagé de votre barre d'ajout au panier */
    }
}

Le !important est malheureusement souvent nécessaire pour outrepasser les styles en ligne (inline) injectés par l’application.

CLS causé par le chargement tardif du contenu de l’application

Si une application charge du contenu tardivement (après le rendu de la page), elle peut faire sauter des éléments. C’est le Cumulative Layout Shift (CLS), et cela nuit à la fois à l’expérience d’achat et à votre score PageSpeed.

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 page en réservant l’espace avant le chargement du widget.

Alternative : demandez au développeur de l’application si le widget peut afficher un espace réservé (placeholder) de hauteur fixe.

Pour trouver les scripts laissés par les applications, consultez comment supprimer le code inutilisé dans Shopify.

Quand les modifications CSS ne suffisent pas

Certains conflits d’applications nécessitent plus que du CSS pour être résolus — le JavaScript de l’application est 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.

Options :

• Contactez le développeur de l’application avec un rapport de bug spécifique — ils ont peut-être un correctif ou une solution de contournement
• Utilisez une autre application qui ne présente pas le même conflit
• Supprimez l’application en conflit et créez la fonctionnalité de manière native avec Fudge

Fudge, l’opérateur IA pour les boutiques Shopify, recrée la fonctionnalité pour qu’elle fasse partie intégrante de votre thème. Décrivez ce dont vous avez besoin :

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

Vous prévisualisez la version native à côté de l’ancienne avant que quoi que ce soit ne change pour les acheteurs. Une fois que vous avez désinstallé l’application, Fudge peut trouver le code qu’elle a laissé dans votre thème et préparer un nettoyage pour que vous l’approuviez.

Pour nettoyer manuellement après avoir désinstallé une application, consultez comment supprimer les restes de code d’application de Shopify.

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

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 les applications qui utilisent les App Embeds (Intégrations d’applications).

Testez sur un thème dupliqué. Les applications s’installent sur toute la boutique, mais vous pouvez activer l’intégration ou les blocs de l’application uniquement dans un thème dupliqué, les prévisualiser, puis les activer sur le thème en ligne (live).

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 signe d’alerte.

Réduisez le nombre total d’applications. Chaque application est un conflit potentiel. Chaque application ajoute des scripts, des styles et du HTML qui n’ont pas été conçus spécifiquement pour votre thème. Le code natif créé avec Fudge évite cela, car il est écrit pour votre thème et ne se charge que là où il est utilisé.

FAQ