Showing different image on dekstop and mobile - Dawn Theme

Topic summary

A user seeks help displaying different images on desktop versus mobile for an image banner in the Dawn theme. They provided screenshots showing separate desktop and mobile versions of the same banner, along with a preview link to their Shopify store.

Two solutions were offered:

  1. Custom code the entire section - Build a custom section from scratch that switches images based on device type using media queries

  2. Modify existing section code - Add a mobile image option to the current image banner section

One respondent shared a YouTube tutorial with step-by-step instructions for implementing the modification. The discussion remains technical, focused on theme customization through code rather than built-in Shopify features.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Hello, can somebody help me with changing the image on my image banner for desktop and mobile. I am attaching you picture of the 2 images, one is made for desktop and the other for mobile.

Here is a link to my website: https://khi7hb8zdxva8nji-68850549019.shopifypreview.com

Hello there,

there is two ways to do it,

1: custom code the whole section and change the image with meta quries.

2: second add custom code section to existing one to add option of one more image.

Hi @YordanB ,

You can modify the section to add mobile image option. please refer the below video for step by step instructions.