Points à retenir
- 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, 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 (margin) 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 modifications d’espacement CSS à partir d’une simple description.
Le padding et les marges contrôlent la façon dont les éléments respirent. L’éditeur de thème vous offre des contrôles d’espacement de base sur certaines sections. Pour des réglages plus précis, vous aurez besoin de CSS. Voici un guide clair pour les deux.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique IA noté 5.0 sur le Shopify App Store.
Padding vs marge - une explication rapide
Ces deux propriétés sont faciles à confondre.
Le padding (ou marge interne) 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, l’éloignant des bords de la section.
La marge (margin, ou marge externe) 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 grandes sections de la page, le padding est généralement ce qu’il vous faut. Pour les espaces entre des éléments individuels comme les paragraphes, les titres et les boutons, c’est la marge que vous devez modifier.
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.
Article lié : Fudge Store Editor.
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 fichier .css le plus volumineux 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 en dessous des titres */
h2 { margin-bottom: 1.5rem; }
/* Réduire l'espace entre un paragraphe et un bouton */
.button { margin-top: 1rem; }Étape 5. Cliquez sur Enregistrer.
Raccourci CSS pour le padding
/* Les 4 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 type de 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. 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 de marge interne en haut/en bas |
| Moins de padding à l’intérieur d’un bloc de contenu | CSS : padding sur la classe du bloc |
| Plus d’espace entre un titre et un 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 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 |
Utiliser Fudge pour modifier le padding et les marges
Fudge peut appliquer des changements CSS à partir d’une simple description. Vous n’avez pas besoin de trouver le bon fichier, d’identifier le sélecteur, ni 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 ordinateur et 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.
Article lié : Masquer une section sur mobile dans Shopify.
Article lié : Modifier l’espacement dans Shopify.
Article lié : Mettre à jour les couleurs et les polices dans Shopify.