Points clés
- Certains thèmes Shopify incluent des options “Afficher uniquement sur mobile” dans les paramètres de section — vérifiez là en premier.
- Si votre thème ne l’a pas, un
display: noneen CSS aux breakpoints desktop donne le même résultat.- Les sections uniquement sur mobile sont utiles pour une navigation simplifiée, des bannières “tap-to-call” et des incitations à télécharger une application.
- Fudge peut ajouter des contrôles de visibilité à n’importe quelle section sans que vous ayez à écrire de CSS.
Pour rendre une section Shopify visible uniquement sur mobile, activez son paramètre “Masquer sur ordinateur” si votre thème en possède un, ou ajoutez @media (min-width: 750px) { .votre-section { display: none; } } au CSS de votre thème.
Une barre de numéro de téléphone “tap-to-call”, une navigation sticky simplifiée ou une bannière promotionnelle spécifique au mobile en sont de bons exemples.
Pourquoi les sections exclusives au mobile ont du sens
Les visiteurs sur mobile et sur ordinateur ont des besoins différents. Les utilisateurs sur ordinateur naviguent avec un curseur, ont un grand écran et naviguent souvent avec plus de patience. Les utilisateurs sur mobile sont souvent en déplacement, tapotent avec le pouce et veulent un accès plus rapide aux actions clés.
Une section conçue spécifiquement pour le mobile — comme un grand bouton “Appelez-nous” ou un menu de catégories simplifié — semblerait inutile sur ordinateur où des solutions plus élégantes existent déjà.
Pour changer l’ordre des sections sur téléphone à la place, consultez comment réorganiser votre 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 allez ajouter une classe à la section et utiliser une media query pour la masquer sur ordinateur.
Étape 1 — Dupliquez votre thème. Allez dans Boutique en ligne → Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Dupliquer. Faites les modifications sur la copie.
Étape 2 — Identifiez la classe de la section. Faites un clic droit sur la section dans votre navigateur → Inspecter l’élément → trouvez le <div> le plus à l’extérieur de la section et notez sa classe (par ex., section-announcement-bar).
Étape 3 — Ajoutez du CSS à votre thème. Sur la copie, cliquez sur le menu à trois points (…), puis sur Modifier le code, et ouvrez assets/base.css (ou le fichier CSS principal de votre thème).
Étape 4 — Ajoutez cette règle :
@media (min-width: 750px) {
.section-announcement-bar {
display: none;
}
}Cela masque la section sur les écrans de 750px de large et plus (tablettes et ordinateurs), tout en l’affichant sur mobile. Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour le desktop.
Alternative — ajoutez 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.
Méthode 3 — Fudge pour pouvoir contrôler la visibilité
Si vous voulez une solution propre où la visibilité est contrôlée via l’Éditeur de thème (sans chercher manuellement les noms de classes), Fudge, l’opérateur IA pour les boutiques Shopify, peut la créer avec son éditeur de boutique.
Décrivez ce dont vous avez besoin :
“Ajoute une barre d’annonce visible uniquement sur mobile en haut avec un bouton tap-to-call. Masque-la complètement sur ordinateur.”
Fudge génère la section en intégrant la bonne logique responsive. Vous passez en revue le brouillon avant sa mise en ligne, et si la barre n’est pas utile, vous pouvez l’annuler en un clic.
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 approche fonctionne dans l’autre sens : utilisez @media (max-width: 749px) pour masquer des sections sur mobile tout en les gardant sur ordinateur. Consultez notre guide sur comment masquer du contenu sur mobile dans Shopify pour plus de détails à ce sujet.
FAQ
Pourquoi ma section uniquement sur mobile s'affiche-t-elle encore sur ordinateur ?
Trois causes : (1) la spécificité CSS n'est pas assez forte — 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 mauvais. Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour le desktop ; utilisez les mêmes breakpoints que votre thème.
Dois-je utiliser position:sticky ou position:fixed pour une barre tap-to-call mobile ?
position: fixed pour une barre qui reste toujours en bas indépendamment du scroll. position: sticky pour une barre qui défile avec le contenu mais reste accrochée lorsqu'elle atteint un certain seuil. Pour la plupart des cas d'usage 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.
Les sections uniquement sur mobile affecteront-elles le SEO ?
De manière négligeable. Google peut rendre et lire le contenu masqué en CSS des deux côtés. Techniquement, le contenu est aussi présent dans la page sur ordinateur — il est juste visuellement masqué. Pour du contenu mobile orienté UX (tap-to-call, bannière d'application), l'impact SEO est nul.
Puis-je détecter le type d'appareil en Liquid pour un véritable rendu côté serveur (SSR) ?
Non. Liquid n'a pas accès au user agent ni à la taille de l'écran, et Shopify met en cache les pages pour chaque visiteur. Utilisez donc les media queries CSS.
Dois-je dupliquer une section pour le mobile ou masquer des variantes d'une seule section ?
Pour des différences mineures (taille du texte, padding), une seule section responsive avec des media queries suffit. Pour un contenu substantiellement différent (images, textes, mises en page différents), deux sections — une mobile, une desktop — est une approche plus propre qu'une logique responsive complexe dans une seule section. Décrivez ce que vous voulez à Fudge et il génère la bonne structure pour votre cas — soit une section responsive, soit un ensemble mobile/desktop appairé.
