Masquer du contenu sur mobile dans Shopify : Option ou CSS (2026)

À retenir

L’Éditeur de thème (Theme Editor) a peut-être déjà des options de visibilité par section — vérifiez d’abord les paramètres de la section.

Le CSS display: none dans un bloc @media (max-width: 749px) masque n’importe quel élément sur mobile.

Ajoutez du CSS personnalisé au fichier assets/base.css dans l’éditeur de code de votre thème.

Fudge peut ajouter une visibilité responsive à n’importe quel élément sans que vous n’ayez à écrire de CSS manuellement.

Pour masquer du contenu sur mobile dans Shopify, cherchez d’abord un paramètre “Masquer sur mobile” ou de visibilité dans les paramètres de la section. S’il n’y en a pas, ajoutez @media (max-width: 749px) { .votre-classe { display: none; } } au CSS de votre thème.

Quand masquer du contenu sur mobile

Avant de masquer quoi que ce soit, demandez-vous si vous résolvez le bon problème. Le contenu masqué se charge quand même — il n’est juste pas visible. Si vous masquez de grandes images ou des widgets complexes, demandez-vous s’ils devraient même être chargés sur mobile pour des raisons de performance.

Bons candidats au masquage sur mobile :

Illustrations ou icônes décoratives destinées uniquement au desktop
Menus de navigation secondaires qui font doublon avec le menu hamburger sur mobile
Grilles de logos “Vu dans” qui prennent trop d’espace vertical
Texte explicatif uniquement pour desktop (“survolez l’image pour zoomer”)
Grands tableaux de données qui devraient être remplacés par une alternative mobile-friendly

Pour afficher une section uniquement sur mobile, consultez comment masquer une section sur desktop dans Shopify.

Méthode 1 — Paramètres de section dans l’éditeur de thème

Commencez par ici avant de toucher au code.

Étape 1 — Ouvrez l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser.

Étape 2 — Sélectionnez la section ou le bloc que vous souhaitez masquer sur mobile.

Étape 3 — Recherchez les paramètres de visibilité. Dans le panneau de configuration à droite, certains thèmes incluent des options telles que :

“Masquer sur mobile”
“Afficher sur ordinateur uniquement”
“Visibilité de l’appareil : Bureau / Mobile / Les deux”

Si l’option existe, activez-la et vérifiez à l’aide de l’aperçu mobile (icône de téléphone en haut de l’éditeur).

Méthode 2 — La media query CSS (l’approche universelle)

Si votre thème n’a pas d’options de visibilité, le CSS est la solution fiable. Cela fonctionne pour n’importe quel élément — sections, blocs, éléments HTML individuels — et ne nécessite pas de développeur.

Étape 1 — Dupliquez votre thème. Allez dans Boutique en ligne → Thèmes (Online Store → Themes), cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Dupliquer. Faites la modification sur la copie.

Étape 2 — Trouvez la classe de l’élément. Dans votre navigateur, faites un clic droit sur l’élément que vous souhaitez masquer → Inspecter (Inspect) → notez le nom de la classe sur l’élément le plus à l’extérieur (ex. : announcement-bar, section-rich-text, logo-bar).

Étape 3 — Ouvrez le CSS de votre thème. Sur la copie, cliquez sur le menu à trois points (…), puis sur Modifier le code (Edit code), et ouvrez assets/base.css.

Étape 4 — Ajoutez une media query tout en bas du fichier :

@media (max-width: 749px) {
    .votre-classe-element {
        display: none;
    }
}

Remplacez .votre-classe-element par la vraie classe trouvée à l’Étape 2.

Étape 5 — Sauvegardez et testez. Redimensionnez la fenêtre de votre navigateur à moins de 750px de large, ou utilisez l’émulation d’appareil des Chrome DevTools (F12 → icône téléphone) pour confirmer que l’élément est bien masqué.

Méthode 3 — Fudge pour ajouter des contrôles de visibilité responsive

Si vous voulez une vraie solution qui fonctionne via le Theme Editor sans avoir à chercher des noms de classes, Fudge, l’opérateur IA pour les boutiques Shopify, peut ajouter de vrais paramètres de visibilité à n’importe quelle section via son éditeur de boutique.

Décrivez-le simplement :

“Masque la section de la bannière décorative desktop sur les écrans mobiles.”

Ou :

“Ajoute un bouton afficher/masquer sur mobile à notre section logo bar.”

Fudge prépare la modification pour que vous puissiez la revoir. Rien n’est mis en ligne tant que vous ne l’avez pas approuvé. Si vous masquez du contenu parce que vos pages mobiles semblent surchargées, Fudge peut aussi vous montrer quelles pages perdent le plus d’acheteurs sur mobile en utilisant vos données Google Analytics, et vous suggérer quoi simplifier en premier.

Ajoutez des contrôles de visibilité responsive sans écrire de CSS.

Démarrer l'essai gratuit

Comment changer la vue mobile dans Shopify

La façon la plus courante de vérifier votre mise en page mobile est l’aperçu du Theme Editor :

Ouvrez Boutique en ligne → Thèmes → Personnaliser
Cliquez sur l’icône téléphone en haut au centre
Naviguez sur vos pages pour vérifier le rendu mobile

Pour des tests plus précis, utilisez les Chrome DevTools (F12 → cliquez sur l’icône téléphone/tablette dans la barre d’outils). Cela vous permet de sélectionner des tailles d’appareils spécifiques et d’interagir avec la page comme le ferait un utilisateur mobile.

Comment masquer une section sur mobile dans Shopify ?

Pour masquer une section entière sur mobile :

Vérifiez si votre thème possède une option “Masquer sur mobile” dans les paramètres de la section (le plus simple)
Sinon, trouvez la classe CSS de la section en utilisant l’outil Inspecter du navigateur
Ajoutez display: none dans un bloc @media (max-width: 749px) dans assets/base.css

Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour le desktop, donc max-width: 749px correspond à la mise en page mobile de Dawn. D’autres thèmes utilisent des valeurs différentes, alors vérifiez le CSS existant de votre thème pour respecter sa convention.

Masquer vs supprimer du contenu

Masquer avec du CSS garde le contenu dans le HTML — il ne s’affiche tout simplement pas. C’est très bien pour des éléments décoratifs, mais ce n’est pas l’idéal pour :

Du contenu qui ralentit le chargement de la page (grandes images, iframes vidéo)
Du contenu que vous ne voulez jamais voir sur mobile (utilisez plutôt une section mobile séparée)

Pour du contenu sensible à la performance, utilisez le lazy-load pour les images et les vidéos (loading="lazy") pour que les téléphones ne téléchargent pas ce qu’ils n’affichent pas, ou créez une version mobile plus légère de la section. Liquid ne peut pas faire ça en fonction de l’appareil, car il s’exécute sur les serveurs de Shopify et ne peut pas savoir si le visiteur est sur un téléphone.

FAQ

Dois-je masquer le contenu sur mobile ou le reconstruire pour une meilleure vue sur mobile ?

Ça dépend du contenu. Contenu décoratif ou secondaire : masquez-le. Contenu important (infos produit, prix, CTA) : reconstruisez-le pour mobile plutôt que de le masquer. Masquer du contenu critique pour le business sur mobile est une grave erreur de conversion — le mobile est le canal principal de la plupart des boutiques, la version mobile a donc besoin des mêmes informations clés.

Google va-t-il pénaliser le contenu que je masque sur mobile ?

Généralement non, si le masquage est fait pour des raisons d'UX légitimes (contenu décoratif, mises en page alternatives). La règle générale de Google : le contenu masqué est traité de façon similaire au contenu visible pour l'indexation tant qu'il n'est pas trompeur (cloaking, bourrage de mots-clés caché). Le masquage responsive orienté UX ne pose aucun problème.

Comment trouver la bonne classe CSS à cibler sur une section Shopify ?

Faites un clic droit sur l'élément de votre boutique en ligne → Inspecter. Le panneau Éléments affiche le HTML ; regardez le conteneur le plus à l'extérieur pour trouver la classe. La plupart des sections Shopify sont enveloppées dans .shopify-section plus une classe spécifique à la section. Évitez de cibler .shopify-section seul — cela affecterait toutes les sections. Si vous préférez éviter la chasse aux classes, décrivez ce que vous voulez masquer à Fudge ("masquer la section témoignages sur mobile") et il identifiera le bon sélecteur et écrira le CSS.

Le contenu mobile masqué peut-il toujours être indexé par Google ?

Oui. display: none n'empêche pas l'indexation — Google lit tout le HTML et prend en compte le texte masqué dans le contenu de la page. Si vous ne voulez vraiment pas que le contenu soit indexé, supprimez-le de la section au lieu de le masquer avec du CSS.

Est-ce que display:none provoque un Cumulative Layout Shift ?

Non — display: none retire complètement l'élément du flux de mise en page dès le rendu initial, il n'y a donc pas de décalage. Le CLS vient des éléments qui apparaissent tard ou changent de taille après le rendu. Le contenu masqué dès le départ est sans risque pour le CLS.