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.

Sometimes a section belongs on mobile but would look out of place — or take up too much space — on desktop. A tap-to-call phone number bar, a simplified sticky navigation, or a mobile-specific promotional banner are all good examples.

This guide covers how to make it happen in Shopify.

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.

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 — 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 2 — Add CSS to your theme. Go to Online Store → Themes → Actions → Edit code → open assets/base.css (or your theme’s main CSS file).

Step 3 — Add this rule:

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

This hides the section on screens 768px wide and above (desktop), while showing it on mobile.

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.

Important: Always work on a duplicate theme. Go to Themes → the three-dot menu next to your theme → Duplicate, then make changes on the copy.

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 can build it.

Describe what you need to Fudge:

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

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: 767px) 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.

Does hiding a section with CSS affect SEO?

CSS-hidden content is still in the HTML and crawled by search engines. It’s not treated as hidden content in a malicious sense — search engines understand responsive design patterns. However, avoid using this technique to stuff keywords into hidden sections, as that would be a red flag.

For sections that serve purely visual or UX purposes (like a tap-to-call button), CSS visibility is fine.