How to Hide a Section on Desktop in Shopify (2026)

Key takeaways

• Some themes have a built-in “Hide on desktop” or visibility toggle per section in the Theme Editor.
• If your theme doesn’t expose this, you can use a CSS media query targeting desktop widths.
• The CSS approach goes in Theme settings → Custom CSS in the Theme Editor.
• Fudge can add proper desktop visibility controls to any section without code.

To hide a section on desktop in Shopify, check the section’s settings for a visibility option. If there isn’t one, add @media (min-width: 990px) { .your-section { display: none; } } in Theme settings > Custom CSS (990px is Dawn’s desktop breakpoint).

This is useful for sections built for phones, such as a sticky promo bar, a simplified nav or a tap-to-call button.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.

Method 1 — check the Theme Editor for a visibility toggle

Some Shopify themes (particularly those built on Online Store 2.0) include per-section visibility options directly in the Theme Editor.

Step 1. Go to Online Store → Themes → Customize.

Step 2. Click the section you want to hide on desktop.

Step 3. Look in the section settings panel for a “Visibility” setting or a “Hide on desktop” checkbox.

Step 4. If it’s there, enable it and save.

If you don’t see this option, your theme doesn’t support it natively. Move to Method 2.

To hide a section on mobile instead, see how to hide content on mobile in Shopify.

Where is the visibility section in Shopify?

Visibility settings live inside individual section settings — not in a global panel.

Click a section in the Theme Editor left sidebar → scroll through the section’s settings → look for visibility or device options near the bottom. There is no single “Visibility” screen in the Theme Editor; it’s per-section.

Method 2 — hide on desktop with a CSS media query

This is the reliable fallback for any theme.

Step 1. Find the section’s CSS class. Right-click the section on your live store → Inspect → look for the class on the outermost <div>. It usually looks like .shopify-section with an additional custom class, or a section-specific ID.

Step 2. Open the Theme Editor → scroll down in the left panel → click Theme settings → find Custom CSS.

Step 3. Add this CSS, swapping in your actual section class:

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

Step 4. Save.

This hides the section on screens 990px and wider, which is where Dawn switches to its desktop layout. Adjust the breakpoint to match your theme.

Choosing the right breakpoint

Match your theme’s own breakpoints. Dawn and its sister themes (Sense, Refresh, Craft) use 750px for mobile and 990px for desktop. To hide the section on tablets as well as desktops, start the rule at 750px:

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

Check your theme’s stylesheet to confirm what breakpoints it uses for its layout shift.

Add a desktop visibility toggle with Fudge

Fudge, the AI operator for Shopify stores, can modify your section’s schema with its store editor to include a proper “Hide on desktop” toggle that appears in the Theme Editor.

Describe what you want:

“Add a hide-on-desktop option to the mobile promo bar section on my homepage.”

Fudge adds a setting to the section’s schema and the CSS class it toggles. Once you approve the draft, the toggle lives in your Theme Editor — no code changes needed in future. Because it’s part of your theme, it stays even if you uninstall Fudge.

Does CSS-hidden content affect Shopify speed?

Yes, slightly. When you use display: none, the HTML is still present in the page and the browser still parses it. Images inside hidden sections may still be downloaded, which wastes bandwidth and can hurt page speed scores.

For image-heavy desktop-hidden sections, make sure the images use loading="lazy"; browsers skip lazy images inside hidden elements.

Liquid can’t drop a section for one device. It renders on Shopify’s servers and can’t see the shopper’s screen size, so hiding per device always happens in CSS.

For text-only or lightweight sections, display: none is perfectly acceptable.

FAQ