I’m working on customizing my Shopify store’s theme and running into an issue with the slideshow section. Right now the theme only lets me upload one image that automatically resizes for both desktop and mobile devices. This doesn’t look great because the same image doesn’t work well on both screen sizes.
What I really need is to have different images - one optimized for desktop viewing and another one specifically designed for mobile phones. The desktop version should be wider and the mobile version should be taller to fit phone screens properly.
I’ve been looking through the theme settings but can’t find an option to upload separate images for different devices. Has anyone figured out how to modify the slideshow code to support different images based on screen size? I’m comfortable making small code changes if needed.
just grab smart banner or a similar app from the shopify app store. they handle device detection automatically & let u upload separate images without messing up ur theme with custom code.
I had good luck using Dawn theme’s responsive image setup as a starting point. Most modern themes already support srcset, but you’ll need to tweak the image rendering in your slideshow section. Find the image_url filter in your slideshow template and swap it out for responsive image tags that pull both desktop and mobile versions. You’ll also need to add extra image upload fields in the schema section at the bottom of your slideshow file. The trick is making sure the mobile image loads first on smaller screens - way better for performance. This beats using CSS to hide/show images since that causes annoying layout shifts when the page loads.
skip the coding - check ur theme’s responsive image settings first. a lot of newer themes bury this in advanced options. if yours doesn’t have it, use the picture element with srcset instead of media queries. it’s faster since it only loads the right image size.