Masquer une section sur ordinateur dans Shopify

Points clés

Certains thèmes intègrent une option “Masquer sur ordinateur” ou un réglage de visibilité par section dans l’éditeur de thème.

Si votre thème ne le propose pas, vous pouvez utiliser une media query CSS ciblant les écrans d’ordinateur.

Le code CSS s’ajoute dans les Paramètres du thème → CSS personnalisé (Custom CSS) de l’éditeur de thème.

Fudge permet d’ajouter de vrais 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 le mobile — une barre promo sticky, une navigation simplifiée, un bouton d’appel — et vous voulez qu’elle soit invisible sur ordinateur.

Voici comment masquer une section uniquement sur la version ordinateur.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge — un éditeur de boutique basé sur l’IA noté 4.9 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 sur votre boutique en ligne → Inspecter → cherchez la classe sur le <div> le plus à l’extérieur. Cela ressemble généralement à .shopify-section avec une classe personnalisée supplémentaire, ou un ID spécifique à la section.

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

Étape 3. Ajoutez ce CSS, en remplaçant par la classe réelle de votre section :

@media (min-width: 768px) {
    .votre-classe-de-section {
        display: none;
    }
}

Étape 4. Enregistrez.

Cela masque la section sur les écrans de 768px et plus - des tablettes aux grands écrans. Ajustez le breakpoint si nécessaire. Certains thèmes utilisent 1024px comme seuil pour le desktop.

Choisir le bon point de rupture

La plupart des thèmes Shopify considèrent 768px comme le début du format tablette/desktop. Si vous souhaitez que la section soit masquée uniquement sur desktop (mais qu’elle reste visible sur tablette) :

@media (min-width: 1024px) {
    .votre-classe-de-section {
        display: none;
    }
}

Vérifiez la feuille de style de votre thème pour confirmer quel breakpoint il utilise pour son changement de mise en page. Dawn utilise 990px comme breakpoint 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 affecteront-elles toujours mon SEO Shopify ?

Les sections masquées via display: none restent dans le 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 pour l'UX mobile/desktop, c'est très bien ; pour le contenu que vous ne voulez vraiment pas indexer, faites 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. Sections de texte et rendues en CSS : display: none fait l'affaire — coût minime. Sections lourdes en images ou vidéos : faites un rendu conditionnel en Liquid selon les indicateurs du viewport ou utilisez les attributs d'images responsive 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 manière conditionnelle en fonction du statut de connexion du client ?

Oui, via Liquid. Décrivez ce que vous souhaitez restreindre à Fudge ("ne montrer ce bloc de prix de gros qu'aux clients B2B connectés") et il enveloppe la section dans un {% if customer %} ou une condition basée sur un tag qui effectue le rendu côté serveur — les acheteurs qui ne correspondent pas ne voient jamais le HTML. Pratique pour les blocs de vente en gros, les bannières réservées aux comptes, ou le contenu VIP.

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

C'est le FOUC (Flash of Unstyled Content). Le navigateur rend le HTML avant d'appliquer le CSS, la section apparaît donc un instant avant que le display: none ne fasse effet. Corrigez cela en intégrant (inlining) le CSS critique dans le <head> (la plupart des thèmes modernes le font), ou en utilisant le rendu conditionnel côté serveur en Liquid.

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

Breakpoints courants : 768px (tablette+), 1024px (desktop+), 1280px (grand desktop). Adaptez-vous aux breakpoints existants de votre thème — utiliser 768px alors que votre thème bascule à 990px crée une zone intermédiaire un peu bizarre. Inspectez la feuille de style du thème pour trouver les bonnes valeurs de media queries.