Points clés
- Certains thèmes proposent des curseurs de marge interne (padding) dans les paramètres de section de l’éditeur de thème.
- Pour un contrôle total sur le padding et les marges, tu dois utiliser du CSS dans le dossier assets de ton thème.
- Le padding est l’espace à l’intérieur d’un élément ; la marge (margin) est l’espace à l’extérieur d’un élément.
- Duplique toujours ton thème avant de modifier les fichiers CSS.
- Fudge peut écrire et appliquer des modifications d’espacement CSS à partir d’une simple description.
Pour modifier le padding dans Shopify, ouvre une section dans l’éditeur de thème et déplace ses curseurs Marge interne en haut (Padding top) et Marge interne en bas (Padding bottom). Pour les marges (margin), ou les sections sans curseurs, ajoute du CSS.
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, noté 4.9 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 padding au bas des paramètres de 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. Cherche les curseurs Marge interne en haut et Marge interne en bas.
Étape 4. Fais glisser les curseurs jusqu’à la valeur souhaitée. L’aperçu se met à jour en temps réel.
Étape 5. Clique sur Enregistrer.
C’est l’option la plus rapide - aucun code n’est requis. Si les curseurs n’y sont pas, cela signifie que ton thème ne propose pas de contrôles de padding pour cette section, et tu auras besoin de la Méthode 2.
Pour décrire les changements d’espacement au lieu de les définir à la main, découvre l’éditeur de boutique Fudge.
Méthode 2 - Modifier le padding et les marges avec CSS
Étape 1. Duplique d’abord 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 - le plus gros fichier .css dans le dossier Assets).
Étape 4. Ajoute tes règles CSS tout en bas :
/* Ajoute du padding à l'intérieur des sections de la page */
main .shopify-section {
padding-top: 60px;
padding-bottom: 60px;
}
/* Ajoute une marge sous les titres */
h2 {
margin-bottom: 1.5rem;
}
/* Réduit l'espace entre le paragraphe et le bouton */
.button {
margin-top: 1rem;
}Étape 5. Clique sur Enregistrer.
Un simple sélecteur .shopify-section cible également l’en-tête (header), le pied de page (footer) et la barre d’annonces. Dans Dawn et la plupart des thèmes actuels, ces éléments se trouvent en dehors de l’élément <main>, donc main .shopify-section ne modifie que les sections propres à la page.
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.
Padding responsive pour mobile
Un padding qui rend bien sur ordinateur est souvent trop grand sur mobile. Utilise une media query pour le réduire sur les petits écrans :
/* Padding sur ordinateur */
main .shopify-section {
padding-top: 80px;
padding-bottom: 80px;
}
/* Padding sur mobile */
@media (max-width: 749px) {
main .shopify-section {
padding-top: 40px;
padding-bottom: 40px;
}
}Pour plus d’astuces sur mobile, consulte comment améliorer l’espacement sur mobile dans Shopify.
Scénarios courants
| Ce que tu veux | Comment le faire |
|---|---|
| Plus d’espace au-dessus/en-dessous d’une section | Éditeur de thème > section > Curseurs de Marge interne en haut/en 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 l’espace indésirable au-dessus de la première section | Éditeur de thème : réduire la Marge interne en haut sur cette section |
| Un espacement de section cohérent sur toutes les pages | CSS : cibler .shopify-section avec des règles de padding |
Pour la hauteur de ligne et l’espace entre les lignes de texte, voir comment modifier l’espacement dans Shopify.
Utiliser Fudge pour modifier le padding et les marges
Fudge, l’opérateur IA pour les boutiques Shopify, applique les modifications CSS que tu décris en langage naturel. Tu n’as pas besoin de trouver le bon fichier, d’identifier le sélecteur ou d’écrire le CSS toi-même.
“Augmente le padding en haut et en bas sur toutes les sections de la page d’accueil à 80px sur ordinateur, 40px sur mobile.”
“Ajoute plus d’espace sous les titres H2 sur tout le site.”
Fudge écrit le CSS dans ton thème sous forme de brouillon. Tu vérifies l’espacement sur ordinateur et sur mobile dans l’aperçu et tu publies quand le résultat te plaît. Si ça ne va pas, tu peux annuler la modification depuis son historique.
FAQ
Quelle est la différence entre le padding et la 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 (margin) est l'espace à l'extérieur d'un élément (entre cet élément et ses voisins). Utilise le padding pour l'espace à l'intérieur d'une section (y compris l'espace créé par les curseurs de section du thème) ; utilise les marges pour l'espace entre les paragraphes, les titres et les boutons.
Pourquoi mes modifications CSS de padding ne s'affichent-elles pas ?
C'est une question de spécificité CSS. Les curseurs de padding de l'éditeur de thème appliquent des styles en ligne ou des règles à forte spécificité qui l'emportent sur ton CSS personnalisé. Tu peux soit correspondre à la spécificité du thème (par ex., .shopify-section .container { padding: ... }), utiliser !important avec modération, ou mettre le curseur à zéro dans l'éditeur de thème avant d'ajouter du CSS.
Quel padding les sections de la page d'accueil devraient-elles avoir sur mobile ?
Un bon point de départ est de 30 à 50 px en haut/en bas sur mobile et de 60 à 100 px sur ordinateur. Des espaces plus grands donnent un côté plus design mais poussent le contenu sous la ligne de flottaison sur les petits écrans. Utilise une media query pour que le mobile et l'ordinateur ne partagent pas la même valeur.
Puis-je modifier le padding uniquement sur la page d'accueil et ne pas toucher aux pages produits ?
Oui. De nombreux thèmes ajoutent template-index à la classe body sur la page d'accueil ; vérifie le tien dans les DevTools. Décris la modification à Fudge ("ajoute un padding en haut de 80px uniquement aux sections de la page d'accueil") et il écrira le CSS ciblé pour le template. Méthode manuelle : cible ta propre règle sur body.template-index .shopify-section.
L'ajustement du padding affectera-t-il la vitesse du site Shopify ?
Non. Le padding et les marges sont purement visuels — ils n'ajoutent pas d'octets, de scripts, ou de tâches bloquant le rendu. La vitesse du site dépend des images, du JavaScript, des polices et des applications. Tu peux ajuster l'espacement librement sans te soucier des performances.
