Comment masquer une section sur mobile dans Shopify (2026)

Points clés

• De nombreux thèmes ont un bouton “Masquer sur mobile” (Hide on mobile) intégré pour chaque section dans l’Éditeur de thème — vérifiez-y d’abord.
• Si votre thème n’a pas ce bouton, vous pouvez masquer une section sur mobile avec une media query CSS.
• Le CSS personnalisé se trouve dans Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → CSS personnalisé.
• Fudge peut ajouter des contrôles de visibilité sur mobile à n’importe quelle section sans que vous ayez à écrire de code.

Certaines sections rendent très bien sur ordinateur, mais encombrent l’expérience sur mobile. Un grand bloc image-texte, une rangée de récompenses, une bannière promotionnelle uniquement pour ordinateur — parfois, ils n’ont tout simplement pas leur place sur un petit écran.

Voici comment les masquer.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de vitrines Shopify. Nous avons également créé Fudge — un éditeur de vitrine IA avec une note de 5,0 sur le Shopify App Store.

Méthode 1 — utiliser le bouton de visibilité de l’Éditeur de thème

C’est l’approche la plus simple et elle fonctionne avec de nombreux thèmes Shopify modernes.

Sur le même sujet : Masquer du contenu sur mobile dans Shopify.

Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.

Étape 2. Naviguez jusqu’à la page contenant la section que vous souhaitez masquer.

Étape 3. Cliquez sur la section dans la barre latérale gauche pour ouvrir ses paramètres.

Étape 4. Cherchez une case à cocher “Masquer sur mobile” (Hide on mobile) ou une option “Visibilité” (Visibility). Dans certains thèmes, elle apparaît en bas du panneau des paramètres de la section. Dans d’autres, elle apparaît sous forme d’icône d’appareil.

Étape 5. Activez l’option et enregistrez.

Si vous ne voyez pas cette option, votre thème ne la propose pas nativement. Utilisez plutôt la méthode 2.

Comment modifier ma vue mobile sur Shopify ?

L’Éditeur de thème dispose d’une barre d’outils d’aperçu par appareil en haut. Cliquez sur l’icône du téléphone portable pour passer l’aperçu en vue mobile.

Cela vous montre exactement à quoi ressemble votre boutique sur mobile. Les modifications que vous apportez dans cette vue (lorsque cela est pris en charge) s’appliquent uniquement au mobile. Pour des différences de mise en page qui vont au-delà de la visibilité des sections, vous aurez besoin de CSS ou d’un outil comme Fudge.

Méthode 2 — masquer avec du CSS sur mobile

Si votre thème n’a pas de bouton de visibilité, vous pouvez masquer une section en utilisant une media query CSS.

Étape 1. Identifiez la section que vous souhaitez masquer. Faites un clic droit dessus dans le navigateur → Inspecter → trouvez la classe ou l’ID sur l’élément le plus à l’extérieur. Cela ressemblera à .shopify-section-template--hero ou à un ID de section personnalisé.

Étape 2. Allez dans Boutique en ligne → Thèmes → Personnaliser → scrollez tout en bas de la barre latérale gauche → cliquez sur Paramètres du thème → scrollez jusqu’à CSS personnalisé.

Étape 3. Ajoutez ce CSS, en remplaçant .your-section-class par la vraie classe :

@media (max-width: 767px) {
  .your-section-class {
    display: none;
  }
}

Étape 4. Enregistrez.

La section sera désormais invisible sur les écrans plus étroits que 768px - le breakpoint standard pour mobile. Elle reste entièrement visible sur tablette et ordinateur.

Sur le même sujet : Accélérer un thème Shopify.

Sur le même sujet : Améliorer l’espacement sur mobile dans Shopify.

Sur le même sujet : Masquer une section sur ordinateur dans Shopify.

Important : masquer avec du CSS chargera quand même le code HTML de la section. La section existe dans le code source de la page - elle n’est simplement pas affichée. Pour les sections critiques en matière de performances contenant de grandes images, supprimer complètement la section (ou utiliser une option du thème) est une meilleure approche.

Quels sont les breakpoints utilisés par Shopify ?

Les thèmes Shopify n’imposent pas de norme de breakpoint unique, mais la plupart suivent des conventions communes :

Dawn utilise 750px comme principal breakpoint mobile/tablette. Vérifiez la feuille de style de votre thème si vous avez besoin de la valeur exacte.

Méthode 3 — utiliser Fudge pour ajouter des contrôles de visibilité sur mobile

Si vous avez besoin d’un contrôle précis sur ce qui s’affiche sur mobile sur plusieurs sections, Fudge peut ajouter de vrais boutons de visibilité mobile/ordinateur directement dans le schéma de section de votre thème.

Décrivez ce que vous souhaitez :

“Ajoute un bouton ‘masquer sur mobile’ à la section de la bannière promotionnelle sur ma page d’accueil.”

Fudge modifie le schéma de la section et ajoute la logique de rendu conditionnel — de la même manière qu’un développeur le ferait. Le bouton apparaît ensuite dans l’Éditeur de thème pour que votre équipe puisse l’utiliser sans coder.

Masquer une section sur mobile affecte-t-il le SEO ?

Utiliser display: none en CSS ne supprime pas le contenu de l’index de Google. Google fait le rendu des pages et peut lire le contenu masqué en CSS. Pour le SEO, le contenu existe toujours.

Si le contenu n’est vraiment pas pertinent sur mobile et que vous ne voulez pas qu’il soit indexé, la meilleure approche est d’utiliser le rendu de section de Shopify pour l’exclure conditionnellement du HTML sur mobile - ce qui nécessite de coder ou d’utiliser Fudge.

Pour la plupart des marchands, display: none convient parfaitement.