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

Solved
Petit_Papa
Excursionist
26 0 9

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.

Petit_Papa_0-1620395688499.png

 

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

pwd: sahtow

 

Many thanks!

 

dmwwebartisan
Shopify Partner
6669 1561 2025

@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!

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
Petit_Papa
Excursionist
26 0 9

Hello!

Almost!

Thanks for this! Although needs tweaking:

Petit_Papa_0-1620397697912.png

 

dmwwebartisan
Shopify Partner
6669 1561 2025

This is an accepted solution.

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;
}   
}
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 →
Petit_Papa
Excursionist
26 0 9

@dmwwebartisanamazing ! Thank you

Petit_Papa
Excursionist
26 0 9

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

0 Likes
dmwwebartisan
Shopify Partner
6669 1561 2025

@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!

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 →
Petit_Papa
Excursionist
26 0 9

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:

Petit_Papa_0-1620899053582.png

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

0 Likes
Petit_Papa
Excursionist
26 0 9

@dmwwebartisanany chance you can help ?

0 Likes