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

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.

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.

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:

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.