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

Principaux points à retenir

• De nombreux thèmes Shopify incluent des curseurs de padding mobile séparés dans les paramètres de section — vérifiez-y en premier.
• L’espacement global est souvent contrôlé via des propriétés personnalisées CSS dans assets/base.css.
• Le problème le plus courant vient des sections qui ont trop de padding en haut/bas sur mobile, ce qui rend la page vide et longue à faire défiler.
• Les media queries CSS vous permettent de définir des valeurs d’espacement totalement différentes selon la taille de l’écran.

Les problèmes d’espacement sur mobile sont l’une des plaintes de design les plus fréquentes sur Shopify. Une section parfaitement équilibrée sur un écran desktop de 1440px a souvent un padding inadapté sur un écran d’iPhone de 390px. Soit il y a trop d’espace vide et la page semble incomplète, soit le contenu est entassé sans espace pour respirer.

Ce guide vous montre comment diagnostiquer et corriger l’espacement sur mobile.

Pourquoi l’espacement mobile pose problème

Les designs desktop sont généralement conçus à plus grande échelle — des paddings plus grands, des marges plus larges, plus d’espace entre les éléments. Quand ces mêmes valeurs en pixels s’appliquent sur mobile, la proportion est faussée. 60px de padding supérieur qui rendent bien sur desktop occupent 15% de la hauteur d’un écran mobile.

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

Article connexe : Cacher 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 page.

Étape 4 — Cherchez les contrôles de padding. Dans le panneau de réglages à droite, descendez pour trouver :

• Les curseurs “Top padding” / “Bottom padding”
• Les curseurs “Padding top (mobile)” / “Padding bottom (mobile)”
• “Section spacing”

Lorsqu’il existe des curseurs séparés pour le mobile, ajustez-les indépendamment de la version desktop. C’est l’approche la plus propre.

Article connexe : Accélérer un thème Shopify.

Article connexe : Réorganiser la mise en page mobile dans Shopify.

Article connexe : Modifier l’espacement dans Shopify.

Article connexe : Changer le padding et les margins dans Shopify.

Étape 5 — Vérifiez le padding sur toutes les sections. Les sections peuvent mal s’empiler quand deux sections consécutives ont chacune 60px de padding en haut et en bas. En réduire un résout souvent l’écart visuel.

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 ultra-précis.

Étape 1 — 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 2 — Ouvrez votre fichier CSS. Boutique en ligne → Thèmes → Actions → Modifier le code → assets/base.css.

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

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

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

Dupliquez toujours votre thème avant de faire des modifications dans le code.

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 de manière globale. Cherchez des variables comme celles-ci dans base.css :

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

Modifier ces valeurs affecte l’espacement sur l’ensemble de votre thème d’un coup. C’est plus efficace que de cibler des sections individuellement, 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 avoir à traquer les noms de classes ou modifier des variables CSS, décrivez simplement la modification à Fudge :

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

Ou plus spécifiquement :

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

Fudge gérère les modifications CSS sous forme de brouillon pour que vous puissiez les vérifier.

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

Trop d’espace entre les sections. Généralement dû au fait que les deux sections ont un grand padding en haut et en bas. Réduisez le padding inférieur de la première section ou le padding supérieur de la seconde.

Le texte est 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 de conteneur .page-width qui gère les marges horizontales.

Des images sans marge en bas. Quand les images et le texte s’empilent sur mobile, ajouter un espace entre eux aide à la lisibilité. Ajoutez margin-bottom aux conteneurs d’images sur mobile.

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

Bien tester l’espacement mobile

L’aperçu mobile de l’Éditeur de thème est très utile mais pas parfaitement fidèle. Pour de vrais tests :

• Chrome DevTools — F12 → icône de téléphone → choisissez un profil iPhone ou Android
• Tester 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

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