Comment masquer une section sur ordinateur dans Shopify (2026)

Points clés

• Certains thèmes intègrent une option “Masquer sur ordinateur” (Hide on desktop) ou un bouton 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 ciblant les largeurs d’écran d’ordinateur.
• L’approche CSS se place 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.

Pour masquer une section sur ordinateur dans Shopify, vérifiez s’il y a une option de visibilité dans les paramètres de la section. S’il n’y en a pas, ajoutez @media (min-width: 990px) { .votre-section { display: none; } } dans Paramètres du thème > CSS personnalisé (990px est le point de rupture de Dawn pour les ordinateurs).

C’est utile pour les sections conçues pour les téléphones, comme une barre promo fixe, une navigation simplifiée ou un bouton d’appel.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, qui a une note de 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 Online Store 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 voulez masquer sur ordinateur.

Étape 3. Dans le panneau des paramètres de la section, cherchez un paramètre de “Visibilité” (Visibility) ou une case à cocher “Masquer sur ordinateur” (Hide on desktop).

Étape 4. S’il y est, activez-le et enregistrez.

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

Pour masquer une section sur mobile plutôt, consultez comment masquer du contenu 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. Ça 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 → descendez dans le panneau de gauche → cliquez sur Paramètres du thème (Theme settings) → trouvez CSS personnalisé (Custom CSS).

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

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

Étape 4. Enregistrez.

Cela masque la section sur les écrans de 990px et plus, ce qui correspond au moment où Dawn passe à sa mise en page pour ordinateur. Ajustez le point de rupture (breakpoint) pour qu’il corresponde à votre thème.

Choisir le bon point de rupture

Adaptez-vous aux points de rupture de votre thème. Dawn et ses thèmes frères (Sense, Refresh, Craft) utilisent 750px pour le mobile et 990px pour l’ordinateur. Pour masquer la section sur les tablettes ainsi que sur les ordinateurs, commencez la règle à 750px :

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

Vérifiez la feuille de style de votre thème pour confirmer quels points de rupture il utilise pour ses changements de mise en page.

Ajouter un bouton de visibilité sur ordinateur avec Fudge

Fudge, l’opérateur IA pour les boutiques Shopify, peut modifier le schéma de votre section avec son éditeur de boutique pour inclure un vrai bouton “Masquer sur ordinateur” qui apparaît dans l’éditeur de thème.

Décrivez ce que vous voulez :

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

Fudge ajoute un paramètre au schéma de la section et la classe CSS qu’il active/désactive. Une fois que vous approuvez le brouillon, le bouton reste dans votre éditeur de thème — aucune modification de code ne sera nécessaire à l’avenir. Comme il fait partie de votre thème, il reste même si vous désinstallez Fudge.

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 à l’intérieur des sections masquées peuvent toujours être téléchargées, ce qui gaspille de la bande passante et peut nuire aux scores de vitesse de la page.

Pour les sections riches en images masquées sur ordinateur, assurez-vous que les images utilisent loading="lazy" ; les navigateurs ignorent les images en lazy-loading à l’intérieur d’éléments masqués.

Liquid ne peut pas supprimer une section pour un seul appareil. Il fait le rendu sur les serveurs de Shopify et ne peut pas voir la taille de l’écran du client, donc le fait de masquer selon l’appareil se fait toujours en CSS.

Pour les sections contenant uniquement du texte ou légères, display: none est tout à fait acceptable.

FAQ