How can I make the product page thumbnails stacked to the right of the larger image?

I don't see it as an option for the Foster template and I'm hoping someone can help me achieve that with code.

Thanks!

To help us to understand what you need, please provide a working link to one of your product pages and an annotated screenshot showing what you’d like to change. 

I want to put the product gallery/thumbnails in between the large image and the description text block indicated in the screenshot attached.

Thanks for additional information. The mockup gives me a clear idea of what you've asked for. Unfortunately, I think that moving them like this will cause more problems for you than it solves. Sorry.

If you place the thumbnails under the product description you'll have layout problems when the page responds to different devices. Depending on the amount of text and the size of the device, the thumbnails are likely to appear much lower than the main product image (see below):

Before and After:

It may help if you can explain why  you want to reposition the thumbnails. What's driving you towards that as the solution?

For example, is the issue is that the thumbnails appear 'below the fold' and so aren't seen by a percentage of potential customers? That's an issue for a lot of store owners. If that's the case for you, then a better solution may be to show the thumbnails in place of the large image by making it into a slideshow. If this interests you, I have a Squarespace Extension (Product Slideshow) that does this on your template (Brine - Squarespace 7.0). It would then look like this:

If there's another reason or something else you want to try, do let me know.

-Paul

Related Questions with Possible/Related Answers:

• https://forum.squarespace.com/topic/151557-brine-productsgallery-moving-alternative-imagesthumbnails-to-the-right-of-the-main-image/#comment-332321
• https://forum.squarespace.com/topic/8841-feature-req-product-gallery-thumbnail-layout-location/?tab=comments#comment-50080

Other Related Questions:

• https://forum.squarespace.com/topic/1551-moving-product-thumbnails-brine-template/?tab=comments#comment-9130
• https://forum.squarespace.com/topic/151905-slideshow-gallery-moving-thumbnails-to-the-right-of-the-main-image/#comment-333451

Another Possible Answer:

• https://www.sqspthemes.com/blog/vertical-product-thumbnail-gallery

On 1/19/2020 at 9:02 AM, paul2009 said:

Thanks for additional information. The mockup gives me a clear idea of what you've asked for. Unfortunately, I think that moving them like this will cause more problems for you than it solves. Sorry.

If you place the thumbnails under the product description you'll have layout problems when the page responds to different devices. Depending on the amount of text and the size of the device, the thumbnails are likely to appear much lower than the main product image (see below):

Before and After:

       

It may help if you can explain why  you want to reposition the thumbnails. What's driving you towards that as the solution?

For example, is the issue is that the thumbnails appear 'below the fold' and so aren't seen by a percentage of potential customers? That's an issue for a lot of store owners. If that's the case for you, then a better solution may be to show the thumbnails in place of the large image by making it into a slideshow. If this interests you, I have a Squarespace Extension (Product Slideshow) that does this on your template (Brine - Squarespace 7.0). It would then look like this:

If there's another reason or something else you want to try, do let me know.

-Paul

No, I don't want the thumbnails to be below the fold. I want them to be stacked in their own column sandwiched between the large image on the left and the product description on the right 

Quote

.ProductItem-gallery { display: flex; } .ProductItem-gallery-slides { order: 1; width: 100%; height: 100%; margin-left: 4%; } .ProductItem-gallery-thumbnails { margin-left: 0; width: 20%; max-width: 90px; } .ProductItem-gallery-thumbnails-item { margin-left: 0; width: 100%; }

@paul2009 while this works as a first step, I would like to move the thumbnails to the right of the large image. How can I do that?

Also why isn't the thumbnail gallery aligned at the top?

On 1/20/2020 at 12:06 PM, paul2009 said:

In that case, the solution that @brandon offered should be very close to what you need.

I photoshopped a screenshot to show you what I want to achieve, hope it helps. If this (the vertical thumbnail gallery) can be shown on desktop only that'd be ideal, since the default placement is better on tablet/mobile, but I would still like to see if it's possible to turn the thumbnail gallery into a carousel on both views. Thank you!!!

I would like to have this layout too!!