À 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 toucher au CSS, Fudge peut appliquer des changements d’espacement avec précision. Décrivez simplement ce que vous voulez :
“Augmente le line-height du texte principal à 1.8.”
“Ajoute plus d’espace entre le titre du produit et le prix sur les pages produits.”
“Réduis le padding supérieur de la section hero sur la page d’accueil.”
Fudge écrit le code et vous propose un aperçu fonctionnel avant la moindre publication.
