Points clés
- Beaucoup de thèmes Shopify intègrent des sliders de padding spécifiques au mobile dans les paramètres de sections — regardez là-bas en premier.
- L’espacement global est souvent géré via les 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 donne une impression de vide à la page et rend le scroll trop long.
- Les media queries CSS vous permettent de définir des valeurs d’espacement complètement 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 qui semble parfaitement équilibrée sur un écran desktop de 1440px a souvent un padding bizarre lorsqu’elle est vue sur un écran d’iPhone de 390px. Soit le surplus d’espace blanc donne l’impression que la page est vide et inachevée, 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 problématique. Cliquez dessus dans la barre latérale gauche ou directement sur le canevas.
Étape 4 — Cherchez les contrôles de padding. Dans le panneau de paramètres à droite, faites défiler vers le bas 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 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.
À lire aussi : Accélérer un thème Shopify.
À lire aussi : Réorganiser la mise en page mobile sur Shopify.
À lire aussi : Modifier l’espacement sur Shopify.
À lire aussi : Changer le padding et les marges sur Shopify.
Étape 5 — Vérifiez le padding de toutes les sections. Les sections peuvent s’empiler bizarrement quand deux sections d’affilée ont toutes les deux un padding de 60px en haut/en bas. Réduire l’un d’entre eux règle souvent le problème d’espacement 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 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 (par 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 soit bon. Une bonne règle générale : le padding mobile devrait être environ la moitié du padding desktop pour la plupart des types de sections.
Dupliquez toujours votre thème avant de modifier 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 globalement. 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 tout votre thème d’un coup. C’est plus efficace que de cibler des sections individuelles, mais attention : un changement global peut avoir des effets indésirables 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 (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
Une règle pratique : le padding mobile ≈ 50-60 % du desktop. Si les sections desktop utilisent 80px en haut/en bas, les sections mobiles utilisent 40-50px. Testez sur un vrai appareil — la bonne valeur dépend de la densité de votre contenu, mais diviser par deux le padding desktop est un bon point de départ pour la plupart des catégories.
rem pour l'espacement lié à la typographie (marges autour des titres/paragraphes) pour qu'il s'adapte à la taille de la police. px pour l'espacement structurel fixe (padding de section, espaces entre conteneurs) où une cohérence visuelle compte plus que la mise à l'échelle. Évitez de mélanger arbitrairement — choisissez une approche par cas d'usage.
Les DevTools simulent le viewport mais pas les facteurs réels de l'appareil : le pixel ratio réel, la hauteur de l'interface du navigateur (barre d'URL, barre d'outils), les safe areas (l'encoche de l'iPhone) et les différences de rendu des polices. Confirmez toujours les changements importants sur un vrai appareil iOS et Android avant de valider.
Au minimum : 375px (iPhone SE, la plus petite taille courante), 390px (iPhone 14/15 — la taille unique la plus courante), 412px (la plupart des Android). Pour les tablettes : 768px (iPad portrait), 820px (iPad Air). Les tests sur de vrais appareils révèlent des problèmes que les émulateurs manquent, en particulier autour de la safe area en bas des iPhones.
Oui — padding: clamp(20px, 5vw, 80px) s'adapte de manière fluide entre mobile et desktop sans media queries. Les thèmes Shopify modernes utilisent de plus en plus clamp() et les propriétés personnalisées CSS pour ça. Le support des navigateurs est excellent. Si vous préférez ne pas chercher le bon sélecteur, décrivez le changement à Fudge ("utilise clamp pour le padding du hero pour qu'il s'adapte de manière fluide entre 30 et 120px") et il écrira la règle au bon endroit.
