Key takeaways
- Many themes have a built-in “Hide on mobile” toggle per section in the Theme Editor — check there first.
- If your theme doesn’t have the toggle, you can hide a section on mobile with a CSS media query.
- Custom CSS goes in Online Store → Themes → Customize → Theme settings → Custom CSS.
- Fudge can add mobile visibility controls to any section without you writing code.
Some sections look great on desktop but clutter the mobile experience. A large image-text block, an awards row, a desktop-only promo banner — sometimes they just don’t belong on a small screen.
Here’s how to hide them.
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 — use the Theme Editor visibility toggle
This is the easiest approach and works in many modern Shopify themes.
Related: Hide Content on Mobile in Shopify.
Step 1. Go to Online Store → Themes → Customize.
Step 2. Navigate to the page containing the section you want to hide.
Step 3. Click the section in the left sidebar to open its settings.
Step 4. Look for a “Hide on mobile” checkbox or a “Visibility” option. In some themes this appears at the bottom of the section settings panel. In others it appears as a device icon toggle.
Step 5. Enable it and save.
If you don’t see this option, your theme doesn’t expose it natively. Use Method 2 instead.
How do I edit my mobile view on Shopify?
The Theme Editor has a device preview toolbar at the top of the canvas. Click the mobile phone icon to switch the preview to a mobile viewport.
This shows you exactly how your store looks on mobile. Changes you make in this view (where supported) apply to mobile only. For layout differences that go beyond section visibility, you’ll need CSS or a tool like Fudge.
Method 2 — hide with CSS on mobile
If your theme doesn’t have a visibility toggle, you can hide a section using a CSS media query.
Step 1. Identify the section you want to hide. Right-click it in the browser → Inspect → find the class or ID on the outermost element. It will look something like .shopify-section-template--hero or a custom section ID.
Step 2. Go to Online Store → Themes → Customize → scroll to the bottom of the left sidebar → click Theme settings → scroll to Custom CSS.
Step 3. Add this CSS, replacing .your-section-class with the actual class:
@media (max-width: 767px) {
.your-section-class {
display: none;
}
}Step 4. Save.
The section will now be invisible on screens narrower than 768px - the standard mobile breakpoint. It remains fully visible on tablet and desktop.
Related: Speed Up a Shopify Theme.
Related: Improve Mobile Spacing in Shopify.
Related: Hide a Section on Desktop in Shopify.
Important: hiding with CSS still loads the section’s HTML. The section exists in the page source - it’s just not displayed. For performance-critical sections with large images, removing the section entirely (or using a theme option) is a better approach.
What breakpoints does Shopify use?
Shopify themes don’t enforce a single breakpoint standard, but most follow common conventions:
| Breakpoint | Width |
|---|---|
| Mobile | up to 767px |
| Tablet | 768px - 1023px |
| Desktop | 1024px and above |
Dawn uses 750px as its primary mobile/tablet breakpoint. Check your theme’s stylesheet if you need the exact value.
Method 3 — use Fudge to add mobile visibility controls
If you need precise control over what shows on mobile across multiple sections, Fudge can add proper mobile/desktop visibility toggles directly in your theme’s section schema.
Describe what you want:
“Add a ‘hide on mobile’ toggle to the promotional banner section on my homepage.”
Fudge edits the section’s schema and adds the conditional rendering logic — the same way a developer would. The toggle then appears in the Theme Editor for your team to use without code.
Does hiding a section on mobile affect SEO?
Using display: none in CSS does not remove the content from Google’s index. Google renders pages and can read CSS-hidden content. For SEO purposes, the content still exists.
If the content is genuinely not relevant on mobile and you don’t want it indexed, the better approach is to use Shopify’s section rendering to conditionally exclude it from the HTML on mobile - which requires code or Fudge.
For most merchants, display: none is perfectly fine.
FAQ
Toggle availability varies by theme and section type. Online Store 2.0 themes (Dawn, Sense, Refresh) include it on most flexible sections, but main product/collection sections often don't expose it. Older themes (Debut, Brooklyn) typically don't include the toggle at all — CSS or Fudge is the workaround.
Yes — display: none keeps the HTML in the page, so images, scripts, and other assets inside still load. The only saving is rendering work. For performance-sensitive sections (large images, video), use server-side conditional rendering in Liquid instead of CSS hiding.
No, generally. Google evaluates the desktop version for indexing on most sites (mobile-first indexing now uses the rendered mobile DOM, but content hidden via CSS is still seen). Don't noindex unless the content is genuinely irrelevant to search — hiding is a UX decision, not an SEO decision.
Dawn uses 750px as the primary mobile/tablet breakpoint. Sense and Refresh use 990px. Other themes vary — Debut uses 750px, Symmetry varies by section. Check your theme's assets/base.css for the existing @media queries to match the convention rather than introducing a new breakpoint.
Yes. Common pattern: build two versions of the section, hide one on mobile (@media (max-width: 767px) { .section-desktop { display: none; } }) and the other on desktop. Better long-term: use Liquid conditionals based on viewport indicators, or build one responsive section that handles both.
