To show different banner images on desktop and mobile in Shopify, either add two banner sections and hide one per device with each section’s Custom CSS field, or (the better way) add a mobile image picker to your banner section’s schema and render both with an HTML picture element, so each device downloads only its own image.

Your homepage banner looks perfect on desktop. Wide, cinematic, product on the left, headline breathing comfortably on the right. You spent real money on that photo.

Then you open your store on your phone — and it’s a disaster. The image is squeezed into a tall, narrow crop. Your product is half out of frame. The model’s face is gone. The text sits on top of the busiest part of the photo. All that art direction, destroyed by one aspect ratio change.

Here’s the uncomfortable math: a wide desktop banner (roughly 3:1 or 16:9) and a mobile banner (portrait, around 4:5) are fundamentally different shapes. No amount of “background position” fiddling makes one image work beautifully as both. Big brands don’t even try — they shoot or crop two versions of every banner: a wide one for desktop, a tall one for mobile, each composed for its own frame.

And here’s the Shopify catch: Dawn’s Image Banner section only accepts one image. There’s no “mobile image” setting anywhere in the theme editor. So most store owners either live with the bad mobile crop, or install yet another app.

You need neither. In this tutorial I’ll show you two free ways to serve different banner images per device:

1. The quick no-code method — two banner sections plus each section’s built-in Custom CSS field (10 minutes, zero code files touched, with one honest performance caveat)
2. The professional method — adding a real “Mobile image” setting to your banner section and rendering it with the HTML <picture> element, so each device downloads only its own image (the way performance-conscious themes do it)

Plus the exact image sizes to use for each device and the design rules that make mobile banners convert. As a Shopify developer, method 2 is what I install on client stores — but method 1 has its place, and I’ll tell you honestly when each wins. Let’s fix that mobile banner.

Table of Contents

• Why One Banner Image Can’t Serve Both Devices
• The Two Methods at a Glance
• Before You Start: Prepare Both Images
• Method 1: Two Sections + Custom CSS (No Code Files)
• Method 2: A Real Mobile Image Setting (The Pro Fix)
  • Step 1: Add the Mobile Image Setting to the Schema
  • Step 2: Wrap the Banner Image in a Picture Element
  • Step 3: Use It in the Theme Editor
• Which Method Should You Use?
• Recommended Banner Sizes for Desktop and Mobile
• Design Best Practices for Mobile Banners
• Common Mistakes to Avoid
• Troubleshooting
• FAQ
• Conclusion

Why One Banner Image Can’t Serve Both Devices

It comes down to geometry:

• Desktop banners are wide. Typical hero areas run 1920px wide at ratios between 16:9 and 3:1. Composition spreads horizontally: product on one side, copy space on the other.
• Mobile banners are tall. A phone screen in portrait gives you a frame closer to 4:5 or even 9:16. Composition stacks vertically: product centered, copy above or below.

When a theme squeezes one wide image into the tall mobile frame, something has to give — it either crops brutally (losing your subject) or letterboxes awkwardly (tiny image, huge gaps). Dawn’s banner settings (adaptive height, image position) can soften the damage, but they can’t change the fact that the composition was designed for a different shape.

The professional answer is two assets: one wide, one tall, each art-directed for its frame. The technical question — and this article — is how to make Shopify serve the right one to each device.

The Two Methods at a Glance

Before You Start: Prepare Both Images

Whichever method you choose, do the creative work first:

1. Desktop version: export your banner at 1920 × 800 px or larger (up to 3840 wide for crisp retina; Dawn requests large sizes and Shopify’s CDN scales down)
2. Mobile version: re-crop or re-compose the same visual at a portrait ratio — 1080 × 1350 px (4:5) is a versatile standard
3. Compress both (WebP or quality-85 JPG; aim well under 500 KB each) — banners are usually the largest image on the page and the biggest lever on your loading speed
4. Keep the message identical across both — same product, same offer — so the experience feels continuous across devices

And if you’ll be using Method 2: duplicate your theme first (Online Store → Themes → ⋯ → Duplicate) and edit the copy.

Method 1: Two Sections + Custom CSS (No Code Files)

Modern Dawn versions include a Custom CSS field on every section in the theme editor — and that unlocks a genuinely code-file-free solution: two banner sections, each visible on only one device.

1. Go to Online Store → Themes → Customize
2. On your homepage, set up your existing Image banner section with the desktop image, heading, and button
3. Click Add section → Image banner directly below it, and configure it with the mobile image and the same heading/button
4. Select the first (desktop) section, scroll to the bottom of its settings, open Custom CSS, and paste:

css

@media screen and (max-width: 749px) {
  .banner {
    display: none;
  }
}

5. Select the second (mobile) section, and in its Custom CSS paste the mirror:

css

@media screen and (min-width: 750px) {
  .banner {
    display: none;
  }
}

6. Click Save, and preview: desktop shows section one, mobile shows section two

Why this works: per-section Custom CSS is scoped to that section only, so hiding .banner inside one section’s CSS doesn’t touch the other. The 749/750px split matches Dawn’s own mobile breakpoint.

The honest caveat: display: none hides images visually, but browsers may still download them. That means mobile visitors can pay the bandwidth cost of your big desktop banner they’ll never see — on the most speed-critical section of your homepage. For a short campaign or a quick win, acceptable. As your permanent architecture, it’s exactly what Method 2 exists to fix.

(Same trick works for Slideshow and most other image sections — inspect the section’s wrapper class if .banner doesn’t match, e.g. .slideshow.)

Method 2: A Real Mobile Image Setting (The Pro Fix)

This is the version that belongs in your theme long-term: one banner section with an extra “Mobile image” picker, rendered through the HTML <picture> element — the web standard built precisely for art-directed responsive images. The browser reads the media conditions and downloads only the matching image. Zero waste, zero hidden downloads.

Step 1: Add the Mobile Image Setting to the Schema

1. Go to Online Store → Themes → ⋯ → Edit code on your duplicate
2. Open Sections → image-banner.liquid
3. Scroll to the {% schema %} block at the bottom and find the existing first image setting — it looks like:

json

{
  "type": "image_picker",
  "id": "image",
  "label": "t:sections.image-banner.settings.image.label"
}

4. Directly after it (mind the comma between entries), add:

json

{
  "type": "image_picker",
  "id": "mobile_image",
  "label": "Mobile image (optional)",
  "info": "Shown on screens under 750px. Recommended ratio 4:5."
}

5. Save. If the editor complains, it’s a JSON comma — check the entries before and after yours.

Step 2: Wrap the Banner Image in a Picture Element

Still in image-banner.liquid, scroll up to the markup and find where the first image renders — search (Ctrl/Cmd + F) for settings.image | and you’ll land on a line like:

liquid

{{
  section.settings.image
  | image_url: width: 3840
  | image_tag: ... (loading, sizes, widths attributes)
}}

Wrap that entire {{ ... }} statement in a <picture> element with a mobile source, so it becomes:

liquid

<picture>
  {%- if section.settings.mobile_image != blank -%}
    <source
      media="(max-width: 749px)"
      srcset="
        {{ section.settings.mobile_image | image_url: width: 440 }} 440w,
        {{ section.settings.mobile_image | image_url: width: 750 }} 750w,
        {{ section.settings.mobile_image | image_url: width: 1100 }} 1100w
      "
      sizes="100vw"
      width="{{ section.settings.mobile_image.width }}"
      height="{{ section.settings.mobile_image.height }}"
    >
  {%- endif -%}
  {{
    section.settings.image
    | image_url: width: 3840
    | image_tag: ... (leave the original filters/attributes exactly as they were)
  }}
</picture>

Two important notes:

• Don’t retype the original image_tag line — leave it byte-for-byte as it was. You’re only adding the <picture> wrapper and the <source> above it. The original tag remains the desktop image and the fallback.
• The srcset widths give phones appropriately sized files (a 440px-wide phone shouldn’t download an 1100px image); Shopify’s CDN generates each size on demand.

How it behaves: under 750px, the browser sees the <source> media condition matches and loads the mobile image; at 750px and above it ignores the source and loads the original desktop image. One request per device, always the right one.

Click Save.

Step 3: Use It in the Theme Editor

1. Customize your duplicate theme
2. Click your Image banner section — you’ll find the new Mobile image (optional) picker right below the first image
3. Select your portrait mobile image, save, and preview both device sizes (the editor’s mobile preview toggle, plus a real phone)
4. Sections where you don’t set a mobile image behave exactly as before — the setting is optional everywhere

Publish the duplicate when you’re happy. And keep a copy of your two edits (the schema entry and the picture wrapper) — theme updates replace image-banner.liquid, and re-applying from notes takes three minutes.

Which Method Should You Use?

Use Method 1 when: you need it live in ten minutes, you’re not comfortable in code files, it’s a temporary campaign banner, or your theme’s update cycle makes file edits annoying to maintain.

Use Method 2 when: this is your permanent homepage architecture (it almost always is), you care about mobile speed (you should — the banner is typically the largest element your Largest Contentful Paint metric measures), or you’re building stores for clients.

A perfectly sensible path: ship Method 1 today, schedule Method 2 for your next quiet afternoon, and delete the duplicate section when the pro version is live.

Recommended Banner Sizes for Desktop and Mobile

Both files: compress to WebP or quality-85 JPG, ideally under ~400–500 KB. The CDN handles responsive scaling; your job is a clean, reasonably sized source.

Design Best Practices for Mobile Banners

Recompose, don’t just crop. The mobile version should be designed for portrait: subject centered or lower-third, generous headroom for text. A lazy center-crop of the desktop file usually beheads something important.

Respect the text overlay. If your section places heading and button over the image, keep the image’s center calm — busy textures behind text kill readability, especially at mobile sizes.

Same message, both devices. Different compositions, identical offer. A visitor who saw your desktop banner at work should recognize it instantly on their phone at home.

Test with real thumbs. Check the button’s tap target on an actual phone, and make sure the banner doesn’t push all products below the fold — mobile screens are expensive real estate.

Watch your LCP. The banner is almost always your homepage’s Largest Contentful Paint element. Method 2 + compressed sources + the section’s default eager loading for the first section is the fast combination. Run PageSpeed Insights on mobile before and after.

One hero, not a stack. Resist stacking multiple full-height banners on mobile — one strong hero, then products. Scroll depth is a budget.

Common Mistakes to Avoid

1. Uploading one compromise image “that sort of works on both.” It works on neither. Two shapes, two files — that’s the whole premise.
2. Using Method 1 and forgetting the performance cost. Hidden-by-CSS images can still download. Fine temporarily; not fine as your permanent LCP strategy.
3. Retyping Dawn’s original image_tag line in Method 2. The original tag carries carefully tuned srcset/sizes/loading attributes. Wrap it; don’t rewrite it.
4. Mismatched breakpoints. Dawn’s mobile breakpoint is 750px. If your CSS says 749/750 but your picture source says 767, there’s a window where devices get the wrong image. Use 749px max-width everywhere, as in this guide.
5. Editing the live theme. One malformed schema comma takes the section down. Duplicate first, always.
6. Forgetting the fix after a theme update. Updates replace image-banner.liquid. The “my mobile banner disappeared” mystery is almost always this. Keep your two snippets saved.

Troubleshooting

The mobile image never shows (Method 2). Three checks in order: the Mobile image is actually selected in the section’s settings; you’re testing under 750px viewport width (use a real phone or devtools device mode — simply shrinking a desktop window works too); and the <source> sits inside the <picture> and above the fallback image tag.

Both images show at once. The <picture> wrapper isn’t wrapping — the source and the image tag ended up as siblings outside a shared <picture> element, or a stray closing tag split them. Re-check the structure against Step 2.

Method 1 hides both banners (or neither). The CSS class doesn’t match your section’s wrapper. Inspect the section in your browser’s devtools and swap .banner for the actual class (e.g., .slideshow for slideshow sections). Also confirm each snippet went into its own section’s Custom CSS field, not both into one.

The editor won’t save my schema (Method 2). JSON comma error — the classic. Every entry except the last in the settings array needs a trailing comma; none after the last.

The mobile image is blurry. Your source file is smaller than the srcset requests. Upload at 1080px+ wide; the CDN can scale down but can’t invent pixels scaling up.

Text overlay sits badly on the mobile image. That’s a composition issue, not a code issue — re-crop the mobile asset with calmer space where the theme places text, or adjust the section’s content position settings for mobile.

My changes vanished after updating the theme. Theme updates replace section files. Re-apply your saved schema entry and picture wrapper — three minutes with your notes, an afternoon without them.

FAQ

1. Can I show a different banner image on mobile in Shopify without an app? Yes — two free ways: duplicate the banner section and hide each copy per device with the section’s Custom CSS field, or add a mobile image picker to the section’s code and serve it via the HTML picture element. This guide covers both.

2. Does Dawn have a built-in mobile banner image setting? No. Dawn’s Image Banner accepts one image (two for the split layout), with no per-device option — which is exactly why this customization is so commonly needed.

3. Which method is better — two sections or the picture element? The picture element (Method 2). It’s one section to maintain and each device downloads only its own image. The two-section trick is a fine 10-minute stopgap, but hidden images can still download, costing mobile speed.

4. What size should my mobile banner be? 1080 × 1350 px (4:5 portrait) suits most stores; 1080 × 1920 (9:16) if your hero fills the whole screen. Desktop: 1920–3840px wide at 16:9 to 3:1. Compress both to well under 500 KB.

5. Will serving two images slow my store down? With the picture element, no — each visitor downloads exactly one image, correctly sized via srcset. It’s the same-or-better performance than a single image, because phones stop downloading desktop-sized files.

6. What breakpoint does Shopify use for mobile? Dawn and its family switch layouts at 750px. This guide uses max-width 749px for mobile consistently across both methods — keep any custom breakpoints matched to avoid gaps.

7. Does this work for the Slideshow section too? Yes, both methods adapt: Method 1 works as-is (swap the CSS class for .slideshow), and Method 2’s pattern — a mobile image picker per slide block plus a picture wrapper — applies to slideshow.liquid with the same logic per block.

8. Will this work on themes other than Dawn? The concepts work everywhere. Method 1 needs a theme with per-section Custom CSS (most current themes). Method 2 needs you to locate the theme’s banner section file and its image render — same edit, different file names.

9. Why not just use CSS background images with media queries? You lose Shopify’s responsive srcset, lazy-loading, and the theme editor’s image picker, and background images are worse for LCP and accessibility. The picture element is the standard built for exactly this “art direction” problem.

10. Can I show different headings or buttons on mobile too? Method 1 gives you that for free — the two sections can differ in any setting, not just the image. With Method 2, text stays shared; combine it with Method 1’s CSS trick on a second section if you truly need different mobile copy.

11. Does Google care which method I use? Google cares about the outcomes: mobile LCP and CLS. Method 2 helps both (right-sized single download, explicit dimensions preventing layout shift). Method 2 is the SEO-friendly answer.

12. My banner is my slowest element — will this fix my speed score? It’s one of the biggest levers: a phone downloading a 300 KB portrait image instead of a 1.5 MB desktop panorama transforms mobile LCP. Pair it with compression and you’ll see it in PageSpeed.

13. Will the customization survive theme updates? Method 1 (settings + Custom CSS) survives. Method 2’s file edits get replaced by updates — keep the schema entry and picture wrapper saved, and re-apply in minutes.

14. Should the mobile and desktop banners show the same campaign? Yes — same product, same offer, different composition. Cross-device recognition matters; visitors often see your desktop site at work and return on their phone.

Conclusion

A banner that’s stunning on desktop and broken on mobile isn’t a design problem — it’s a geometry problem, and geometry doesn’t negotiate. Wide frames and tall frames need their own compositions, and now your Shopify store can serve both.

To recap: prepare two assets (wide 1920px+ for desktop, portrait 1080 × 1350 for mobile, both compressed hard). For a ten-minute fix, run two banner sections hidden per device with each section’s Custom CSS. For the permanent, performance-correct setup, add a Mobile image picker to image-banner.liquid‘s schema and wrap the banner image in a <picture> element — each device then downloads exactly one right-sized image, your mobile LCP thanks you, and the theme editor gains a setting Dawn should have shipped with.

No app, no subscription — just two images doing the jobs they were composed for.

For more upgrades like this, the resources below are your next step.

Keep Learning and Get Help

Prefer to follow along on video? Watch the full step-by-step walkthrough of this exact setup here: How To Show Different Banner Images On Desktop & Mobile — and subscribe for more app-free Shopify tutorials: youtube.com/@foysalshopifyexpert

Want it built for you? If you’d rather have an expert set up responsive banners — or handle any Shopify customization, speed optimization, or SEO project — hire me directly on Upwork: My Upwork Profile

Ready-made Shopify sections. I sell polished, plug-and-play Shopify sections — hero sliders and banners with mobile image support built in, plus popups, mega menus, and more — one-time payment, no subscriptions: ecommercethesis.gumroad.com

Learn Shopify professionally. Turn customizations like this into freelancing income with my structured course: Freelancing with Shopify — or browse all courses.

Stuck on a step? Reach me directly on WhatsApp for personal help: wa.me/8801991505652

Happy designing — and enjoy banners that look intentional on every screen.