Hi,
I’m looking to change the defeault mobile image slider for Brooklyn theme to feature the image preview thumbnail squares as it appears on desktop, just to encourage customers to keep swiping if they see a preview of some content they’re interested in.
I will provide screenshots below. - https://lavishlab.co.uk/products/lavishlab-facial-toning-device
Whilst I’m working on this, I’d also like to find out how to move these thumbnail previews to appear down the left side of the product image to improve UX. I’d only like this to be the case on desktop and keep the mobile thumbnails below the main product image. Here’s an example.
Hi @SlickTok ,
Go to Assets > timber.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 590px) {
.product-single__thumbnails.small--hide {
display: block !important;
}
.product-single__thumbnails.small--hide .product-single__media-wrapper {
width: 20% !important;
}
.product-single__media-group-wrapper .slick__controls {
display: none !important;
}
}
Hope it helps!
HI,
This doesn’t seem to have worked unfortunately.
Hi @SlickTok ,
Can you try re-adding the code? I will help you to test it, because I added it and it shows fine.
Sorry! That was an error on my part. This has worked a treat, thank you. Although, it does allow you to swipe along to the next image, selecting one of the image thumbnails manually doesn’t seem to work. Is there a solution to this?
Hi @SlickTok ,
Yes, because it will need many steps and complicated requirements if you want a thumbnail image with slider. So if you want this you can just hire experts for it, they will change the slider JS structure, add CSS code and change Liquid.
Hope it is clear to you.
