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 n’inclut pas d’options de visibilité, le CSS est la solution de secours fiable. Vous ajouterez une classe à la section et utiliserez une media query pour la masquer sur ordinateur.
Étape 1 — Identifier la classe de la section. Faites un clic droit sur la section dans votre navigateur → Inspecter l’élément → trouvez le <div> le plus externe de la section et notez sa classe (par ex., section-announcement-bar).
Étape 2 — Ajouter le CSS à votre thème. Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code → ouvrez assets/base.css (ou le fichier CSS principal de votre thème).
Étape 3 — Ajouter cette règle :
@media (min-width: 768px) {
.section-announcement-bar {
display: none;
}
}Cela masque la section sur les écrans de 768 px de large et plus (ordinateur), tout en l’affichant sur mobile.
Alternative — ajouter une classe personnalisée. Si la classe existante est trop générique, ajoutez votre propre classe au fichier Liquid de la section :
<div class="mobile-only-section">
<!-- contenu de la section -->
</div>Ensuite, ciblez .mobile-only-section dans votre CSS.
Important : Travaillez toujours sur un thème dupliqué. Allez dans Thèmes → le menu à trois points à côté de votre thème → Dupliquer, puis effectuez les 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 dessus sur votre règle display: none (utilisez !important ou un sélecteur plus spécifique), (2) vous avez ciblé la mauvaise classe (inspectez le HTML rendu pour confirmer), ou (3) le breakpoint est incorrect (utilisez 768 px pour la limite mobile/tablette, 1024 px pour le début de l'ordinateur, selon le thème).
position: fixed pour une barre qui reste toujours en bas quel que soit le défilement. position: sticky pour une barre qui défile avec le contenu mais reste fixe lorsqu'elle atteint un seuil. Pour la plupart des cas d'utilisation de tap-to-call, fixed est le bon choix — vous voulez que la barre soit toujours visible. Réservez sticky aux éléments moins intrusifs qui n'ont pas besoin d'une visibilité constante.
De manière négligeable. Google peut rendre et lire le contenu masqué en CSS d'un côté comme de l'autre. Techniquement, le contenu est également présent sur la page sur ordinateur — il est simplement masqué visuellement. Pour du contenu exclusivement mobile axé sur l'UX (tap-to-call, bannière d'application), l'impact sur le SEO est nul.
Oui via des vérifications request.user_agent, mais c'est fragile — les user agents ne sont pas fiables et la mise en cache edge de Shopify peut manquer les variantes spécifiques aux appareils. Les media queries CSS sont plus fiables pour un comportement visuel exclusif au mobile. N'utilisez la détection d'appareil Liquid que lorsque vous devez réellement omettre du contenu du HTML.
Pour des différences mineures (taille du texte, padding), une seule section responsive avec des media queries suffit. Pour un contenu très différent (images, textes, mises en page différents), deux sections — une mobile, une desktop — c'est plus propre qu'une logique responsive complexe dans une seule section. Décrivez ce que vous souhaitez à Fudge et il générera la bonne structure pour votre cas — soit une section responsive, soit un ensemble apparié mobile/desktop.
