How to create a scrollable div for an image gallery with overflow in Shopify

Other Questions Shopify
1

I’m developing a product page that features an image gallery. On one side, I have small thumbnail images stacked vertically, and on the other side, I display a larger version of the selected thumbnail.

The issue I’m facing is that as I add more thumbnails, the page gets excessively long, causing users to scroll way down. I want to set a fixed height for the area containing the thumbnails so that it becomes scrollable instead of extending the page further.

My goal is to adjust the CSS so the height of this thumbnail container aligns with the height of the large image area. This way, once the number of thumbnails exceeds that height, users can scroll through them easily.

Here’s a simple layout I’m aiming for:

.gallery-wrapper {
  display: flex;
  max-height: 600px;
}

.thumbnail-area {
  width: 120px;
  overflow-y: auto;
  padding-right: 10px;
}

.large-image-area {
  flex: 1;
  height: fit-content;
}

I am utilizing a custom Shopify theme and have a bit of experience with HTML and CSS. Any tips on how to effectively set this up would be greatly appreciated, especially since the large image size adjusts based on the screen dimensions.

2

looks good but add max-height: 600px; to your .thumbnail-area to match the wrapper. also throw in scroll-behavior: smooth; - makes scrolling through thumbnails way nicer. works great on mobile too