Dois-je masquer le contenu sur mobile sur Shopify ou le recréer pour mobile ?

Ça dépend du contenu. Contenu décoratif : masquez-le. Contenu important comme les infos produit ou les prix : recréez-le pour mobile au lieu de le masquer. Masquer du contenu critique sur mobile est une erreur pour vos conversions.

Google va-t-il pénaliser le contenu Shopify que je masque sur mobile ?

En général, non, si le masquage est fait pour des raisons légitimes d'UX. Google traite le contenu masqué de la même manière que le contenu visible pour l'indexation, tant qu'il n'y a pas de cloaking trompeur ou de bourrage de mots-clés.

Masquer du contenu sur mobile dans Shopify

À 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 conserve le contenu dans le HTML, il ne s’affiche tout simplement pas. C’est très bien pour les éléments décoratifs, mais ce n’est pas idéal pour :

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

Pour le contenu sensible aux performances, la meilleure approche est le rendu conditionnel en Liquid : le code 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 que Fudge peut faire à votre place.

FAQ

Dois-je masquer le contenu sur mobile ou le recréer pour un affichage adapté aux mobiles ?

Ça dépend du contenu. Contenu décoratif ou secondaire : masquez-le. Contenu important (infos produit, prix, CTA) : recréez-le pour mobile au lieu de le masquer. Masquer du contenu essentiel à votre activité sur mobile est une grave erreur pour vos conversions : le mobile est le principal canal de la plupart des boutiques, la version mobile a donc besoin des mêmes informations clés.

Google va-t-il pénaliser le contenu que je masque sur mobile ?

En général, non, si le masquage est fait pour des raisons d’UX légitimes (contenu décoratif, mises en page alternatives). La règle de base de Google : le contenu masqué est traité de la même manière que le contenu visible pour l’indexation, tant qu’il n’est pas trompeur (cloaking, bourrage de mots-clés caché). Le masquage responsive pensé pour l’UX ne pose aucun problème.

Comment trouver la bonne classe CSS à cibler sur une section Shopify ?

Faites un clic droit sur l’élément de votre boutique en ligne → Inspecter. L’onglet Éléments affiche le code HTML ; regardez le conteneur principal (wrapper) pour trouver la classe. La plupart des sections Shopify sont enveloppées dans .shopify-section avec une classe spécifique à la section. Évitez de cibler .shopify-section tout seul : ça affecte toutes les sections. Si vous préférez éviter la chasse aux classes, décrivez ce que vous voulez masquer à Fudge (“masquer la section des témoignages sur mobile”) et il identifiera le bon sélecteur pour écrire le CSS à votre place.

Le contenu masqué sur mobile peut-il quand même être indexé par Google ?

Oui. display: none n’empêche pas l’indexation : Google lit tout le code HTML et compte le texte masqué dans le contenu de la page. Si vous ne voulez vraiment pas que le contenu soit indexé, utilisez un rendu conditionnel en Liquid plutôt que de le cacher via CSS, ou enveloppez-le avec une technique équivalente à <noindex> en utilisant data-nosnippet.

Est-ce que display:none provoque un Cumulative Layout Shift ?

Non : display: none retire complètement l’élément du flux de la mise en page dès le rendu initial, il n’y a donc pas de décalage. Le CLS provient des éléments qui apparaissent tardivement ou qui changent de taille après le rendu. Le contenu masqué dès le départ ne présente aucun risque de CLS.