Debut theme - clickable mobile and desktop slider images

[Theyellowgypsy]

How can I add different images sizes for mobile and desktop on slider widget which is clickable on both devices(same link). Currently I was able to make the banner clickable and remove image layover text, but I am not able to put different images for different screen size. The images are optimised for desktop and looks odd on mobile devices.

Please help.

Thanks in advance

Here is the link to my page - www.theyellowgypsy.com

[Elias]

Hey, @Theyellowgypsy.

Thank you for reaching out and posting this question!

I understand you're looking to add different image sizes for mobile and desktop. While adding different image sizes for mobile and desktop isn't supported by our design policy, as this is a feature built-in for Shopify themes to support responsive image. Responsive images are images that respond to the size of screen on which they’re being displayed. So, your high resolution images will be just right regardless of the device. However, to help you with selecting the images to work with this feature, we've got some best practices for slideshows, image banners, and hero images. 

That being said, if adding different image sizes for mobile and desktop is something that you must have, then we'd recommend hiring a developer to help you with this. If you need help finding a developer, then we'd recommend finding one on Shopify Experts. Shopify Experts is our directory of certified developers and many have experience working with custom coding - they'll be able to create a solution for your store. 

I've also taken a look at your website and I think your shop looks amazing! Would removing the "Powered by Shopify" message from the footer be something that interests you?

[Theyellowgypsy]

HI @Elias 

Thank you for the response. How can I make responsive images. Is there a specific image size that I should upload in the slider widget to make it responsive? Because currently the images are not being resized according to the device. When I upload a thin-wide image for desktop, it looks very small on mobile and vice versa. 

Maybe I did not get you properly. Can you please explain?

Thanks

[Elias]

Hi, @Theyellowgypsy.

Thank you for following up!

The responsive images is automatically enabled by the theme. However, since the hero image for the Debut theme is the Image with text overlay section, it looks like the responsive image is only through the Image with text overlay section as opposed to the Slideshow section. 

Here's an example of the Image with text overlay section from my test store (Debut):

Here's an example of Slideshow section from my test store (Debut):

If you need the responsive images for the Slideshow section, then I'd recommend trying a different theme with responsive design. Then, using the suggestions from our best practices for slideshows, image banners, and hero images, to help with selecting the various image sizes that you have prepared. 

Did you get a chance to try the Dawn or Brooklyn theme?