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

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

AngelCompany1
Excursionist
22 1 4

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

Replies 21 (21)

AngelCompany1
Excursionist
22 1 4
KetanKumar
Shopify Partner
36932 3642 11997

@AngelCompany1 

yes you can just flow step

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AngelCompany1
Excursionist
22 1 4

Hello, what does this mean sorry?

KetanKumar
Shopify Partner
36932 3642 11997

i mean did you check your theme setting

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AngelCompany1
Excursionist
22 1 4

Yes see attached screen shots - the multi device option is now there but then its just white boxesScreenshot 2022-07-05 at 16.39.43.pngScreenshot 2022-07-05 at 16.40.03.pngScreenshot 2022-07-05 at 16.40.22.pngScreenshot 2022-07-05 at 16.39.43.png

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
Shopify Partner
9564 1195 1536

@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.

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
AngelCompany1
Excursionist
22 1 4

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

 

Screenshot 2022-07-05 at 17.26.23.png

AngelCompany1
Excursionist
22 1 4

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.

Screenshot 2022-07-05 at 17.28.39.pngScreenshot 2022-07-05 at 17.29.02.png

suyash1
Shopify Partner
9564 1195 1536

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

suyash1_0-1657039050391.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
AngelCompany1
Excursionist
22 1 4

😰

KetanKumar
Shopify Partner
36932 3642 11997

@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
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

made4Uo
Shopify Partner
3840 716 1177

Hi @AngelCompany1,

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
AngelCompany1
Excursionist
22 1 4

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
Excursionist
22 1 4

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 Screenshot 2022-07-06 at 09.05.56.pngScreenshot 2022-07-06 at 09.06.10.png

Tyvizzle
Visitor
1 0 0

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
Tourist
21 0 2

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

LitCommerce
Astronaut
2860 684 745

Hi @AngelCompany1,

Have you tried the slider library?

Screenshot.png

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
AngelCompany1
Excursionist
22 1 4

Hello,

Im not sure what you mean,

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

AngelCompany1
Excursionist
22 1 4

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

LitCommerce
Astronaut
2860 684 745

Hi @AngelCompany1,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

gr_trading
Shopify Partner
1843 145 193

@AngelCompany1 ,

 

if still need help in implementing the same.

 

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee