Points clés à retenir
- Le padding des sections (l’espace au-dessus/en dessous d’une section) est souvent ajustable dans les paramètres de section de l’éditeur de thème.
- L’espacement des lignes (line-height) et les marges des éléments nécessitent de modifier le CSS dans le dossier assets de votre thème.
- Dupliquez votre thème avant de modifier les fichiers CSS.
- Fudge peut effectuer des ajustements d’espacement précis à partir d’une simple description.
L’espacement dans Shopify se divise en deux catégories : le padding au niveau des sections (souvent contrôlé par l’éditeur de thème) et l’espacement précis comme la hauteur de ligne et les marges 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
Points de départ courants : 60-100 px sur desktop (padding haut et bas combinés), 30-50 px sur mobile. Ajustez selon le rôle de la section — un hero a besoin de plus de marge pour respirer qu'une grille de produits. Un rythme vertical cohérent entre les sections donne un aspect plus pro et intentionnel qu'un espacement aléatoire pour chaque section.
rem dans la plupart des cas : ça s'adapte à la taille de police racine (root font size), ce qui simplifie les ajustements globaux. Utilisez em pour un espacement qui doit s'adapter à la taille de la police locale (par ex., la marge autour de grands titres qui doit sembler proportionnelle au titre lui-même). Évitez les px pour le padding/margin si vous voulez une conception responsive.
Trois causes fréquentes : (1) la première section a un Padding top défini dans l'éditeur de thème, (2) la barre d'annonces (announcement bar) ajoute de l'espace vertical, ou (3) le header est en position: sticky, ce qui réserve de la hauteur. Inspectez avec les DevTools de votre navigateur pour identifier l'élément qui pousse le contenu vers le bas — ou décrivez ce que vous voyez à Fudge ("il y a un espace vide en trop en haut de la page d'accueil, supprime-le") et il se chargera d'identifier et de corriger la source du problème plutôt que de le masquer avec une marge négative.
Sans unité. line-height: 1.6 s'adapte au font-size de l'élément ; line-height: 24px ne le fait pas. Les valeurs sans unité sont héritées de manière prévisible par les éléments enfants ayant des tailles de police différentes. Utilisez 1.4-1.6 pour les titres, 1.5-1.8 pour le corps du texte. Un line-height plus resserré pour les gros titres d'affichage ; plus aéré pour la lecture longue.
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 overkill. Ajoutez simplement un petit ensemble de classes utilitaires si vous voulez des valeurs cohérentes (par ex., .mt-8 { margin-top: 2rem; }) sans avoir à configurer tout le build Tailwind. Pour de nouveaux projets à partir de zéro, utiliser Tailwind via Shopify Hydrogen a plus de sens que d'essayer de l'intégrer à un vieux thème.
