Masquer une section sur ordinateur dans Shopify

Points clés

Certains thèmes intègrent une option “Masquer sur desktop” ou une bascule de visibilité par section dans l’Éditeur de thème.

Si votre thème ne propose pas cette option, vous pouvez utiliser une media query CSS pour cibler la largeur des écrans desktop.

L’approche CSS s’ajoute dans Paramètres du thème → CSS personnalisé (Custom CSS) de l’Éditeur de thème.

Fudge peut ajouter de vrais contrôles de visibilité pour desktop sur n’importe quelle section, sans aucun code.

Le problème inverse de l’encombrement sur mobile : parfois, une section est conçue uniquement pour mobile (une barre promo sticky, une navigation simplifiée, un bouton tap-to-call) et vous voulez la rendre invisible sur desktop.

Voici comment masquer une section uniquement sur desktop.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de vitrines Shopify. Nous avons également développé Fudge — un éditeur de vitrine IA noté 5.0 sur le Shopify App Store.

Méthode 1 — Chercher une option de visibilité dans l’Éditeur de thème

Certains thèmes Shopify (en particulier ceux basés sur Boutique en ligne 2.0) incluent des options de visibilité par section directement dans l’Éditeur de thème.

Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.

Étape 2. Cliquez sur la section que vous souhaitez masquer sur ordinateur.

Étape 3. Cherchez dans les paramètres de la section un réglage “Visibilité” ou une case à cocher “Masquer sur ordinateur”.

Étape 4. Si l’option est présente, activez-la et enregistrez.

Si vous ne voyez pas cette option, votre thème ne la prend pas en charge nativement. Passez à la méthode 2.

Article lié : Masquer une section sur mobile dans Shopify.

Où se trouve la section de visibilité dans Shopify ?

Les paramètres de visibilité se trouvent à l’intérieur des paramètres individuels de chaque section — pas dans un menu global.

Cliquez sur une section dans la barre latérale gauche de l’Éditeur de thème → faites défiler les paramètres de la section → cherchez les options de visibilité ou d’appareil vers le bas. Il n’y a pas d’écran de “Visibilité” unique dans l’Éditeur de thème ; cela se gère au niveau de la section.

Méthode 2 — Masquer sur ordinateur avec une media query CSS

C’est la solution de secours fiable pour n’importe quel thème.

Étape 1. Trouvez la classe CSS de la section. Faites un clic droit sur la section de votre boutique en ligne → Inspecter → cherchez la classe sur la balise <div> la plus à l’extérieur. Elle ressemble généralement à .shopify-section accompagnée d’une classe personnalisée, ou d’un ID spécifique à la section.

Étape 2. Ouvrez l’Éditeur de thème → descendez dans le panneau de gauche → cliquez sur Paramètres du thème → trouvez CSS personnalisé.

Étape 3. Ajoutez ce CSS en remplaçant par la véritable classe de votre section :

@media (min-width: 768px) {
  .your-section-class {
    display: none;
  }
}

Étape 4. Enregistrez.

Cela masque la section sur les écrans de 768px et plus, ce qui regroupe les tablettes et les écrans d’ordinateur. Ajustez le point de rupture (breakpoint) si besoin. Certains thèmes utilisent 1024px comme seuil pour l’ordinateur.

Choisir le bon point de rupture

La plupart des thèmes Shopify considèrent que 768px marque le début du format tablette/ordinateur. Si vous voulez que la section soit cachée uniquement sur ordinateur (mais toujours visible sur tablette) :

@media (min-width: 1024px) {
  .your-section-class {
    display: none;
  }
}

Vérifiez la feuille de style de votre thème pour confirmer le point de rupture qu’il utilise pour adapter sa mise en page. Dawn utilise 990px comme point de rupture principal.

Méthode 3 — Utiliser Fudge pour ajouter des contrôles de visibilité sur ordinateur

Fudge peut modifier le schéma de votre section pour y inclure une véritable option “Masquer sur ordinateur” qui apparaîtra dans l’Éditeur de thème.

Décrivez simplement ce que vous voulez :

« Ajoute une option pour masquer sur ordinateur à la section de la barre promo mobile sur ma page d’accueil. »

Fudge modifie le schéma de la section et y ajoute la logique de rendu conditionnel. Une fois que c’est fait, l’option reste disponible dans votre Éditeur de thème — et plus besoin de toucher au code à l’avenir.

Ajoutez des contrôles de visibilité à n'importe quelle section — décrivez simplement ce que vous voulez.

Try Fudge for Free

Le contenu masqué en CSS a-t-il un impact sur la vitesse de Shopify ?

Oui, légèrement. Lorsque vous utilisez display: none, le HTML est toujours présent dans la page et le navigateur l’analyse quand même. Les images présentes dans des sections masquées peuvent tout de même être téléchargées, ce qui gaspille de la bande passante et peut impacter les scores de vitesse de chargement (page speed).

Pour les sections lourdes en images et exclusivement desktop, l’approche la plus propre est le rendu conditionnel côté serveur — qu’un développeur ou Fudge peut implémenter. Cela supprime entièrement la section du HTML sur l’appareil ciblé, au lieu de la masquer uniquement visuellement.

Pour les sections contenant uniquement du texte ou très légères, display: none est parfaitement acceptable.

FAQ

Les sections masquées affectent-elles toujours mon SEO Shopify ?

Les sections masquées via display: none restent dans le code HTML de la page et sont toujours vues par Google. Si la section masquée contient des mots-clés, Google peut l'indexer (avec un poids réduit, puisqu'elle n'est pas visible). Pour masquer des éléments purement UX mobile/desktop, c'est très bien ; par contre, pour du contenu que vous ne voulez vraiment pas indexer, optez pour un rendu conditionnel en Liquid plutôt que de le masquer via CSS.

Dois-je utiliser display:none ou supprimer complètement la section sur desktop ?

Ça dépend du poids. Pour le texte et les sections rendues en CSS : display: none fait l'affaire — l'impact est minime. Pour les sections lourdes en images ou en vidéos : utilisez le rendu conditionnel en Liquid en fonction des indicateurs du viewport ou utilisez les attributs d'images responsives de Shopify — car display: none charge quand même les assets. Le rendu conditionnel côté serveur est bien plus propre pour les contenus lourds.

Puis-je masquer des sections de façon conditionnelle selon l'état de connexion du client ?

Oui, via Liquid. Décrivez ce que vous souhaitez restreindre à Fudge ("afficher ce bloc de prix de gros uniquement aux clients B2B connectés") et il enveloppera la section dans un {% if customer %} ou une condition basée sur un tag qui s'exécute côté serveur — les acheteurs non concernés ne verront jamais le HTML. Très pratique pour les recommandations grossistes, les bannières réservées aux comptes clients ou le contenu VIP.

Pourquoi ma section masquée apparaît-elle brièvement au chargement initial ?

C'est le Flash of Unstyled Content (FOUC). Le navigateur affiche le HTML avant d'appliquer le CSS, donc la section apparaît pendant une fraction de seconde avant que le display: none ne s'active. Pour corriger ça, placez le CSS critique en inline dans le <head> (la plupart des thèmes modernes le font), ou utilisez le rendu conditionnel côté serveur en Liquid.

Quel breakpoint dois-je utiliser pour le "desktop" en CSS ?

Les breakpoints les plus courants sont : 768px (tablette+), 1024px (desktop+), 1280px (large desktop). Alignez-vous sur les breakpoints existants de votre thème — utiliser 768px quand votre thème bascule à 990px créera une zone intermédiaire assez gênante. Inspectez la feuille de style du thème au niveau des media queries pour trouver les bonnes valeurs.