Comment améliorer l'espacement mobile sur Shopify (2026)

Points clés

• De nombreux thèmes Shopify incluent des curseurs de padding (espacement) mobile séparés dans les paramètres de section — regardez d’abord là.
• L’espacement global est souvent contrôlé par des propriétés personnalisées CSS, que Dawn définit depuis Paramètres du thème > Mise en page.
• Le problème le plus courant vient des sections qui ont trop de padding en haut/en bas sur mobile, ce qui donne l’impression que la page est vide et lente à faire défiler.
• Les media queries CSS vous permettent de définir des valeurs d’espacement complètement différentes selon la taille de l’écran.

Pour corriger l’espacement mobile dans Shopify, ouvrez l’aperçu mobile de l’éditeur de thème et réduisez le padding de chaque section (ou ses curseurs de padding mobile, si votre thème en a). Pour tout ce que les curseurs ne peuvent pas atteindre, ajoutez une règle CSS @media (max-width: 749px).

Une section qui semble équilibrée sur un écran d’ordinateur de 1440px a souvent un padding inadapté sur un écran d’iPhone de 390px : soit trop d’espace vide, soit du contenu trop tassé.

Pourquoi l’espacement mobile pose problème

Les designs pour ordinateur (desktop) sont généralement conçus à plus grande échelle — des paddings plus grands, des marges plus larges, plus d’espace pour respirer entre les éléments. Quand ces mêmes valeurs en pixels s’appliquent sur mobile, les proportions ne sont plus bonnes. 60px de padding supérieur qui paraissent élégants sur desktop prennent environ 7 % de la hauteur d’un écran d’iPhone, et les paddings supérieur et inférieur combinés doublent presque ce chiffre.

La plupart des thèmes Shopify modernes en tiennent compte avec un espacement responsive, mais tous les thèmes ne le font pas en profondeur, et les personnalisations de thème peuvent introduire de nouveaux problèmes d’espacement.

Si une section n’a rien à faire sur téléphone, découvrez comment masquer du contenu sur mobile dans Shopify.

Méthode 1 — Les réglages de padding de section dans l’Éditeur de thème

La solution la plus rapide pour l’espacement au niveau des sections.

Étape 1 — Ouvrez l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser.

Étape 2 — Passez à l’aperçu mobile. Cliquez sur l’icône de téléphone en haut. Cela vous aide à repérer quelles sections ont des problèmes d’espacement.

Étape 3 — Sélectionnez la section qui pose problème. Cliquez dessus dans la barre latérale gauche ou directement sur la zone d’aperçu.

Étape 4 — Cherchez les contrôles de padding. Dans le panneau de paramètres à droite, descendez pour trouver :

• Les curseurs “Padding en haut” / “Padding en bas”
• Les curseurs “Padding en haut (mobile)” / “Padding en bas (mobile)”
• “Espacement de la section”

Quand des curseurs mobiles séparés existent, ajustez-les indépendamment de la version bureau. C’est l’approche la plus propre.

Étape 5 — Vérifiez le padding de toutes les sections. Les sections peuvent mal s’empiler quand deux sections à la suite ont toutes les deux 60px de padding en haut et en bas. En réduire une corrige souvent l’espace visuel.

Pour revoir les bases du padding et des marges, consultez comment modifier le padding et les marges dans Shopify.

Méthode 2 — Les media queries CSS pour un espacement sur mesure

Quand l’éditeur de thème n’a pas de contrôles spécifiques au mobile, le CSS vous donne un contrôle précis.

Étape 1 — Dupliquez votre thème. Allez dans Boutique en ligne → Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Dupliquer. Faites les modifications sur la copie.

Étape 2 — Identifiez l’élément. Faites un clic droit sur la section trop espacée → Inspecter → trouvez le nom de la classe (ex. .section-features, .page-width).

Étape 3 — Ouvrez votre fichier CSS. Sur la copie, cliquez sur le menu à trois points (…), puis sur Modifier le code, et ouvrez assets/base.css.

Étape 4 — Ajoutez une règle spécifique au mobile :

@media (max-width: 749px) {
    .section-features {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

Ajustez les valeurs jusqu’à ce que l’espacement semble correct. En règle générale : le padding mobile devrait être environ la moitié du padding desktop pour la plupart des types de sections.

Propriétés personnalisées CSS pour l’espacement global

Les thèmes Shopify modernes (surtout Dawn et ses dérivés) utilisent des propriétés personnalisées CSS pour contrôler l’espacement globalement. Dans Dawn, ces variables sont définies depuis Paramètres du thème > Mise en page (curseurs d’espacement de la grille) et générées dans theme.liquid, alors changez d’abord les curseurs. Le résultat ressemble à ceci :

:root {
    --page-width: 1200px;
    --grid-mobile-horizontal-spacing: 10px;
    --grid-mobile-vertical-spacing: 10px;
}

Changer ces valeurs modifie l’espacement sur tout votre thème d’un seul coup. C’est plus efficace que de cibler des sections individuelles, mais faites attention — un changement global peut avoir des effets inattendus sur de nombreuses pages.

Méthode 3 — Fudge pour ajuster l’espacement

Si vous voulez ajuster l’espacement sur plusieurs sections sans chercher des noms de classes ni toucher aux variables CSS, décrivez la modification à Fudge, l’opérateur IA pour les boutiques Shopify. Son éditeur de boutique transforme le langage naturel en CSS pour votre thème :

“Réduis le padding en haut et en bas de toutes les sections d’environ 30 % sur les écrans mobiles.”

Ou plus précisément :

“La section hero a trop de padding en dessous sur mobile — rapproche la section suivante.”

Fudge génère les modifications CSS sous forme de brouillon pour que vous puissiez les vérifier, vous permettant de faire défiler l’aperçu sur votre téléphone avant de publier quoi que ce soit. Les mises en page qui cassent sur les petits écrans font d’ailleurs partie des choses qu’il vérifie quand vous lui demandez où les acheteurs sur mobile abandonnent.

Problèmes d’espacement mobile fréquents et solutions

Trop d’espace entre les sections. Généralement causé par deux sections ayant d’importants paddings en haut et en bas. Réduisez le padding en bas de la première section ou celui en haut de la deuxième.

Texte trop près du bord de l’écran. Les sections ont besoin de padding horizontal sur mobile. Cherchez padding-left/padding-right ou une classe conteneur .page-width qui contrôle les marges horizontales.

Images sans marge en dessous. Quand des images et du texte s’empilent, un espace entre les deux aide la lisibilité. Ajoutez margin-bottom aux conteneurs d’images sur mobile.

Taille de police trop grande pour le mobile. De grands titres sur desktop peuvent forcer des retours à la ligne bizarres sur mobile. Utilisez des media queries pour réduire le font-size des titres sur les petits points de rupture (breakpoints).

Pour modifier l’ordre dans lequel les sections s’empilent sur téléphone, consultez comment réorganiser votre mise en page mobile dans Shopify.

Bien tester l’espacement mobile

L’aperçu mobile de l’éditeur de thème (Theme Editor) est pratique, mais pas efficace à 100 %. Pour tester en conditions réelles :

• Chrome DevTools — F12 → icône téléphone → sélectionnez un préréglage iPhone ou Android
• Test sur un vrai appareil — rien ne vaut une vérification sur votre propre téléphone
• BrowserStack — testez sur de multiples vrais appareils si vous voulez couvrir différentes tailles d’écran

Les tailles mobiles courantes à tester : 375px (iPhone SE), 390px (iPhone 14/15), 412px (Android), 768px (iPad).

FAQ