Different images for mobile and desktop

Shopify Discussion

Topic summary

Main issue: Show different banner images on Shopify for desktop and mobile while keeping the banner height set to “Adapt to image” for each.

What’s been tried: Added two images in a single Image banner section and hid one per device. Problem: cannot get both images to use “Adapt to image” correctly because the images have different sizes/aspect ratios.

Requested approach: Use two separate Image banner sections and hide one on desktop and the other on mobile.

Response: One reply apologized and shared an external guide (“Desktop And Mobile Different Image” on mojoin.com) that likely explains how to set distinct images for each device.

Key detail: “Adapt to image” is a banner setting that makes the section height follow the image’s aspect ratio; the challenge is applying this per device when images differ.

Status: No confirmation that the provided guide resolved the issue. No code or theme-specific steps posted. Discussion remains open.

Summarized with AI on February 8. AI used: gpt-5.
1

Hi.

I am looking to add different images for the mobile and desktop version of my website.

I have tried different methods and did not get the result I wanted.

I have tried the method of adding 2 images in a single image banner section and hiding one image for desktop and the other image for mobile.

But, I am not able to get the ‘adapt to image’ as the size for both images as they differ in size.

So, I would like to know if there is a method where I can set 2 different image banner section and hide one of them for desktop and other one for mobile.

Thank You.

1 Like
2

@hnnali1

oh sorry for that issue

Desktop And Mobile Different Image