Vertical Thumbnail Carousel Sizing & Tweaks

Store Design

Topic summary

A user is working on implementing a vertical thumbnail carousel for product pages in Shopify’s Dawn theme. They’ve successfully moved the carousel to the left side using custom CSS in base.css.

Remaining Issues:

  • The carousel should be cut off and scrollable at the height of the main product image
  • The main product image needs left/right scroll options to navigate between images

Code Shared:
The user provided CSS that uses flexbox with flex-direction: row-reverse to reposition thumbnails vertically on desktop (min-width: 1024px), setting thumbnail width to 100px with 10px padding.

Status:
The discussion remains open with two responses—one asking if a solution was found, and another offering a YouTube video link as a potential quick solution for displaying thumbnails vertically. No resolution has been confirmed yet.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hey, I’m trying to implement a vertical thumbnail carousel on my product pages using the shopify dawn theme.

I have implemented the following code on my base.css file to move the thumbnail carousel to the left hand side:

/* Change thumbnail on product page to side*/

@media (min-width: 1024px) {
	 .product--thumbnail_slider {
		 position: relative;
	}
	 .product--thumbnail_slider media-gallery {
		 display: flex;
		 flex-direction: row-reverse;
	}
	 .product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
		 width: calc(100% - 100px);
	}
	 .product--thumbnail_slider .thumbnail-slider {
		 width: 100px;
		 padding-right: 10px;
         align-items: flex-start
	}
	 .product--thumbnail_slider .slider-button {
		 display: none !important;
	}
	 .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
		 padding: 0;
		 display: block;
	}
	 .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
		 width: 100%;
	}
}

This was successful however there are two things I want to fix:

  1. Carousel should cut off and be scrollable at the height of the main product image

  2. Main product image should have left / right options to scroll between.

My store is suaveanddebonair.com, you can see what I mean in the attached screenshot.

Screenshot 2024-05-23 at 09.51.35.png
Screenshot 2024-05-23 at 09.51.35.png1650×1434 300 KB

2

did you find any solution ?

3

Quick solution to display thumbnail images vertically: