Hide a Section on Desktop in Shopify

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.

The opposite problem from mobile clutter: sometimes a section is designed purely for mobile - a sticky promo bar, a simplified nav, a tap-to-call button - and you want it invisible on desktop.

Here’s how to hide a section on desktop only.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge — an AI storefront editor with a 5.0 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.

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: 768px) {
  .your-section-class {
    display: none;
  }
}

Step 4. Save.

This hides the section on screens 768px and wider - everything from tablets to large monitors. Adjust the breakpoint if needed. Some themes use 1024px as the desktop threshold.

Choosing the right breakpoint

Most Shopify themes treat 768px as the start of tablet/desktop. If you want the section hidden on desktop only (but still visible on tablet):

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

Check your theme’s stylesheet to confirm what breakpoint it uses for its layout shift. Dawn uses 990px as its main breakpoint.

Method 3 — use Fudge to add desktop visibility controls

Fudge can modify your section’s schema 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 edits the section schema and adds the conditional rendering logic. Once done, the toggle lives in your Theme Editor — no code changes needed in future.

Add visibility controls to any section — just describe it.

Try Fudge for Free

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 sections with heavy images that are desktop-only, the cleanest approach is conditional server-side rendering — which either a developer or Fudge can implement. This removes the section from the HTML entirely on the targeted device, rather than just hiding it visually.

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

FAQ

Will hidden sections still affect my Shopify SEO?

Sections hidden via display: none remain in the page HTML and are still seen by Google. If the hidden section contains keyword content, Google may index it (with reduced weight, since it's not visible). For pure mobile/desktop UX hiding this is fine; for content you genuinely don't want indexed, render it conditionally in Liquid rather than hiding via CSS.

Should I use display:none or remove the section entirely on desktop?

Depends on weight. Text and CSS-rendered sections: display: none is fine — minimal cost. Image-heavy or video sections: render conditionally in Liquid based on viewport indicators or use Shopify's responsive image attributes — display: none still loads the assets. Server-side conditional rendering is cleaner for heavy content.

Can I conditionally hide sections based on logged-in customer status?

Yes via Liquid. Describe what you want gated to Fudge ("show this wholesale pricing block only to logged-in B2B customers") and it wraps the section in a {% if customer %} or tag-based condition that renders server-side — non-matching shoppers never see the HTML. Useful for wholesale blocks, account-only banners, or VIP content.

Why does my hidden section flash visible briefly on initial load?

Flash of Unstyled Content (FOUC). The browser renders HTML before applying CSS, so the section appears for a frame before display: none kicks in. Fix by inlining the critical CSS in the <head> (most modern themes do this), or by using server-side conditional rendering in Liquid.

What breakpoint should I use for "desktop" in CSS?

Common breakpoints: 768px (tablet+), 1024px (desktop+), 1280px (large desktop). Match your theme's existing breakpoints — using 768px when your theme switches at 990px creates an awkward middle range. Inspect the theme's stylesheet for media queries to find the correct values.