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: none en 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.

Ajoutez des sections uniquement pour mobile en les décrivant.

Try Fudge for Free

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é par CSS figure toujours dans le HTML et est exploré par les moteurs de recherche. Il n’est pas vu comme du contenu caché de façon malveillante — les moteurs de recherche comprennent bien les modèles de conception responsive. Néanmoins, évitez de vous servir de cette technique pour gaver de mots-clés des sections invisibles, ça serait rédhibitoire.

Pour des sections prévues à des fins purement visuelles ou pour le confort UX (comme un bouton tap-to-call), utiliser la visibilité CSS est tout à fait correct.