Points clés
- Certains thèmes proposent des curseurs de padding dans les paramètres de la section dans l’Éditeur de thème.
- Pour un contrôle total sur le padding et le margin, vous avez besoin de CSS dans le dossier assets de votre thème.
- Le padding est l’espace à l’intérieur d’un élément ; le margin est l’espace à l’extérieur d’un élément.
- Dupliquez toujours votre thème avant de modifier des fichiers CSS.
- Fudge peut écrire et appliquer des modifications d’espacement CSS à partir d’une simple description.
Le padding et le margin contrôlent la façon dont les éléments respirent. L’Éditeur de thème vous offre 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 aperçu clair de ces deux méthodes.
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 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
Le padding est l'espace à l'intérieur d'un élément (entre le contenu et la bordure de l'élément). Le margin 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 à l'intérieur d'une section ; utilisez le margin pour l'espace entre les sections ou entre les paragraphes et les boutons.
C'est une question de spécificité CSS. Les curseurs de padding des sections de l'Éditeur de thème appliquent des styles inline ou des règles de haute spécificité qui l'emportent 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.
Un bon point de départ est de 30–50px en haut/en bas sur mobile et de 60–100px sur ordinateur (desktop). De plus grands espaces donnent un style plus design, mais repoussent le contenu en dessous de la ligne de flottaison sur les petits écrans. Utilisez une media query pour que le mobile et le desktop ne partagent pas la même valeur.
Oui. Shopify ajoute template-index à la classe body sur la page d'accueil. Décrivez la modification à Fudge ("ajoute 80px de padding en haut uniquement pour les sections de la page d'accueil") et il écrira le CSS ciblé pour ce template. Méthode manuelle : ciblez votre propre règle avec body.template-index .shopify-section.
Non. Le padding et le margin sont purement visuels — ils n'ajoutent pas d'octets, de scripts, ni de requêtes qui bloquent le 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.
À lire aussi : Masquer une section sur mobile dans Shopify.
À lire aussi : Modifier l’espacement dans Shopify.
À lire aussi : Mettre à jour les couleurs et les polices dans Shopify.