Points clés
- De nombreux thèmes intègrent un bouton “Masquer sur mobile” par section dans le Theme Editor — vérifiez là en premier.
- Si votre thème n’a pas cette option, vous pouvez masquer une section sur mobile avec une media query en CSS.
- Le CSS personnalisé (Custom CSS) s’ajoute dans Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Custom CSS.
- Fudge peut ajouter des contrôles de visibilité mobile à n’importe quelle section sans que vous ayez à coder.
Pour masquer une section sur mobile dans Shopify, activez le paramètre “Masquer sur mobile” dans le Theme Editor si votre thème en possède un. Sinon, ajoutez @media (max-width: 749px) { .your-section-class { display: none; } } dans Paramètres du thème > Custom CSS.
Les candidats typiques sont un grand bloc image-texte, une rangée de récompenses ou une bannière promo réservée au desktop.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 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.
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Accédez à 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” ou une option “Visibilité”. Dans certains thèmes, cela se trouve tout en bas du panneau de paramètres de la section. Dans d’autres, cela prend la forme d’une icône d’appareil.
Étape 5. Activez l’option et enregistrez.
Si vous ne voyez pas cette option, c’est que votre thème ne la propose pas nativement. Passez à la méthode 2.
Pour masquer des blocs ou des éléments individuels, consultez comment masquer du contenu sur mobile dans Shopify.
Comment modifier ma vue mobile sur Shopify ?
Le Theme Editor possède une barre d’aperçu par appareil en haut de l’écran. Cliquez sur l’icône de téléphone portable pour basculer l’aperçu en vue mobile.
Cela vous montre exactement à quoi ressemble votre boutique sur mobile. L’aperçu sur téléphone modifie uniquement ce que vous voyez ; les paramètres que vous y modifiez s’appliquent à tous les appareils. Pour des différences de mise en page qui vont au-delà de la visibilité d’une section, 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 voulez masquer. Faites un clic droit dessus dans le navigateur → Inspecter → trouvez la classe ou l’ID de l’élément parent. Cela ressemblera à .shopify-section-template--hero ou à un ID de section personnalisé.
Étape 2. Allez dans Boutique en ligne → Thèmes → Personnaliser → descendez tout en bas de la barre latérale gauche → cliquez sur Paramètres du thème → descendez jusqu’à Custom CSS.
Étape 3. Ajoutez ce CSS en remplaçant .your-section-class par la classe exacte :
@media (max-width: 749px) {
.your-section-class {
display: none;
}
}Étape 4. Enregistrez.
La section sera désormais invisible sur les écrans de moins de 750px, là où Dawn passe à sa mise en page mobile. Elle reste entièrement visible sur tablette et desktop.
Important : masquer avec du CSS charge tout de même le HTML de la section. La section existe toujours dans le code source de la page — elle est juste invisible. Pour les sections critiques en termes de performances (grosses images, etc.), supprimer complètement la section (ou utiliser une option du thème) est une meilleure approche.
Pour faire l’inverse, consultez comment masquer une section sur desktop dans Shopify.
Quels sont les breakpoints utilisés par Shopify ?
Les thèmes Shopify n’imposent pas un standard de breakpoint unique, mais la plupart suivent des conventions courantes :
| Breakpoint | Largeur (Dawn) |
|---|---|
| Mobile | jusqu’à 749px |
| Tablette | 750px - 989px |
| Desktop | 990px et plus |
Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour le desktop. Vérifiez la feuille de style de votre thème si vous avez besoin de la valeur exacte.
Ajouter un bouton de visibilité mobile avec Fudge
Si vous avez besoin d’un contrôle précis sur ce qui s’affiche sur mobile sur plusieurs sections, Fudge, l’opérateur IA pour les boutiques Shopify, peut ajouter des boutons de visibilité mobile/desktop dédiés directement dans le schéma de section de votre thème. Demandez à son éditeur de boutique de faire la modification en langage clair.
Décrivez ce que vous voulez :
“Ajoute un bouton ‘masquer sur mobile’ à la section de la bannière promotionnelle sur ma page d’accueil.”
Fudge ajoute un paramètre au schéma de la section et la classe CSS qui va avec, exactement comme le ferait un développeur. Vous vérifiez le brouillon sur un aperçu format téléphone avant de publier, puis le bouton apparaît dans le Theme Editor pour que votre équipe puisse l’utiliser sans toucher au code.
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 véritablement pas pertinent sur mobile et que vous ne voulez pas qu’il soit indexé, supprimez la section. Liquid s’exécute sur les serveurs de Shopify et ne peut pas détecter l’appareil, il ne peut donc pas supprimer une section uniquement pour les téléphones.
Pour la plupart des marchands, display: none est une solution parfaitement adaptée.
FAQ
Pourquoi le bouton "Masquer sur mobile" manque-t-il sur certaines sections Shopify ?
La disponibilité de cette option varie selon le thème et le type de section. Les thèmes Online Store 2.0 (Dawn, Sense, Refresh) l'incluent sur la plupart des sections flexibles, mais les sections principales de produits/collections ne l'affichent souvent pas. Les thèmes plus anciens (Debut, Brooklyn) n'incluent généralement pas du tout ce bouton — le Custom CSS ou Fudge sont les solutions de contournement.
Les sections masquées affecteront-elles toujours la vitesse de la page sur mobile ?
Oui. display: none conserve le HTML dans la page, donc les scripts et les images à l'intérieur se chargent quand même. La seule économie est le travail de rendu. Pour les sections gourmandes en performances (grandes images, vidéos), chargez les images en différé (loading="lazy") ou supprimez la section. Liquid ne peut pas supprimer une section par appareil, car il s'exécute sur les serveurs de Shopify et ne connaît pas la taille de l'écran.
Dois-je mettre en 'noindex' le contenu que je masque sur mobile ?
Non, en général. Google indexe la version mobile de chaque site, et il lit quand même le contenu masqué avec CSS. Ne mettez pas en 'noindex' à moins que le contenu ne soit véritablement pas pertinent pour la recherche — masquer est une décision d'UX, pas une décision SEO.
Quel est le breakpoint mobile standard dans les thèmes Shopify ?
Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour le desktop. Les autres thèmes varient. Vérifiez le fichier assets/base.css de votre thème pour trouver les requêtes @media existantes afin de respecter la convention plutôt que d'introduire un nouveau breakpoint.
Puis-je afficher des sections complètement différentes sur mobile et sur desktop ?
Oui. Le modèle courant : créer deux versions de la section, en masquer une sur mobile (@media (max-width: 749px) { .section-desktop { display: none; } }) et l'autre sur desktop. La meilleure solution à long terme : créer une seule section responsive qui gère les deux.
