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: noneat 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.
Related: Add Homepage Sections in Shopify.
Related: Reorder 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 — 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.
Related: Hide a Section on Desktop in Shopify.
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.
FAQ
Three causes: (1) the CSS specificity isn't high enough — theme styles override your display: none rule (use !important or more specific selector), (2) you targeted the wrong class (inspect the rendered HTML to confirm), or (3) the breakpoint is wrong (use 768px for mobile/tablet boundary, 1024px for desktop start, depending on theme).
position: fixed for a bar that always stays at the bottom regardless of scroll. position: sticky for a bar that scrolls with content but sticks when reaching a threshold. For most tap-to-call use cases, fixed is correct — you want the bar always visible. Reserve sticky for less-intrusive elements that don't need constant visibility.
Negligibly. Google can render and read CSS-hidden content on either side. The content is technically in the page on desktop too — just visually hidden. For UX-driven mobile-only content (tap-to-call, app banner), SEO impact is zero.
Yes via request.user_agent checks, but this is fragile — user agents are unreliable and Shopify's edge caching can miss device-specific variants. CSS media queries are more reliable for visual mobile-only behavior. Use Liquid device detection only when you need to genuinely omit content from the HTML.
For minor differences (text size, padding), one responsive section with media queries. For substantially different content (different images, copy, layouts), two sections — one mobile, one desktop — is cleaner than complex responsive logic in a single section. Describe what you want to Fudge and it generates the right structure for your case — either one responsive section or a paired mobile/desktop set.
