How to Make Shopify Sections Mobile-Only (2026)

Key takeaways

• Some Shopify themes include “Show on mobile only” toggles inside section settings — check there first.
• If your theme doesn’t have this, CSS display: none at desktop breakpoints achieves the same result.
• Mobile-only sections are useful for simplified navigation, tap-to-call banners, and app download prompts.
• Fudge can add visibility controls to any section without you writing CSS.

To make a Shopify section mobile-only, turn on its “Hide on desktop” setting if your theme has one, or add @media (min-width: 750px) { .your-section { display: none; } } to your theme’s CSS.

A tap-to-call phone number bar, a simplified sticky navigation or a mobile-specific promotional banner are good examples.

Why mobile-only sections make sense

Mobile and desktop visitors have different needs. Desktop users navigate with a cursor, have a large screen, and often browse with more patience. Mobile users are often on the go, tapping with a thumb, and want faster access to key actions.

A section designed specifically for mobile — like a large “Call Us” button or a simplified category menu — would look unnecessary on desktop where more elegant solutions already exist.

To change the order of sections on phones instead, see how to reorder your mobile layout in Shopify.

Method 1 — Check your theme’s visibility settings

The quickest place to start is your Theme Editor.

Step 1 — Open the Theme Editor. Go to Online Store → Themes → Customize.

Step 2 — Select the section. Click the section you want to control in the left sidebar or directly on the canvas.

Step 3 — Look for visibility settings. In the right-hand settings panel, scroll down. Some themes (especially premium themes built on Dawn) include toggles like:

• “Show on mobile”
• “Show on desktop”
• “Hide on desktop”

If your theme has these, toggle them and you’re done. Switch to mobile preview (phone icon at the top) to confirm the result.

Method 2 — CSS approach (works with any theme)

If your theme doesn’t include visibility toggles, CSS is the reliable fallback. You’ll add a class to the section and use a media query to hide it on desktop.

Step 1 — Duplicate your theme. Go to Online Store → Themes, click the three-dot menu (…) next to your theme, then Duplicate. Make the changes on the copy.

Step 2 — Identify the section’s class. Right-click the section in your browser → Inspect Element → find the outermost <div> of the section and note its class (e.g., section-announcement-bar).

Step 3 — Add CSS to your theme. On the duplicate, click the three-dot menu (…), then Edit code, and open assets/base.css (or your theme’s main CSS file).

Step 4 — Add this rule:

@media (min-width: 750px) {
    .section-announcement-bar {
        display: none;
    }
}

This hides the section on screens 750px wide and above (tablets and desktops), while showing it on mobile. Dawn and its sister themes (Sense, Refresh, Craft) use 750px for mobile and 990px for desktop.

Alternative — add a custom class. If the existing class is too generic, add your own class to the section’s Liquid file:

<div class="mobile-only-section">
    <!-- section content -->
</div>

Then target .mobile-only-section in your CSS.

Method 3 — Fudge for adding visibility controls

If you want a proper solution where visibility is controlled through the Theme Editor (without manually hunting for class names), Fudge, the AI operator for Shopify stores, can build it with its store editor.

Describe what you need:

“Add a mobile-only announcement bar at the top that shows a tap-to-call button. Hide it completely on desktop.”

Fudge generates the section with proper responsive logic built in. You review the draft before anything goes live, and if the bar doesn’t earn its space you can roll it back in one click.

Practical use cases for mobile-only sections

Tap-to-call bar. A sticky bar at the bottom of the screen with a large phone number button. On desktop, your header navigation already handles this — but on mobile, a prominent tap-to-call makes a real difference for local businesses.

Simplified sticky navigation. A minimal “Home / Shop / Cart” navigation for mobile users who want quick access without scrolling back to the top.

App download banner. A banner promoting your mobile app that only appears for mobile visitors. Showing this on desktop where it’s irrelevant is just noise.

Mobile-specific offers. A promotional message like “Order from the app and save 10%” that only makes sense for mobile visitors.

What about hiding desktop-only content on mobile?

The same approach works in reverse: use @media (max-width: 749px) to hide sections on mobile while keeping them on desktop. See our guide on hiding content on mobile in Shopify for more details on that direction.

FAQ