I’m working on my Shopify store and running into an issue with the slideshow section. Right now my theme only lets me upload one image that automatically resizes for both desktop and mobile devices. The problem is that when the same image scales down to mobile, it doesn’t look good at all. Some parts get cut off and the text becomes unreadable.
I really need to have two different images - one optimized for desktop screens and another one specifically designed for mobile phones. This way I can make sure both versions look perfect on their respective devices.
Has anyone figured out how to modify the slideshow code to support dual images? I’m not super technical but I can follow instructions if someone can point me in the right direction. Any help would be much appreciated!
I also encountered a similar situation with my Shopify store, and I found a solution that worked well. It involves modifying the slideshow.liquid file directly. You can add an additional image upload section specifically for mobile. Just make sure to adjust the schema to include a mobile image field, and then employ CSS media queries to manage which image is displayed based on the device. By wrapping each image with appropriate classes, I successfully created a responsive slideshow that looks great on both desktop and mobile devices.
check your them’s responsive image settings first - don’t jump straight into coding. newer themes often have this built-in, but its buried in the customizer. look for “mobile image” or “responsive” toggles in your slider settings. could save you from messing with liquid files.
Edit your section’s liquid file and schema. Add a second image field in the schema - call it “mobile_image” or whatever works. Then use CSS media queries in your liquid code to show the right image based on screen width. Set your desktop image to only show above 768px, mobile image below that. I did this exact same thing last year for the same issue. Both images load but only one displays depending on viewport size. Just back up your files first since you’re messing with theme code directly.
Manual coding works, but there’s a smarter way. I hit this same issue across multiple client stores - modifying liquid files every single time gets old fast.
Now I just automate the whole thing externally. I use Latenode to detect device type and serve the right image version automatically. Zero theme modifications.
Here’s how: upload your desktop and mobile images to storage, then Latenode handles detection and delivery based on screen size or user agent. Survives theme updates too - you won’t lose everything when Shopify pushes changes.
Running this on 15+ stores now. Bulletproof. Way cleaner than hardcoding media queries into theme files.