Points clés
- Certains thèmes Shopify incluent une option “Afficher uniquement sur mobile” dans les paramètres de la section — vérifiez-y en premier.
- Si votre thème ne le propose pas, la règle CSS
display: nonesur les breakpoints desktop permet d’obtenir le même résultat.- Les sections exclusives au mobile (mobile-only) sont utiles pour une navigation simplifiée, les bannières d’appel rapide (tap-to-call) et les incitations au téléchargement d’applications.
- Fudge peut ajouter des contrôles de visibilité à n’importe quelle section sans que vous n’ayez à écrire le moindre code CSS.
Parfois, une section a tout son sens sur mobile, mais ferait tache — ou prendrait beaucoup trop de place — sur desktop. Une barre d’appel tap-to-call, une navigation sticky simplifiée ou une bannière promotionnelle spécifique au mobile en sont de parfaits exemples.
Ce guide vous explique comment mettre cela en place sur Shopify.
Pourquoi les sections exclusives au mobile ont du sens
Les visiteurs sur mobile et document sur desktop ont des besoins différents. Les utilisateurs sur desktop naviguent avec un curseur, ont un grand écran et font souvent preuve de plus de patience. Les utilisateurs sur mobile sont souvent en déplacement, utilisent leur pouce et veulent accéder plus rapidement aux actions clés.
Une section conçue spécifiquement pour le mobile — comme un gros bouton « Appelez-nous » ou un menu de catégories simplifié — serait inutile sur desktop, où des solutions plus élégantes existent déjà.
Sur le même sujet : Ajouter des sections à la page d’accueil sur Shopify.
Sur le même sujet : Réorganiser la mise en page mobile sur Shopify.
Méthode 1 — Vérifier les paramètres de visibilité de votre thème
Le Theme Editor est le moyen le plus rapide de commencer.
Étape 1 — Ouvrez le Theme Editor. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2 — Sélectionnez la section. Cliquez sur la section que vous souhaitez contrôler dans la barre latérale gauche ou directement sur la page.
Étape 3 — Cherchez les paramètres de visibilité. Dans le panneau de paramètres à droite, faites défiler vers le bas. Certains thèmes (en particulier les thèmes premiums basés sur Dawn) incluent des cases telles que :
- « Afficher sur mobile » (Show on mobile)
- « Afficher sur ordinateur » (Show on desktop)
- « Masquer sur ordinateur » (Hide on desktop)
Si votre thème en est doté, cochez-les et vous avez terminé. Passez en aperçu mobile (en cliquant sur l’icône de téléphone en haut) pour confirmer le résultat.
Méthode 2 — L’approche CSS (fonctionne avec tous les thèmes)
Si votre thème ne propose pas d’options de visibilité, le CSS est la solution de repli. L’idée est d’ajouter une classe à votre section et d’utiliser une media query pour la masquer sur desktop.
Étape 1 — Identifiez la classe de la section. Faites un clic droit sur la section dans votre navigateur → Inspecter → trouvez la balise <div> tout à l’extérieur de la section et notez sa classe (par ex. section-announcement-bar).
Étape 2 — Ajoutez du CSS à votre thème. Allez dans Boutique en ligne → Thèmes → Actions (ou les 3 points) → Modifier le code → ouvrez assets/base.css (ou le fichier CSS principal de votre thème).
Étape 3 — Ajoutez cette règle :
@media (min-width: 768px) {
.section-announcement-bar {
display: none;
}
}Cela permet de masquer la section sur les écrans d’une largeur de 768px ou supérieure (desktop), tout en l’affichant sur mobile.
Alternative — ajoutez une classe personnalisée. Si la classe existante est trop générique, ajoutez la vôtre au fichier Liquid de la section :
<div class="mobile-only-section">
<!-- contenu de la section -->
</div>Puis ciblez .mobile-only-section dans votre CSS.
Important : Travaillez toujours sur un thème dupliqué. Allez dans Thèmes → cliquez sur le menu à trois points à côté de votre thème → Dupliquer, puis faites vos modifications sur la copie.
Méthode 3 — Fudge pour pouvoir contrôler la visibilité
Si vous voulez une vraie solution où la visibilité se contrôle directement dans le Theme Editor (sans avoir à chercher les noms de classes manuellement), Fudge peut s’en charger.
Décrivez ce dont vous avez besoin à Fudge:
« Ajoute une barre d’annonce en haut uniquement pour mobile avec un bouton d’appel à l’intérieur. Masque la barre complètement sur desktop. »
Fudge va générer la section avec la bonne logique responsive intégrée. Vous pourrez vérifier le brouillon avant de mettre quoi que ce soit en ligne.
Quelques cas pratiques pour les sections exclusives au mobile
Une barre “tap-to-call”. Une barre sticky au bas de l’écran avec un grand bouton contenant votre numéro de téléphone. Sur desktop, la navigation de votre header fait déjà le travail, mais sur mobile, un bouton tap-to-call visible est un atout de taille pour les commerces locaux.
Une navigation sticky simplifiée. Une navigation minimaliste “Accueil / Boutique / Panier” pour les utilisateurs mobiles qui souhaitent un moyen d’accès rapide sans avoir à scroller tout en haut de la page.
Une bannière de téléchargement d’appli. Une petite bannière promouvant votre application mobile, apparaissant uniquement pour les visiteurs sur mobile. Afficher ça sur desktop où ça n’a aucune utilité ne créerait que du bruit.
Des offres spécifiques au mobile. Un message promotionnel tel que « Commandez sur l’appli et économisez 10 % » qui n’a de sens que sur mobile.
Et comment masquer une section faite pour desktop sur mobile ?
La même réflexion s’applique dans le sens inverse : utilisez @media (max-width: 767px) pour masquer des sections sur mobile tout en les gardant sur desktop. Explorez notre guide pour en savoir plus sur l’art de masquer certains contenus sur mobile dans Shopify.
Sur le même sujet : Masquer une section sur desktop dans Shopify.
Le fait de masquer une section en CSS a-t-il un impact sur le SEO ?
Le contenu masqué en CSS est toujours présent dans le HTML et exploré par les moteurs de recherche. Il n’est pas traité comme du contenu caché de façon malveillante — les moteurs de recherche comprennent les modèles de design responsive. Cependant, évitez d’utiliser cette technique pour bourrer les sections masquées de mots-clés, car cela déclencherait un signal d’alerte.
Pour les sections qui ont un but purement visuel ou UX (comme un bouton tap-to-call), utiliser la visibilité CSS ne pose aucun problème.
FAQ
Trois causes : (1) la spécificité CSS n'est pas assez élevée — les styles du thème prennent le pas sur votre règle display: none (utilisez !important ou un sélecteur plus précis), (2) vous avez ciblé la mauvaise classe (inspectez le code HTML généré pour confirmer), ou (3) le breakpoint est incorrect (utilisez 768px pour la limite mobile/tablette, 1024px pour le début du rendu desktop, selon votre thème).
position: fixed pour une barre qui reste toujours affichée en bas, quel que soit le défilement (scroll). position: sticky pour une barre qui défile avec le contenu de la page, mais se bloque en atteignant un certain seuil. Pour la plupart des cas d'usage de type tap-to-call, fixed est le bon choix — vous voulez que la barre soit toujours visible. Réservez l'option sticky aux éléments moins intrusifs qui n'ont pas besoin d'être constamment à l'écran.
De manière négligeable. Google peut analyser et lire le contenu masqué par CSS. Techniquement, le contenu est également présent sur la page en version desktop — il est simplement masqué visuellement. Pour les contenus axés sur l'expérience utilisateur (UX) sur mobile (tap-to-call, bannières d'applications), l'impact SEO est nul.
Oui, via des vérifications request.user_agent, mais c'est fragile — les user agents ne sont pas toujours fiables et le edge caching de Shopify peut passer à côté des variantes spécifiques aux appareils. Les media queries CSS sont beaucoup plus fiables pour la gestion visuelle propre aux mobiles. N'utilisez la détection d'appareil en Liquid que lorsque vous devez réellement exclure du contenu de votre code HTML.
Pour des différences mineures (taille du texte, padding), préférez une seule section responsive avec des media queries. Pour des contenus substantiellement différents (images, texte, ou disposition à part entière), l'utilisation de deux sections — une mobile, une desktop — est beaucoup plus propre que de créer des logiques responsives complexes au sein d'une seule section. Décrivez ce que vous souhaitez à Fudge et l'outil générera la bonne structure selon votre cas de figure — qu'il s'agisse d'une unique section responsive ou d'un duo mobile/desktop séparé.
