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.
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.
