À retenir
- Le padding de section (l’espace au-dessus/en dessous) est souvent ajustable dans les paramètres de chaque section de l’éditeur de thème (Theme Editor).
- L’espacement des lignes (line-height) et les marges (margin) des éléments nécessitent de modifier le CSS dans le dossier assets de votre thème.
- Dupliquez votre thème avant d’éditer les fichiers CSS.
- Fudge permet de modifier précisemment l’espacement à partir d’une simple description textuelle.
L’espacement dans Shopify se divise en deux catégories : le padding au niveau de la section (souvent contrôlé par l’éditeur de thème) et l’espacement précis comme la hauteur de ligne et la marge des éléments (qui nécessitent du CSS). Voici comment gérer les deux.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge - un éditeur de boutique par IA noté 5.0 sur le Shopify App Store.
Méthode 1 - Ajuster l’espacement des sections dans l’éditeur de thème
De nombreux thèmes Shopify proposent des contrôles de padding au niveau de la section. Cela vous permet d’ajouter ou de retirer de l’espace au-dessus et en dessous de chaque section.
À lire aussi : Fudge Store Editor.
À lire aussi : Refaire la page d’accueil de votre boutique Shopify.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Cliquez sur une section dans la barre latérale gauche pour ouvrir ses paramètres.
Étape 3. Faites défiler jusqu’en bas du panneau des paramètres de la section. Cherchez les curseurs Espacement supérieur et Espacement inférieur (parfois appelés “Padding top” et “Padding bottom”).
Étape 4. Faites glisser les curseurs pour ajuster l’espace. L’aperçu se met à jour en direct.
Étape 5. Cliquez sur Enregistrer.
Tous les thèmes n’ont pas ces curseurs. Le thème Dawn les inclut sur la plupart des sections. Les thèmes plus anciens ne les ont souvent pas.
Méthode 2 - Modifier l’espacement des lignes (line-height) avec CSS
L’espacement des lignes - l’espace vertical entre les lignes de texte d’un paragraphe - est contrôlé par la propriété CSS line-height. L’éditeur de thème ne propose pas de réglage direct pour cela.
Pour plus de détails, consultez notre guide : Comment modifier le padding et les margins sur Shopify.
À lire aussi : Améliorer l’espacement sur mobile dans Shopify.
Étape 1. Dupliquez votre thème : Boutique en ligne > Thèmes > Actions > Dupliquer.
Étape 2. Sur votre thème actif, allez dans Actions > Modifier le code.
Étape 3. Ouvrez Assets > base.css (ou la feuille de style principale de votre thème).
Étape 4. Ajoutez le CSS suivant tout en bas du fichier :
/* Augmenter l'espacement des lignes pour le corps du texte */
body { line-height: 1.8; }
/* Augmenter l'espacement des lignes uniquement pour les paragraphes */
p { line-height: 1.7; }Étape 5. Cliquez sur Enregistrer.
Valeurs de line-height : Une valeur sans unité comme 1.8 signifie 1,8 fois la taille de la police. La plupart des textes se lisent bien avec une valeur comprise entre 1.5 et 1.8.
Méthode 3 - Ajuster l’espacement entre les éléments avec CSS
La marge (margin) correspond à l’espace à l’extérieur d’un élément - l’écart entre un élément et le suivant. Augmenter la marge permet d’aérer vos sections, titres et paragraphes.
Étape 1. Suivez les mêmes étapes que pour la méthode 2 : dupliquez le thème, ouvrez l’éditeur de code, trouvez base.css.
Étape 2. Ajoutez vos règles de margin :
/* Ajouter de l'espace sous les titres */
h2 { margin-bottom: 1rem; }
/* Ajouter de l'espace entre les paragraphes */
p { margin-bottom: 1rem; }
/* Augmenter l'espace sous le conteneur d'une section */
.section-content { margin-bottom: 3rem; }Étape 3. Enregistrez.
Trouver le bon sélecteur
Faites un clic droit sur l’élément que vous souhaitez espacer dans votre navigateur, choisissez Inspecter, et lisez les noms de classes dans le code HTML. Utilisez-les comme sélecteurs CSS.
À lire aussi : Changer la taille de police des titres sur Shopify.
Espacement entre les sections vs espacement à l’intérieur des sections
C’est une distinction importante :
- Entre les sections : contrôlé par le padding supérieur/inférieur (top/bottom) de chaque section. Utilisez les curseurs de l’éditeur de thème s’ils sont disponibles, ou du CSS sur le conteneur englobant de la section.
- À l’intérieur des sections : l’espace entre un titre et un paragraphe, entre les éléments d’une liste, ou entre un bouton et le texte au-dessus. Cela nécessite du CSS ciblant les éléments internes spécifiques.
Corrections d’espacement fréquentes
| Problème | Solution |
|---|---|
| Les sections semblent trop tassées | Éditeur de thème > section > augmenter l’espacement supérieur/inférieur (Padding top/bottom) |
| Le texte est trop dense | CSS : p { line-height: 1.7; } |
| Les titres sont trop proches du contenu en dessous | CSS : h2 { margin-bottom: 1rem; } |
| Trop d’espace au-dessus de la première section | Éditeur de thème > section > réduire le Padding top |
| L’espacement sur mobile est incorrect | CSS avec media query : @media (max-width: 768px) { ... } |
Utiliser Fudge pour modifier les espacements
Si vous préférez ne pas écrire de CSS, Fudge peut appliquer les changements d’espacement avec précision. Décrivez ce que vous voulez :
“Augmenter la hauteur de ligne du texte principal à 1.8.”
“Ajouter plus d’espace entre le titre du produit et le prix sur les pages produits.”
“Réduire le padding en haut sur la section hero de la page d’accueil.”
Fudge écrit le code et vous montre un brouillon avant de publier quoi que ce soit.
FAQ
Combien d’espace vertical les sections devraient-elles avoir entre elles ?
Points de départ courants : 60–100px sur ordinateur (padding haut et bas combinés), 30–50px sur mobile. Ajustez selon le rôle de la section — un hero a besoin de plus d’espace pour respirer qu’une grille de produits. Un rythme vertical constant et cohérent entre les sections paraît plus intentionnel qu’un espacement arbitraire au sein de chaque section.
Dois-je utiliser em ou rem pour l’espacement sur Shopify ?
rem dans la plupart des cas — il s’adapte à la taille de la police racine, ce qui rend les ajustements globaux d’espacement beaucoup plus simples. Utilisez em pour l’espacement qui doit s’adapter à la taille de la police locale (par ex., la marge autour de grands titres qui devrait sembler proportionnelle au titre lui-même). Évitez px pour le padding/margin si vous désirez une mise à l’échelle responsive.
Pourquoi y a-t-il un espace supplémentaire en haut de ma page d’accueil Shopify ?
Trois causes habituelles : (1) la première section a un “Padding top” de défini dans l’éditeur de thème, (2) la barre d’annonces ajoute de l’espace vertical, ou (3) le header a un position: sticky qui réserve de la hauteur. Inspectez avec les DevTools du navigateur pour identifier quel élément pousse le contenu vers le bas — ou décrivez ce que vous voyez à Fudge (“il y a un espace en trop en haut de la page d’accueil ; supprimez-le”) et il diagnostiquera et corrigera le problème à la source plutôt que de le masquer avec une marge négative.
Le line-height doit-il utiliser une unité ou être sans unité ?
Sans unité. Un line-height: 1.6 s’adapte à la taille de police de l’élément ; line-height: 24px ne le fait pas. Les valeurs sans unité s’héritent de manière prévisible dans les éléments enfants avec des tailles de police différentes. Utilisez 1.4–1.6 pour les titres, 1.5–1.8 pour le texte principal. Un line-height plus serré pour le texte de mise en avant ; plus large pour la lecture de textes longs.
Puis-je utiliser un espacement de style Tailwind sur les thèmes Shopify ?
Oui — mais vous devrez ajouter Tailwind au thème manuellement (la plupart des thèmes Shopify ne l’incluent pas). Pour la majorité des boutiques, c’est une solution tout à fait disproportionnée. Ajoutez un petit ensemble de classes utilitaires d’espacement si vous voulez des valeurs cohérentes (par ex., .mt-8 { margin-top: 2rem; }) sans le poids complet de Tailwind. Pour de nouveaux projets, intégrer Tailwind via Hydrogen de Shopify est plus pertinent qu’une adaptation a posteriori.
