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

Un bon point de départ est 30 à 50px en haut et en bas sur mobile et 60 à 100px sur desktop. Utilisez une media query pour que le mobile et le desktop n'utilisent pas la même valeur.

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

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.

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.

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 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

Quelle est la différence entre padding et 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 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 la margin pour l’espacement entre les sections ou entre les paragraphes et les boutons.

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

La 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 supplantent votre CSS personnalisé. Vous pouvez soit vous aligner sur la spécificité du thème (ex. .shopify-section .container { padding: ... }), soit utiliser !important avec parcimonie, ou bien mettre 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 desktop. Des espacements plus importants ont un côté plus design mais repoussent le contenu sous 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.

Puis-je modifier le padding uniquement sur la page d’accueil et ne pas toucher aux pages produits ?

Oui. Shopify ajoute template-index à la classe du tag body sur la page d’accueil. Décrivez le changement à Fudge (“ajouter 80px de padding en haut uniquement aux sections de la page d’accueil”) et il écrira le CSS spécifique à ce template. Méthode manuelle : ciblez votre propre règle sur body.template-index .shopify-section.

Ajuster le padding affectera-t-il la vitesse du site Shopify ?

Non. Le padding et la margin sont purement visuels — ils n’ajoutent pas d’octets, de scripts, ni d’éléments bloquant le rendu. La vitesse du site dépend de vos images, du JavaScript, des polices et des applications. Vous pouvez ajuster l’espacement librement sans vous soucier des performances.