Points clés
- Certains thèmes Shopify incluent des options de visibilité pour masquer/afficher sur mobile dans les paramètres de la section — c’est la première chose à vérifier.
- Si votre thème n’en a pas, utiliser
display: noneen CSS via les breakpoints pour desktop permet d’atteindre le même résultat.- Les sections exclusives au mobile sont utiles pour une navigation simplifiée, des bannières « tap-to-call » et des invitations à télécharger une application.
- Fudge peut ajouter des contrôles de visibilité à n’importe quelle section sans que vous n’ayez besoin d’écrire du CSS.
Parfois, une section a parfaitement sa place sur mobile mais détonnerait — ou prendrait trop de place — sur desktop. Une barre de numéro de téléphone « tap-to-call », un menu de navigation sticky simplifié, ou une bannière promotionnelle spécifique au mobile en sont de bons exemples.
Ce guide vous explique comment faire ça dans 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
Pourquoi ma section mobile-only s’affiche-t-elle quand même sur desktop ?
Trois causes possibles : (1) la spécificité CSS n’est pas assez élevée — les styles du thème prennent le dessus sur votre règle display: none (utilisez !important ou un sélecteur plus précis), (2) vous avez ciblé la mauvaise classe (inspectez le HTML rendu pour vérifier), ou (3) le breakpoint est incorrect (utilisez 768px pour la limite mobile/tablette, 1024px pour le début du desktop, selon le thème).
Dois-je utiliser position:sticky ou position:fixed pour une barre tap-to-call sur mobile ?
position: fixed est idéal pour une barre qui reste toujours en bas indépendamment du scroll. position: sticky convient pour une barre qui défile avec le contenu mais reste fixée lorsqu’elle atteint un certain seuil. Pour la plupart des cas d’utilisation tap-to-call, fixed est le bon choix — vous voulez que la barre soit toujours visible. Réservez sticky pour les éléments moins intrusifs qui n’ont pas besoin d’être constamment à l’écran.
Est-ce que les sections mobile-only affectent le SEO ?
De façon négligeable. Google peut rendre et lire le contenu masqué en CSS des deux côtés. Le contenu est techniquement toujours présent sur la page en desktop — il est juste visuellement caché. Pour un contenu mobile-only orienté UX (tap-to-call, bannière d’application), l’impact sur le SEO est nul.
Puis-je détecter le type d’appareil en Liquid pour faire du vrai server-side rendering ?
Oui, via des vérifications request.user_agent, mais c’est fragile — les user agents ne sont pas fiables et le cache edge de Shopify peut rater certaines variantes spécifiques à chaque appareil. Les media queries en CSS sont bien plus fiables pour gérer des comportements visuels mobile-only. Utilisez la détection d’appareil en Liquid uniquement quand vous avez vraiment besoin d’omettre du contenu dans le HTML.
Dois-je dupliquer une section pour le mobile ou masquer des variantes d’une seule section ?
Pour des différences mineures (taille de texte, padding), utilisez une seule section responsive avec des media queries. Pour un contenu vraiment différent (images, textes et layouts différents), le fait de créer deux sections — une mobile, une desktop — est souvent plus propre que de se retrouver avec une logique responsive complexe dans une seule section. Décrivez ce que vous voulez à Fudge et il générera la bonne structure pour vous — soit une seule section responsive, soit un duo mobile/desktop.
