Comment modifier l'espacement sur Shopify (2026)

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.
• L’espacement des lignes (hauteur de ligne) et les marges des éléments nécessitent du CSS dans le dossier assets de votre thème.
• Dupliquez votre thème avant de modifier les fichiers CSS.
• Fudge permet de faire des modifications d’espacement précises à partir d’une simple description en langage naturel.

Sur Shopify, l’espacement se divise en deux catégories : le padding au niveau des sections (que l’éditeur de thème gère souvent) 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 conçu Fudge - un éditeur de boutique IA avec 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 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’interligne - l’espace vertical entre les lignes de texte dans un paragraphe - est contrôlé par la propriété CSS line-height. L’éditeur de thème ne l’expose pas directement.

Pour plus de détails, consultez notre guide sur comment modifier le padding et le margin sur Shopify.

Article lié : 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 code CSS en bas du fichier :

/* Augmente l'interligne pour le texte principal */
body {
    line-height: 1.8;
}

/* Augmente l'interligne 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) est l’espace à l’extérieur d’un élément - l’écart entre un élément et le suivant. Augmenter la marge ajoute de l’espace pour respirer entre les sections, les titres et les 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 les règles de marge :

/* Ajoute de l'espace sous les titres */
h2 {
    margin-bottom: 1rem;
}

/* Ajoute de l'espace entre les paragraphes */
p {
    margin-bottom: 1rem;
}

/* Augmente l'espace sous le conteneur de contenu 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

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