À retenir

L’éditeur de thème peut déjà comporter des options de visibilité par section — vérifiez d’abord les paramètres de la section.

Le CSS display: none dans un bloc @media (max-width: 767px) masque n’importe quel élément sur mobile.

Ajoutez votre CSS personnalisé à assets/base.css dans l’éditeur de code de votre thème.

Fudge peut ajouter une visibilité responsive à n’importe quel élément sans que vous n’ayez à écrire de CSS manuellement.

Les mises en page pour ordinateur incluent souvent des éléments décoratifs, des barres latérales détaillées ou du contenu secondaire qui encombrent l’expérience mobile. Masquer ce contenu sur les petits écrans est une technique standard de web design responsive — et c’est plus facile que la plupart des gens ne le pensent.

Quand masquer du contenu sur mobile

Avant de masquer quoi que ce soit, demandez-vous si vous résolvez le bon problème. Le contenu masqué se charge quand même — il n’est juste pas visible. Si vous masquez de grandes images ou des widgets complexes, demandez-vous s’ils devraient vraiment être chargés sur mobile pour des raisons de performances.

Les bons candidats pour être masqués sur mobile :

Sur le même sujet : Améliorer l’espacement sur mobile dans Shopify.

Sur le même sujet : Rendre les sections Shopify exclusives au mobile.

Illustrations ou icônes décoratives réservées aux ordinateurs
Menus de navigation secondaires qui font doublon avec le menu hamburger sur mobile
Grilles de logos “Vu dans” qui prennent trop de place verticalement
Textes d’instruction exclusifs aux ordinateurs (“survolez l’image pour zoomer”)
Grands tableaux de données qui devraient être remplacés par une alternative adaptée aux mobiles

Méthode 1 — Paramètres de section dans l’éditeur de thème

Commencez par là avant de toucher au code.

Étape 1 — Ouvrez l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser.

Étape 2 — Sélectionnez la section ou le bloc que vous souhaitez masquer sur mobile.

Étape 3 — Cherchez les paramètres de visibilité. Dans le panneau de paramètres à droite, certains thèmes incluent des options telles que :

“Masquer sur mobile”
“Afficher sur ordinateur uniquement”
“Visibilité de l’appareil : Ordinateur / Mobile / Les deux”

Si l’option existe, activez-la et vérifiez à l’aide de l’aperçu mobile (l’icône de téléphone en haut de l’éditeur).

Méthode 2 — La media query CSS (l’approche universelle)

Si votre thème n’a pas d’options de visibilité, le CSS est la solution infaillible. Cela fonctionne pour n’importe quel élément — sections, blocs, éléments HTML individuels — et ne nécessite l’intervention d’aucun développeur.

Étape 1 — Trouvez la classe de l’élément. Dans votre navigateur, faites un clic droit sur l’élément que vous souhaitez masquer → Inspecter → notez le nom de la classe sur l’élément principal au-dessus des autres (par exemple, announcement-bar, section-rich-text, logo-bar).

Étape 2 — Ouvrez le CSS de votre thème. Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code → ouvrez assets/base.css.

Étape 3 — Ajoutez une media query tout en bas du fichier :

@media (max-width: 767px) {
  .your-element-class {
    display: none;
  }
}

Remplacez .your-element-class par la vraie classe trouvée à l’Étape 1.

Étape 4 — Sauvegardez et testez. Redimensionnez la fenêtre de votre navigateur en dessous de 768px de large, ou utilisez l’émulation d’appareil des Chrome DevTools (F12 → icône de téléphone) pour confirmer que l’élément est masqué.

Dupliquez toujours votre thème avant de modifier le code. Allez dans Thèmes → menu aux trois petits points → Dupliquer.

Méthode 3 — Fudge pour ajouter des contrôles de visibilité responsive

Si vous voulez une vraie solution qui s’intègre à l’éditeur de thème sans avoir à partir à la chasse aux noms de classes, Fudge peut ajouter de vrais paramètres de visibilité à n’importe quelle section.

Décrivez la modification avec des mots simples :

“Masquer la section bannière décorative sur écran mobile.”

Ou :

“Ajouter une option masquer/afficher sur mobile à notre section barre de logos.”

Fudge prépare la modification pour que vous puissiez la relire. Rien n’est mis en ligne tant que vous ne l’avez pas approuvé.

Ajoutez des contrôles de visibilité responsive sans écrire de CSS.

Try Fudge for Free

Comment changer la vue mobile dans Shopify

La façon la plus courante de vérifier votre mise en page mobile est l’aperçu de l’éditeur de thème :

Ouvrez Boutique en ligne → Thèmes → Personnaliser
Cliquez sur l’icône de téléphone en haut au centre
Naviguez à travers vos pages pour vérifier le rendu sur mobile

Pour des tests plus précis, utilisez les Chrome DevTools (F12 → cliquez sur l’icône de téléphone/tablette dans la barre d’outils). Cela vous permet de sélectionner des tailles d’appareils spécifiques et d’interagir avec la page comme le ferait un vrai utilisateur mobile.

Vous pouvez également utiliser le lien d’aperçu mobile intégré de Shopify — lorsque vous consultez une page dans l’admin, certaines sections affichent un lien “Aperçu” qui ouvre une vue optimisée pour les mobiles.

Comment masquer une section sur mobile dans Shopify ?

Pour masquer une section entière sur mobile :

Vérifiez si votre thème possède une option “Masquer sur mobile” dans les paramètres de la section (le plus simple)
Sinon, trouvez la classe CSS de la section en utilisant l’outil Inspecter de votre navigateur
Ajoutez display: none dans un bloc @media (max-width: 767px) au sein du fichier assets/base.css

Le breakpoint de la media query à 767px est le standard du thème Dawn de Shopify. Certains thèmes utilisent 749px ou 990px — vérifiez le CSS existant de votre thème pour vous aligner sur la convention en cours.

Masquer vs supprimer du contenu

Masquer avec du CSS garde le contenu dans le HTML — il ne s’affiche tout simplement pas à l’écran. C’est idéal pour les éléments décoratifs mais déconseillé pour :

Le contenu qui ralentit le chargement de la page (grandes images, iframes vidéo)
Le contenu que vous ne voulez jamais voir apparaître sur mobile (utilisez plutôt une section mobile distincte)

Pour le contenu ayant un impact sur les performances, la meilleure approche est le rendu conditionnel en Liquid — le HTML n’est généré que lorsque l’utilisateur est sur ordinateur. Cela nécessite des modifications de code dans le fichier Liquid de votre section, ce dont Fudge peut très bien se charger.