Dawn Theme - How to Use One Image for Desktop and a Different One for Mobile?

Store Design

Topic summary

Goal: show one banner image on desktop and a different one on mobile in the Shopify Dawn theme, switching automatically. The poster tried CSS/media queries but saw issues where both images display or don’t switch correctly.

Suggested solutions:

  • A tutorial video was shared that demonstrates how to set up separate images for desktop and mobile in Dawn (no code included in the thread; video link provided).
  • Another video specifically shows adding theme schema (custom settings) and code to provide separate image fields for mobile and desktop, implying a theme edit rather than only CSS.

Notes:

  • The recommendations rely on external videos; no inline code or screenshots in the thread. The videos are central to implementing the solution.
  • No confirmation that the issue was resolved. The discussion remains open without a verified fix or consensus.
Summarized with AI on December 17. AI used: gpt-5.
1

Hi everyone,

I’m trying to set up an image banner in my store to show one specific image for desktop and a different image for mobile. I want them to switch automatically based on the device.

I’ve tried editing the CSS and adding media queries, but it’s not working as expected—either both images show or they don’t switch correctly.

I’m using the Dawn theme. Is there an easy way to do this?

Any help would be greatly appreciated!

Thank you!

1 Like
2

Hi @JuulLobo

You can check this one.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @JuulLobo ,

Please refer to the below video how you can add image schema for mobile and website and its code.

Hope this will helps…