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.

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. Quand vous utilisez display: none, le code HTML est toujours présent dans la page et le navigateur le lit quand même. Les images à l’intérieur des sections masquées peuvent toujours être téléchargées, ce qui gaspille de la bande passante et peut impacter vos scores de vitesse de page.

Pour les sections comportant beaucoup d’images et réservées aux ordinateurs, l’approche la plus propre reste le rendu conditionnel côté serveur (un développeur ou Fudge peut l’implémenter). Cela supprime complètement la section du code HTML sur l’appareil ciblé, au lieu de simplement la cacher visuellement.

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