À retenir
- De nombreux thèmes intègrent une option “Masquer sur mobile” pour chaque section dans l’éditeur de thème — vérifiez cela en premier.
- Si votre thème ne propose pas cette option, vous pouvez masquer une section sur mobile avec une media query CSS.
- Le CSS personnalisé s’ajoute 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 à coder.
Certaines sections rendent très bien sur ordinateur mais surchargent l’expérience sur mobile. Un grand bloc image et texte, une rangée de récompenses, une bannière promo pensée uniquement pour les ordinateurs — parfois, ça n’a juste pas sa place sur un petit écran.
Voici comment les masquer.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge — un éditeur de boutique par IA 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.
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 ne possède pas de bouton pour activer/désactiver la visibilité, vous pouvez masquer une section avec 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 externe. Cela ressemblera à quelque chose comme .shopify-section-template--hero ou à un ID de section personnalisé.
Étape 2. Allez dans Boutique en ligne → Thèmes → Personnaliser → faites défiler jusqu’en bas de la barre latérale gauche → cliquez sur Paramètres du thème → faites défiler jusqu’à CSS personnalisé.
Étape 3. Ajoutez ce CSS, en remplaçant .your-section-class par la classe réelle :
@media (max-width: 767px) {
.your-section-class {
display: none;
}
}Étape 4. Enregistrez.
La section sera désormais invisible sur les écrans de moins de 768px de large - le breakpoint mobile standard. Elle restera entièrement visible sur tablette et desktop.
Voir aussi : Accélérer un thème Shopify.
Voir aussi : Améliorer l’espacement sur mobile dans Shopify.
Voir aussi : Masquer une section sur desktop dans Shopify.
Important : masquer avec du CSS charge quand même le HTML de la section. La section existe dans le code source de la page - elle n’est tout simplement pas affichée. Pour les sections sensibles aux performances avec 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 un standard unique pour les breakpoints, mais la plupart suivent des conventions communes :
| Breakpoint | Largeur |
|---|---|
| Mobile | jusqu’à 767px |
| Tablette | 768px - 1023px |
| Desktop | 1024px et plus |
Dawn utilise 750px comme breakpoint principal mobile/tablette. Consultez 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 ?
L’utilisation de display: none en CSS ne supprime pas le contenu de l’index de Google. Google génère le rendu des pages et peut lire le contenu masqué en CSS. À des fins de 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 consiste à utiliser le rendu de section de Shopify pour l’exclure conditionnellement du HTML sur mobile - ce qui nécessite du code ou Fudge.
Pour la plupart des marchands, display: none convient parfaitement.
FAQ
La disponibilité de cette option varie selon le thème et le type de section. Les thèmes de l'Online Store 2.0 (Dawn, Sense, Refresh) l'intègrent sur la plupart des sections flexibles, mais les sections principales de produit/collection ne la proposent souvent pas. Les thèmes plus anciens (Debut, Brooklyn) n'incluent généralement pas ce bouton du tout — utiliser du CSS ou Fudge est la solution de contournement.
Oui — display: none conserve le HTML dans la page, donc les images, les scripts et les autres ressources à l'intérieur continuent de charger. La seule économie concerne le travail de rendu (rendering). Pour les sections sensibles aux performances (grandes images, vidéo), utilisez un rendu conditionnel côté serveur en Liquid au lieu de masquer avec du CSS.
Non, en général. Google évalue la version desktop pour l'indexation sur la plupart des sites (le mobile-first indexing utilise désormais le DOM mobile rendu, mais le contenu masqué via CSS est toujours vu). Ne mettez pas en noindex à moins que le contenu ne soit vraiment pas pertinent pour la recherche — masquer un élément est une décision d'UX, pas de SEO.
Dawn utilise 750px comme breakpoint principal mobile/tablette. Sense et Refresh utilisent 990px. Les autres thèmes varient — Debut utilise 750px, Symmetry varie selon la section. Consultez le fichier assets/base.css de votre thème pour voir les requêtes @media existantes afin de respecter la convention plutôt que d'introduire un nouveau breakpoint.
Oui. Pratique courante : créez deux versions de la section, masquez-en une sur mobile (@media (max-width: 767px) { .section-desktop { display: none; } }) et l'autre sur desktop. Meilleure solution à long terme : utilisez des conditions Liquid basées sur des indicateurs de viewport, ou créez une seule section responsive qui gère les deux.
