Jump to content

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

Recommended Posts

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!

brine_productpage.jpg

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

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

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

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.