Points clés
- Certains thèmes ont une option “Masquer sur ordinateur” ou un bouton de visibilité par section directement dans l’Éditeur de thème.
- Si votre thème ne le propose pas, vous pouvez utiliser une media query CSS ciblant les largeurs d’écran d’ordinateur.
- L’approche CSS se configure dans Paramètres du thème → CSS personnalisé dans l’Éditeur de thème.
- Fudge peut ajouter des contrôles de visibilité sur ordinateur à n’importe quelle section, sans coder.
C’est le problème inverse de l’encombrement sur mobile : parfois, une section est conçue uniquement pour mobile (une barre promo fixe, une nav simplifiée, un bouton tap-to-call) et vous voulez la rendre invisible sur ordinateur.
Voici comment masquer une section uniquement sur ordinateur.
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.
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 affecteront-elles quand même mon SEO sur Shopify ?
Les sections masquées via display: none restent dans le code HTML de la page et sont toujours lues 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 liés à l’UX mobile/desktop, c’est très bien ; pour du contenu que vous ne souhaitez 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 la section entièrement sur desktop ?
Cela dépend de son poids. Pour le texte ou les éléments générés par CSS : display: none convient parfaitement — l’impact est minime. Pour les sections lourdes en images ou en vidéos : privilégiez un rendu conditionnel en Liquid basé sur des indicateurs de viewport, ou utilisez les attributs d’images responsives de Shopify — display: none charge quand même les assets. Le rendu conditionnel côté serveur est plus propre pour le contenu lourd.
Puis-je masquer des sections de façon conditionnelle selon le statut 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 avec une condition {% if customer %} ou basée sur des tags pour effectuer un rendu côté serveur — les acheteurs non concernés ne verront jamais le code HTML. Très utile pour les blocs de vente en gros, les bannières réservées aux clients connectés ou le contenu VIP.
Pourquoi ma section masquée s’affiche-t-elle brièvement lors du chargement initial ?
C’est ce qu’on appelle un Flash of Unstyled Content (FOUC). Le navigateur effectue le rendu du HTML avant d’appliquer le CSS, la section apparaît donc une fraction de seconde avant que le display: none ne fasse effet. Pour corriger cela, intégrez le CSS critique directement dans la balise <head> (la plupart des thèmes modernes le font), ou utilisez un rendu conditionnel côté serveur en Liquid.
Quel breakpoint dois-je utiliser pour le “desktop” en CSS ?
Breakpoints courants : 768px (tablettes+), 1024px (desktop+), 1280px (grands écrans desktop). Alignez-vous sur les breakpoints existants de votre thème — utiliser 768px si votre thème bascule à 990px crée une zone intermédiaire désagréable. Inspectez la feuille de style (stylesheet) de votre thème au niveau des media queries pour trouver les valeurs exactes.
Article connexe : Masquer du contenu sur mobile dans Shopify.
Article connexe : Supprimer une section dans Shopify.
Article connexe : Rendre les sections Shopify exclusives au mobile.