Brooklyn theme: Changing product thumbnail position from the bottom to the side

[Petit_Papa]

Hello,

Please can someone provide a solution:

I would like to adjust my product thumbnails to appear on the left side of the main product image as opposed to the bottom ( see example below) I’d also like to be able to add the zoom in feature too.

This is the store: https://trendingtopicofficial.com/products/connected-river-chain-earrings

pwd: sahtow

Many thanks!

[dmwwebartisan]

@Petit_Papa

Please add the following code at the bottom of your assets/timber.scss.liquid file.

@media screen and (min-width: 591px){
.product-single__media-group--single-xr .product-single__media-flex-wrapper {
    margin-bottom: 0;
    width: 80% !important;
    float: right !important;
}

.product-single__media-group--single-xr ~ .product-single__thumbnails {
    margin-top: 15px;
    width: max-content !important;
    float: left !important;
    position: absolute !important;
}
.product-single__thumbnails li {
    margin-bottom: 15px;
    width: 150px;
    height: 150px;
    float: initial;
}
.product-single__thumbnails {
    margin-left: -60px;
}   
}

Hope this works.

Thanks!

[Petit_Papa]

Hello!

Almost!

Thanks for this! Although needs tweaking:

[dmwwebartisan]

Remove previous CSS and new this

@media screen and (min-width: 591px){
.product-single__media-group--single-xr .product-single__media-flex-wrapper {
    margin-bottom: 0;
    width: 80% !important;
    float: right !important;
}

.product-single__media-group--single-xr ~ .product-single__thumbnails {
    margin-top: 15px;
    width: max-content !important;
    float: left !important;
    position: absolute !important;
}
.product-single__thumbnails li {
    margin-bottom: 15px;
    width: 150px;
    height: 150px;
    float: initial;
}
.product-single__thumbnails {
    margin-left: -60px;
}   
}

[Petit_Papa]

@dmwwebartisan amazing ! Thank you

[Petit_Papa]

I don’t suppose you know how I can add the zoom feature ?

[dmwwebartisan]

@Petit_Papa

It would need customization to implement this feature.

Unfortunately, there is no simple solution otherwise I will be happy to help you.

Thanks!

[Petit_Papa]

Hello again!

I’ve encountered a bit of an issue and was wondering if you could help; I’m really happy with the new layout of the thumbnails however I noticed when I add extra photos they continued all the way down; here is a zoomed out screenshot to better understand what I mean:

My question is: is there any way to limit the number of thumbnails to only 4 and then have a scroll action added to see the other remaining images ?

something similar to this link: https://www.prettylittlething.com/white-oversized-long-line-shirt.html

[Petit_Papa]

@dmwwebartisan any chance you can help ?

[KhalidMaestro]

Hello dear,
I hope you are doing good.

I made exactly what you mentioned (check screenshot please), but it did not work.

[dmwwebartisan]

@KhalidMaestro

Please share your store URL!

Thanks!

[HarisMemon]

Yes add below in the css of these images’ container

overflow-y: scroll !important;
display: flex !important;

[HarisMemon]

Let me help you out, what’s your store’s password ?