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.
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;
  }
}