Different Slideshow images for Mobile and Desktop (Dawn theme)

Store Design
1

I want to show different Slideshow images to mobile users and desktop users. i.e. Image A + Image B for mobile users, while Image C + Image D for desktop users. Can anyone help me on this?

2

Hi @ChloeL

This is Victor from PageFly - Shopify Page Builder App

Yes that is possible, but the first thing I need you to do is setup 4 images to your slideshow first
Setup A - B - C - D for the slideshow, then I will help you to hide images depending on the devices.

Please let me know once you have done that
If not the other way for you is to duplicate the slideshow then hide one for desktop that is for mobile
And hide on mobile, that is for the desktop version

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

The 2nd way you mentioned - “duplicate the slideshow then hide one for desktop that is for mobile And hide on mobile, that is for the desktop version”, how can I do that?

I can’t find any device option in the setting.

4

You can create the slideshow and build with like this :

PageFlyVictor_2-1672803870046.png
PageFlyVictor_2-1672803870046.png1486Ă—576 75.7 KB

After that, i will send you the code to hide it for a specific device

5

Yes I have done it. May I have the code?

6

Yes of course, can you send me the page URL first?

I need to get the exact selector to give the proper solution for you. Thank you
Remember to save the page for the slideshow show on the page

7

Can I show one of the slideshow sections only? Otherwise it looks weird to show 2 slideshow sections on the website. Thank you so much for your help.

URL: https://petitespaws.com/

8

@ChloeL Please let me know when you available to show 2 slideshow section, because if you don’t show it, i cannot give you a proper code to customize it

It will just show about 5mins to get it done.

9

I see. I have updated the website and you can see two slideshow sections now. Thank you so much.

URL: https://petitespaws.com/

10

@PageFly-Victor

I see. I have updated the website and you can see two slideshow sections now. The top one is for desktop and the second one is for mobile. Thank you so much.

URL: https://petitespaws.com/

11

@PageFly-Victor Both 2 slideshow sessions are displayed now. Can you please just give me the code?

12

Did you solve your problem ?

13

Hey, did the following;

  1. Created two slideshow as mentioned

  2. Added images as img a, img b for desktop in top slideshow and

  3. images img c, img d for mobile in second slideshow.

Now, how to give desktop–device and mobile–device to those slideshows respectively?

In order for the css to work ( .desktop–device{display: none;} for media query < 768 and .mobile–device{display: none;} for media query > 768})??
please guide!