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.

To hide a section on mobile in Shopify, turn on its “Hide on mobile” setting in the theme editor if your theme has one. If not, add @media (max-width: 749px) { .your-section-class { display: none; } } in Theme settings > Custom CSS.

Typical candidates are a large image-text block, an awards row or a desktop-only promo banner.

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

To hide single blocks or elements, see how to hide content on mobile in Shopify.

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. The phone preview only changes what you see; settings you change there apply to every device. 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: 749px) {
    .your-section-class {
        display: none;
    }
}

Step 4. Save.

The section will now be invisible on screens narrower than 750px, where Dawn switches to its mobile layout. 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.

To do the opposite, see how to hide a section on desktop in Shopify.

What breakpoints does Shopify use?

Shopify themes don’t enforce a single breakpoint standard, but most follow common conventions:

Dawn and its sister themes (Sense, Refresh, Craft) use 750px for mobile and 990px for desktop. Check your theme’s stylesheet if you need the exact value.

Add a mobile visibility toggle with Fudge

If you need precise control over what shows on mobile across multiple sections, Fudge, the AI operator for Shopify stores, can add proper mobile/desktop visibility toggles directly in your theme’s section schema. Ask its store editor for the change in plain English.

Describe what you want:

“Add a ‘hide on mobile’ toggle to the promotional banner section on my homepage.”

Fudge adds a setting to the section’s schema and the CSS class it toggles, the same way a developer would. You check the draft on a phone-sized preview before publishing, and 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, remove the section. Liquid runs on Shopify’s servers and can’t detect the device, so it can’t drop a section for phones only.

For most merchants, display: none is perfectly fine.

FAQ