Modifier le padding et les marges dans Shopify : Paramètres & CSS (2026)

Points clés

Certains thèmes proposent des curseurs de padding (remplissage) dans les paramètres de section de l’éditeur de thème.

Pour un contrôle total du padding et de la marge (margin), vous aurez besoin de CSS dans le dossier assets de votre thème.

Le padding est l’espace à l’intérieur d’un élément ; la marge est l’espace à l’extérieur d’un élément.

Dupliquez toujours votre thème avant de modifier les fichiers CSS.

Fudge peut écrire et appliquer des changements d’espacement CSS à partir d’une simple description en langage naturel.

Le padding et les marges contrôlent la façon dont les éléments respirent. L’éditeur de thème vous donne des contrôles de padding de base sur certaines sections. Pour tout ce qui est plus spécifique, vous aurez besoin de CSS. Voici un guide clair sur 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 IA avec une note de 4.8 sur le Shopify App Store.

Padding vs marge - une explication rapide

Ces deux propriétés sont faciles à confondre.

Le Padding est l’espace à l’intérieur d’un élément, entre le contenu de l’élément et sa bordure. Augmenter le padding d’une section pousse le contenu vers l’intérieur, en l’éloignant des bords de la section.

La Marge (ou margin) est l’espace à l’extérieur d’un élément, entre l’élément et ses voisins. Augmenter la marge d’une section l’éloigne des sections ou éléments adjacents.

Pour les espaces visuels entre les sections de la page, le padding est généralement ce qu’il vous faut. Pour les espaces entre des éléments individuels tels que les paragraphes, les titres et les boutons, la marge est ce qu’il vous faut.

Méthode 1 - Modifier le padding d’une section dans l’éditeur de thème

Les thèmes Shopify modernes incluent souvent des curseurs de marge au bas des paramètres de la section.

É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’au bas du panneau. Cherchez les curseurs Marge interne en haut (Padding top) et Marge interne en bas (Padding bottom).

Étape 4. Faites glisser les curseurs jusqu’à la valeur souhaitée. L’aperçu se met à jour en temps réel.

Étape 5. Cliquez sur Enregistrer.

C’est l’option la plus rapide - aucun code n’est requis. Si les curseurs ne sont pas là, c’est que votre thème ne propose pas de contrôles de padding pour cette section, et vous aurez besoin de la méthode 2.

Méthode 2 - Modifier le padding et les marges avec CSS

Étape 1. Dupliquez d’abord 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 - le plus gros fichier .css dans le dossier Assets).

Étape 4. Ajoutez vos règles CSS tout en bas :

/* Ajouter du padding à l'intérieur d'une section */
.shopify-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Ajouter une marge sous les titres */
h2 {
    margin-bottom: 1.5rem;
}

/* Réduire l'espace entre le paragraphe et le bouton */
.button {
    margin-top: 1rem;
}

Étape 5. Cliquez sur Enregistrer.

Raccourci CSS pour le padding

/* Les quatre côtés : haut droite bas gauche */
.element {
    padding: 40px 20px 40px 20px;
}

/* Haut/bas | Gauche/droite */
.element {
    padding: 40px 20px;
}

/* Tous les côtés égaux */
.element {
    padding: 40px;
}

Le même raccourci fonctionne pour margin.

Trouver le bon sélecteur CSS

Faites un clic droit sur l’élément que vous souhaitez ajuster dans votre navigateur et choisissez Inspecter. Regardez les noms de classe sur l’élément dans le panneau HTML - ce sont vos sélecteurs CSS.

Besoin de modifier précisément le padding ou les marges sans écrire de CSS ?

Try Fudge for Free

Padding responsive pour mobile

Un padding qui rend bien sur ordinateur (desktop) semble souvent trop grand sur mobile. Utilisez une media query pour le réduire sur les petits écrans :

Article lié : Améliorer l’espacement sur mobile dans Shopify.

/* Padding sur ordinateur */
.shopify-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Padding sur mobile */
@media (max-width: 768px) {
    .shopify-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

Scénarios courants

Ce que vous voulez	Comment faire
Plus d’espace au-dessus/en dessous d’une section	Éditeur de thème > section > Curseurs Padding haut/bas
Un padding plus serré dans un bloc de contenu	CSS : `padding` sur la classe du bloc
De l’espace entre le titre et le paragraphe	CSS : `margin-bottom` sur le titre
Supprimer un espace indésirable au-dessus de la première section	Éditeur de thème : réduire le Padding haut sur cette section
Un espacement de section cohérent sur toutes les pages	CSS : cibler `.shopify-section` avec des règles de `padding`

Utiliser Fudge pour modifier le padding et les marges

Fudge peut appliquer des modifications CSS à partir de requêtes en langage naturel. Vous n’avez pas besoin de trouver le bon fichier, d’identifier le sélecteur ou d’écrire le CSS vous-même.

“Augmente le padding en haut et en bas de toutes les sections de la page d’accueil à 80px sur desktop, 40px sur mobile.”

“Ajoute plus d’espace en dessous des titres H2 sur tout le site.”

Fudge écrit le code, l’applique en tant que brouillon, et vous vérifiez avant de publier.

FAQ

Quelle est la différence entre padding et marge (margin) dans Shopify ?

Le padding est l'espace à l'intérieur d'un élément (entre le contenu et la bordure de l'élément). La marge est l'espace à l'extérieur d'un élément (entre cet élément et ses voisins). Utilisez le padding pour donner de l'espace de respiration à l'intérieur d'une section ; utilisez la marge pour l'écart entre les sections ou entre les paragraphes et les boutons.

Pourquoi mes modifications de padding CSS ne s'affichent-elles pas ?

C'est dû à la spécificité CSS. Les curseurs de padding des sections de l'éditeur de thème appliquent des styles en ligne (inline) ou des règles à haute spécificité qui prennent le pas sur votre CSS personnalisé. Soit vous vous alignez sur la spécificité du thème (par ex. .shopify-section .container { padding: ... }), soit vous utilisez !important avec parcimonie, ou bien vous mettez le curseur à zéro dans l'éditeur de thème avant d'ajouter le CSS.

Quel padding les sections de la page d'accueil devraient-elles avoir sur mobile ?

Un bon point de départ est 30–50px en haut/bas sur mobile et 60–100px sur ordinateur. Des espaces plus grands donnent un look plus design, mais repoussent le contenu sous la ligne de flottaison sur les petits écrans. Utilisez une media query pour que les versions mobile et bureau ne partagent pas la même valeur.

Puis-je modifier le padding uniquement sur la page d'accueil et laisser les pages produits intactes ?

Oui. Shopify ajoute template-index à la classe body de la page d'accueil. Décrivez le changement à Fudge ("add 80px top padding only to homepage sections") et il écrira le CSS ciblé sur ce template. Méthode manuelle : ciblez votre propre règle avec body.template-index .shopify-section.

L'ajustement du padding va-t-il affecter la vitesse de mon site Shopify ?

Non. Le padding et les marges sont purement visuels — ils n'ajoutent pas d'octets, de scripts, ni de blocage de rendu. La vitesse du site dépend des images, du JavaScript, des polices et des applications. Vous pouvez ajuster l'espacement librement sans vous soucier des performances.