Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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!


Link to comment

2 answers to this question

Recommended Posts

  • 1

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.


Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...