How to add thumbnails to carousel product gallery (but how to wrap thumbails into two lines?)

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?

Thank you

Thanks for this! I wonder how I would do the same thing but for regular image galleries rather than product galleries? I guess replace ".ProductItem-gallery" with something else like ".image-gallery" or ".sqs-gallery-design-strip"?

3 hours ago, TheDetourEffect said:

Thanks for this! I wonder how I would do the same thing but for regular image galleries rather than product galleries? I guess replace ".ProductItem-gallery" with something else like ".image-gallery" or ".sqs-gallery-design-strip"?

Can you share link to page where you added regular gallries?

51 minutes ago, tuanphan said:

Can you share link to page where you added regular gallries?

Here's one page where I have a bunch of slideshow galleries: https://thedetoureffect.com/blog/grand-canyon-trip-planning

I would prefer all those slideshows to be carousel-style instead, but I haven't made them into carousels yet because then they wouldn't have thumbnails or titles.

On 4/1/2020 at 3:51 PM, blazingstar said:

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?

 

Thank you

Hi

I wonder if someone can help me with this one. I've tried the code, but it didn't work for me. 

I'm using version 7.1

Any help will be greatly appreciated. :) 

Thanks 

On 3/18/2022 at 7:27 PM, IAA said:

Hi

I wonder if someone can help me with this one. I've tried the code, but it didn't work for me. 

I'm using version 7.1

Any help will be greatly appreciated. :) 

Thanks 

 

Can you share link to a product?

On 3/21/2022 at 7:12 AM, tuanphan said:

Can you share link to a product?

Hi Tuanphan, 

Sorry, I missed this message. 

https://iheartpapercuts.squarespace.com/

Password: Tuesday12. 

Also, do you also have a code for moving to the main nav to the left hand side of the page? Like this"

Thank you very much for your help. 

Ify 

On 3/28/2022 at 5:29 PM, IAA said:

Hi Tuanphan, 

Sorry, I missed this message. 

https://iheartpapercuts.squarespace.com/

Password: Tuesday12. 

Also, do you also have a code for moving to the main nav to the left hand side of the page? Like this"

Thank you very much for your help. 

Ify 

 

https://iheartpapercuts.squarespace.com/shop/p/abc

On 3/30/2022 at 5:50 AM, IAA said:

https://iheartpapercuts.squarespace.com/shop/p/abc

Hi,

#1. You want thumbnails appear in 2 lines?

#2. No idea to this. I remember there is a course on how to do this

On 3/31/2022 at 8:09 AM, tuanphan said:

Hi,

#1. You want thumbnails appear in 2 lines?

#2. No idea to this. I remember there is a course on how to do this

One line please.

@IAA Did you find a resolution for this? I just made the move from 7 to 7.1 and it would be great to still see the thumbnails... Thanks!