Vertical product thumnails

Orange Gorilla
40 Posts
Orange Gorilla posted this 4 weeks ago

Hi,

Is there a possibility to show the product thumbnails on a product detail page vertically?

Like this:

enter image description here

Hi, Is there a possibility to show the product thumbnails on a product detail page vertically? Like this: ![enter image description here][1] [1]: https://www.prestashop.com/forums/uploads/monthly_2018_01/2018-01-25_17-26-28.jpg.426866c1f2be809ecc41dd14f12b3935.jpg
Vote to pay developers attention to this features or issue.
5 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 3 weeks ago

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

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
Orange Gorilla
40 Posts
Orange Gorilla posted this 3 weeks ago

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.

enter image description here

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. ![enter image description here][1] [1]: https://www.glorioushome.nl/wp-content/uploads/2021/06/Schermafbeelding-2021-06-04-om-10.24.13.png
Support Team
Support Team posted this 3 weeks ago

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

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
Orange Gorilla
40 Posts
Orange Gorilla posted this 3 weeks ago

Hi,

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

kind regards,

Hi, Link to productpage: https://www.glorioushome.nl/product/toef-hanger-groot/ kind regards,
Support Team
Support Team posted this 4 weeks ago

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

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
You must log in or register to leave comments