How To Show All Product Images In A Vertical Way and Keep Zoom On Effect on it in Debut Theme?

Store Design
1

I have been struggling with this problem for a few weeks in a row. I first tried the Dawn theme, but I couldn’t make the zoom on hover. So, I moved to a Debut theme, but now can not make images line up vertically keeping zoom-on hover effect. Thanks

2

Hi @AnnaBeiderman if you need this customization just taken care of professionally contact me, info in my sig.

Are you trying to make all the thumbnails the same size as the featured-image, and or also trying to make each image have it’s own zoom? The latter having each image be zoomable is an advanced customization.

Making the thumbnail images stack vertically instead of be rows should be as simple as finding this line in theme.scss.liquid and changing it’s flex value to 100%:

From

@media only screen and (min-width: 990px)
.product-single__thumbnails-item--medium {
    flex: 0 0 25%;
}

To

@media only screen and (min-width: 990px)
.product-single__thumbnails-item--medium {
    flex: 0 0 100%;
}

Then you’ll probably need to find the logic loop for the thumbnail images in the product template and change the size of images being output for the thumbnails.

You’ll be looking for the following css class to find the image code:

class="product-single__thumbnail-image"
3

Screenshot 2022-09-03 at 00.19.47.png
Screenshot 2022-09-03 at 00.19.47.png1528×805 173 KB

Hello! Thank you for your help! It actually works but still, I would like to have zoom on. Is it possible to make all product images the same as the main image, not a bigger thumbnail? Thank you for your help!

4

@AnnaBeiderman

can you please send your Debut theme url so i will check and let you know

5

Hello! Thank you for your help!

https://girlygirls.store/

password: clache

6

@AnnaBeiderman

yes i have check with its worked

7

Thank you for your time!

8

@AnnaBeiderman

its my pleasure to help us