Site URL: https://www.blazingstargardens.com/
Hi all,
I have one solution and one question that I'd like to share:
First, I was looking for a way to add thumbnails below the "Design: Carousel" Product Item image gallery, like the way thumbnails display below the "Design: Slideshow" Product Item image gallery. The carousel design is preferable because it doesn't crop the images to vertical or horizontal like the slideshow design (it leaves them in their original landscape or portrait configuration). The slideshow design is nice because it display thumbnails for easier navigation to interesting product pictures. I thought it would be nice to have the Thumbnail gallery available on the Carousel product item image gallery design.
This is the how I added thumbnails beneath the carousel design (added in Design>Custom CSS). (Caution: I am not a coder and and do not know much about css. I found some css code that @tuanphan shared for adding thumbnails to mobile screens and edited it until it worked. This might not be a good thing to do. @tuanphan if this is wrong, please let me know).
I inserted this code into the Design>Custom CSS page:
.ProductItem-gallery-thumbnails {
display: flex;
}
.ProductItem-gallery {
flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
width: 100%;
}
Second, I noticed that on some of my product pages (such as https://www.blazingstargardens.com/plants/butterfly-milkweed-asclepias-tuberosa) I have too many images (sometimes 10 or 11, I should probably just thin them...) and the thumbnails get cut off at 7 or 8 thumbnails and there is no way to see the rest of the thumbnails. You can see all thumbnails when the Gallery Thumbnail Placement is to the Side, but I prefer them Below. Is there a way to wrap the thumbnails into two lines below the main image?
blazingstar got a reaction from kindandbrave in How to add thumbnails to carousel product gallery (but how to wrap thumbails into two lines?)
