Points clés
- Le padding des sections (l’espace au-dessus/en dessous d’une section) est souvent modifiable dans les paramètres de section de l’éditeur de thème (Theme Editor).
- L’espacement des lignes (line-height) et les marges des éléments nécessitent du CSS dans le dossier assets de ton thème.
- Duplique ton thème avant de modifier les fichiers CSS.
- Fudge peut effectuer des changements d’espacement précis à partir d’une simple description en français.
Pour modifier l’espacement dans Shopify, fais glisser les curseurs Padding top et Padding bottom d’une section dans l’éditeur de thème. Pour l’espacement des lignes et l’espace entre les éléments, ajoute du CSS à la feuille de style de ton thème.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, qui a une note de 4.9 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 te permet d’ajouter ou de retirer de l’espace au-dessus et en dessous de chaque section.
Étape 1. Va dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Clique sur une section dans la barre latérale gauche pour ouvrir ses paramètres.
Étape 3. Fais défiler jusqu’en bas du panneau des paramètres de la section. Cherche les curseurs Padding top et Padding bottom (parfois appelés “Top spacing” et “Bottom spacing”).
Étape 4. Fais glisser les curseurs pour ajuster l’espace. L’aperçu se met à jour en direct.
Étape 5. Clique 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.
Pour une refonte complète de la page d’accueil, découvre comment reconstruire ta page d’accueil Shopify.
Méthode 2 - Modifier l’espacement des lignes (line-height) avec CSS
L’espacement des lignes - l’écart vertical entre les lignes de texte d’un paragraphe - est contrôlé par la propriété CSS line-height. L’éditeur de thème (Theme Editor) ne l’expose pas directement.
Étape 1. Duplique ton thème : va dans Boutique en ligne > Thèmes, clique sur le menu à trois points (…) à côté de ton thème, puis sur Dupliquer.
Étape 2. Sur la copie, clique sur le menu à trois points (…), puis sur Modifier le code.
Étape 3. Ouvre Assets > base.css (ou la feuille de style principale de ton thème).
Étape 4. Ajoute du CSS tout en bas du fichier :
/* Augmenter l'espacement des lignes pour le texte principal */
body {
line-height: 1.8;
}
/* Augmenter l'espacement des lignes uniquement pour les paragraphes */
p {
line-height: 1.7;
}Étape 5. Clique 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.
Pour en savoir plus sur le padding et les margins, découvre comment modifier le padding et la margin sur Shopify.
Méthode 3 - Ajuster l’espacement entre les éléments avec CSS
La Margin (marge externe) est l’espace à l’extérieur d’un élément - l’écart entre un élément et le suivant. Augmenter la margin ajoute de l’espace entre les titres, les paragraphes et les boutons.
Étape 1. Suis les mêmes étapes que pour la Méthode 2 : duplique le thème, ouvre l’éditeur de code, trouve base.css.
Étape 2. Ajoute des 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 principal d'une section */
.section-content {
margin-bottom: 3rem;
}Étape 3. Enregistre.
Trouver le bon sélecteur
Fais un clic droit sur l’élément que tu veux espacer dans ton navigateur, choisis Inspecter, et lis les noms de classes dans le HTML. Utilise-les comme sélecteurs CSS.
Pour les tailles de titres, découvre comment modifier la taille de la 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 entassées | Theme Editor > section > augmenter Padding top/bottom |
| Le texte semble trop dense | CSS : p { line-height: 1.7; } |
| Titres trop proches du contenu en dessous | CSS : h2 { margin-bottom: 1rem; } |
| Trop d’espace au-dessus de la première section | Theme Editor > section > réduire Padding top |
| L’espacement sur mobile a l’air bizarre | CSS avec media query : @media (max-width: 749px) { ... } |
Pour les mises en page sur téléphone, découvre comment améliorer l’espacement sur mobile avec Shopify.
Utiliser Fudge pour modifier les espacements
Si tu préfères ne pas écrire de CSS, Fudge, l’opérateur IA pour les boutiques Shopify, peut appliquer des modifications d’espacement avec précision. Décris simplement ce que tu veux :
“Augmente la hauteur de ligne (line-height) du texte à 1.8.”
“Ajoute plus d’espace entre le titre du produit et le prix sur les pages produits.”
“Réduis le padding du haut sur la section hero de la page d’accueil.”
Fudge lit d’abord le code de ton thème, de sorte que le CSS qu’il génère respecte la façon dont ton thème est construit au lieu d’empiler des surcharges (overrides). Il te montre un brouillon avant de publier quoi que ce soit.
FAQ
Combien d'espace vertical devrait-il y avoir entre les sections ?
Points de départ courants : 60–100px sur ordinateur (padding haut et bas combinés), 30–50px sur mobile. Ajuste selon le rôle de la section — un hero a besoin de plus d'espace qu'une grille de produits. Un rythme vertical constant entre les sections donne un résultat plus professionnel qu'un espacement arbitraire par section.
Dois-je utiliser em ou rem pour l'espacement sur Shopify ?
rem dans la plupart des cas — cela s'adapte à la taille de police racine, ce qui rend les ajustements d'espacement globaux très simples. Utilise em pour un espacement qui doit s'adapter à la taille de la police locale (par ex., la margin autour des grands titres qui doit sembler proportionnelle au titre lui-même). Évite les px pour le padding/margin si tu veux une adaptation responsive.
Pourquoi y a-t-il un espace supplémentaire en haut de ma page d'accueil Shopify ?
Trois causes courantes : (1) la première section a un Padding top défini dans l'éditeur de thème, (2) la barre d'annonces ajoute de l'espace vertical, ou (3) un header fixe avec un élément d'espacement qui réserve sa hauteur. Inspecte avec les DevTools de ton navigateur pour identifier quel élément repousse le contenu vers le bas — ou décris ce que tu vois à Fudge ("il y a un espace blanc supplémentaire en haut de la page d'accueil ; retire-le") et il diagnostiquera et corrigera la source plutôt que de la masquer avec une margin négative.
Le line-height doit-il avoir une unité ou non ?
Sans unité. line-height: 1.6 s'adapte à la taille de la police de l'élément ; line-height: 24px non. Les valeurs sans unité s'héritent de manière prévisible pour les éléments enfants avec des tailles de police différentes. Utilise 1.4–1.6 pour les titres, 1.5–1.8 pour le texte principal. Un line-height plus serré pour du texte d'affichage court ; plus large pour de la lecture longue.
Puis-je utiliser un espacement de style Tailwind sur les thèmes Shopify ?
Oui — mais tu devras ajouter Tailwind au thème manuellement (la plupart des thèmes Shopify ne l'incluent pas). Pour la plupart des boutiques, c'est excessif. Ajoute un petit ensemble de classes utilitaires d'espacement si tu veux des valeurs cohérentes (par ex., .mt-8 { margin-top: 2rem; }) sans toute l'installation de Tailwind. Pour de nouvelles créations, utiliser Tailwind via Hydrogen de Shopify est plus logique que de l'adapter par la suite.
