How to get different images for slideshow for Mobile and Desktop - Brooklyn theme?

Solved
Claes
Tourist
8 1 5

Im using the Brooklyn theme and I want different images in the slideshow when used on a desktop then when used on a mobile.

Has anybody done this?

And also, what is the best size for full width images for viewing on computers?

Any help really appreciated.

Thanks. 

dmwwebartisan
Shopify Partner
7298 1723 2298

 @Claes 

Unfortunately, there is no simple solution for this. It would need customization to implement this feature.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Claes
Tourist
8 1 5

Hi and thanks.

Yes I realize that, I have to change the code in the slideshow.liqid.

I have added this to my theme file.

@media screen and (min-width: 769px) {.desktop-hide { display: none;}}
@media screen and (max-width: 768px) {.mobile-hide {display: none;}}

But what part of the slideshow file is actually getting the images?

 

dmwwebartisan
Shopify Partner
7298 1723 2298

@Claes 

@media screen and (min-width: 769px) {.desktop-hide { display: none;}}
@media screen and (max-width: 768px) {.mobile-hide {display: none;}}

This code is just to enable and disable slideshow on mobile and desktop. This is not for retrieving or displaying images.

This is just CSS code.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Claes
Tourist
8 1 5

Yes I know

I will use it to hide desktop code when on mobile and the reverse when on desktop.

0 Likes
Claes
Tourist
8 1 5

Nobody that has done this before?

0 Likes
Claes
Tourist
8 1 5

This is an accepted solution.

SOLVED. Ok so I solved it so now I have different slideshows based on if it is on desktop or mobile.

For anybody else who wants to do the same I followed this guide.

https://help.groupthought.com/article/350-slideshow-custom-mobile-only-slideshow

0 Likes