How do I display a different image banner for mobile vs. desktop? (Dawn Theme)

Store Design
, ,

Topic summary

Goal: Show different banner images on Shopify’s Dawn theme—vertical on mobile, horizontal on desktop. The site currently displays only the mobile image.

Key suggestions:

  • Use Custom CSS with media queries in the Image Banner section to hide one version based on viewport width (e.g., hide on max-width for mobile or min-width for desktop). Media queries let styles change at specific screen sizes.
  • Since Dawn doesn’t natively offer separate image uploads for mobile and desktop, add a new setting to the banner section to upload two images (one for each device type), then use CSS to display the appropriate one.

Notes:

  • One reply assumed newer Dawn might support separate uploads but confirms it does not. A customization to the section schema is required to manage two images cleanly.
  • A service offer was made to implement the change.

Status: No confirmed resolution from the original poster; discussion remains open with two approaches (CSS-only hide/show vs. theme customization + CSS).

Summarized with AI on December 13. AI used: gpt-5.
1

How do I display a different image banner for mobile vs. desktop? (Dawn Theme)

For example, a vertical image for mobile, and a horizontal image for desktop.

mobile:

5-1 copy.jpg
5-1 copy.jpg1000×1300 109 KB

Desktop

Untitled-2 copy.jpg
Untitled-2 copy.jpg851×315 35.9 KB

Here is my website (currently only displaying the image made for mobile): https://move-pad.com/

Thank you so much for your help.

1 Like
2

Themes > Customise > Click on Image Banner section to open settings > Click Custom CSS and select the following code for the image

to show on desktop only:

@media screen and (max-width: 750px) {
  .banner, slideshow-component {
    display: none;
  }
}

to show on mobile only

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

Hello @valkyriebg ,

I thought with Dawn updated version option to upload different images for mobile and desktop is available but it’s not.

btw yes it’s possible but not only with css.

First we need to create an option in the section so the admin can upload different image for mobile.

Once the above part is done then we can use custom css to show different videos based on the mobile and desktop.

Problem solved don’t forget to Like it and Mark it as Solution!
If you need help to implement it you can contact me for services

You can find the email in the signature below.

Regards
Guleria