Vertical product thumnails

Hello,

We can try looking for custom CSS code to achieve this.
Could you please provide the link to the product page on your site?

Gina
Themler Support

Hi,

Link to productpage: https://www.glorioushome.nl/product/toef-hanger-groot/

kind regards,

Try adding this code to Themler -> Home -> Settings -> Additional CSS:

.woocommerce div.product div.images, .woocommerce-page div.product div.images {
    float: right;
    width: 68%!important;
}

.bd-imagethumbnails-1 {
    margin-top: 18px!important;;
    float: left !important;
    display: block;
    width: 30%!important;;
}

.flex-control-nav ol > li {
    display: block;
    width: 100% !important;
}

.bd-imagethumbnails-1 .bd-productimage-7 img {
    height: 100% !important;
    display: block;
    clear: both;
    margin-bottom: 20px;
}

.carousel-inner {
    width: 100% !important;
}

Gina
Themler support

Hi,

Thanks. just add this to the additional CSS block. But it dies not work properly.
The main image wil be smaller, position of arrows + mobile version is not that good of course.

I can add some more code to make the thumbnails smaller for the main image to be a bit bigger but it won't be as big as it is in the standard layout since, while using CSS only, it is possible to move those thumbnails to the same place where the main image it, forcing it to become smaller.

It is possible to hide left/right arrows, I don't think I will be able to make them up/down instead.

Gina
Themler support