Brine - Products:Gallery - Moving Alternative Images/Thumbnails to the right of the Main Image

Hello - I would love to have the Thumbnails (alternative images) on all my product pages to appear on the side of the Main product image (screenshot example attached). They are currently on the bottom, and will not be visible on many screens unless you scroll down. Let me know if anyone has a CSS code to make this happen?

Also, is there a code I could add so that clicking on the left or right side of the Main image would show the next/previous image?

Thanks so much!

Hi @nycmonkey. Yes, moving the thumbnails is doable. Give this a shot, inserted via the CSS Editor:

.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%;
}

As for next/previous indicators, that'll take some custom development work. Nothing a dev. couldn't do for you short of a couple hours. Alternatively you can make Squarespace galleries swipeable. It wouldn't have indicators or be clickable on desktop, but if most of your users are on mobile, that might not be a big deal.

Note that white space will be created below the main image with the thumbnail strip height exceeds it. With a bit more work, it'd be possible to match the height of the thumbnail strip to that of the main image, and make the strip scrollable, thereby removing the gap when there are a lot of thumbnails

Hope that helps.

-Brandon

Hi Brandon,

Wondering if you knew how to do the same thing for a Slideshow Gallery?  Am using a Brine template.

Thanks in advance,

Jo