HELP! DIFFERENT IMAGE FOR MOBILE & DESKTOP - SLIDESHOW - DEBUT THEME

[AngelCompany1]

Hello,

I followed this tutorial 

https://originateweb.com/add-different-slideshow-for-mobile/

and used this code

https://gist.github.com/shopifydeveloper/09cf23772177620411ef149c556e735f

I now have the option to add two different images but when I preview the website they are just white with no image?
Please can someone help urgently??

This is the preview website

https://du3kcvlthgrwhazk-53389099201.shopifypreview.com

Im desperate to have this fixed - thank you

[AngelCompany1]

@KetanKumar @LitCommerce @made4Uo @oscprofessional @WoodyDev 

Please can anyone help me

@suyash1 @MarinaPetrovic @Deoxes @diego_ezfy @DavidEKim 

[KetanKumar]

@AngelCompany1 

yes you can just flow step

[AngelCompany1]

Hello, what does this mean sorry?

[KetanKumar]

i mean did you check your theme setting

[AngelCompany1]

Yes see attached screen shots - the multi device option is now there but then its just white boxes

We've been trying to get a different image on slideshows for desktop and mobile for months, even paying shopify experts and developers on fiver and no-one is helping us. This is really causing us issues now and all we was is the mobile for mobile and desktop banners. The code above has given us the option - see attached, but then nothing shows at all on the website.. see second screen shot

[suyash1]

@AngelCompany1 - I recommend to add both image desktop and mobile on page and then using css we hide the unwanted image as per the view, this will need knowledge of css for you in future but quite easy than having complex coding.

I can help with that.

[AngelCompany1]

Hello, I have done this on the live site using a YX mob and desktop image banner and then hiding them.. but the problem is these sections don't have clickable links, CTAS or allow multiple slideshow. So I can only use it as a header banner at the top which you don't need to click.

This is what we have been using as a work around until we get help with a code which allows slideshow for mob and desktop

please see our live site

https://angelcompany.co.uk

[AngelCompany1]

You will see if you view in mobile and desktop..

In desktop the slideshow looks fine (new arrivals banner) however in mobile version it looks horrendous. A small slim banner with a huge colour block under it and a CTA in there separately.

[suyash1]

@AngelCompany1 - add one more slideshow section with mobile image, we can make css settings to show text button like in screenshot

[AngelCompany1]

😰

[KetanKumar]

@AngelCompany1 

oh sorry 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[made4Uo]

Hi @AngelCompany1,

I have a video where you can use a slideshow specifically for mobile only. Please follow the instructions. 

[AngelCompany1]

I don't think this will help me though as I need it to be a different size? I don't want to use the desktop image for mobile as it doesn't display correctly. It needs to be a more square banner as opposed to landscape. The CTA also doesn't sit right on mobile and appeared under. If you look at Solado.com they are able to load different images for desktop and mobile which is what we want.

You can also see on Solado the banner are clickable without needing a CTA - so the CTA can just be put on the design. Thank you

[AngelCompany1]

On this site we thought we had fixed it

https://du3kcvlthgrwhazk-53389099201.shopifypreview.com

As you can see by the screen shots the options for both a mobile and desktop image is there, but then they are just huge white blocks????
Can someone help us fix this

@made4Uo @suyash1 @KetanKumar 

[Tyvizzle]

This worked perfectly!! Thank you so much. I've had this issue since I made my Shopify. Literally I've been looking for so long for something that would work and this was the easiest and most efficient solution thus far. Keep up the amazing work!

[lightwork]

Thank you so so so much for this it was exactly what i needed!!

[LitCommerce]

Hi @AngelCompany1,

Have you tried the slider library?

Because I can help you to display the image, but the slider is not working now

[AngelCompany1]

Hello,

Im not sure what you mean,

It says that bits for a different theme? None of the area has been working

[AngelCompany1]

Can you send me what website this screen shot is for so I can go onto it? Thank you

[LitCommerce]

Hi @AngelCompany1,

It's the link to the tutorial you sent, refer https://originateweb.com/add-different-slideshow-for-mobile/

[gr_trading]

@AngelCompany1 ,

if still need help in implementing the same.