Vertical Thumbnail Carousel Sizing & Tweaks

3 0 0

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, you can see what I mean in the attached screenshot.


Screenshot 2024-05-23 at 09.51.35.png

Replies 0 (0)