Make Product thumbnail Carousel appear on left side of main image (Dawn Theme)

[RyanNicko]

@LitCommerce I tried using your code, though the images appeared below the main image, not to the left - any idea how to resolve this issue? please see the image below:

[dmwwebartisan · Accepted solution]

@RyanNicko 

Please share your store URL!

Thanks!

[RyanNicko]

whoops haha: www.fairbump.com

[dmwwebartisan]

@RyanNicko 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste the below code at the bottom of the file:

@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;
	}
	 .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%;
	}
}

Thanks!

[RyanNicko]

Thanks, the carousel is on the side! 😁 THOUGH - How do I make the thumbnails appear rectangle (as per the original image dimensions) ? (not square) and can we make the images align to the top of the main image?

[imirfan121]

Yes you can align your product thumbnail to the top of the main image by adding new value to one class which @dmwwebartisan has already shared with you. find the class .product--thumbnail_slider .thumbnail-slider and add the following value 

align-items: flex-start; to this class and that's it.

[Z18]

Hi, can you please share the code?

i tried to put thumbnails on the left side but i couldnt make it

[imirfan121]

Perfect ! Thanks for sharing. This css code has just work fine in Shopify Dawn theme. 

[iamabeginner]

I tried this code and it worked. But i want only 5 images to display as thumbnails and then there should be arrows for more than 5 images and an arrow for sliding the main product image. Can you please help. 

[ajhawk52]

Did you ever figure out how to add the arrows? I want to add this to my store as well.

Thanks

[Sabrina_MD]

I would need this also.

Hopefully, someone has figured it out and will share the solution with us.

Thanks

[iamabeginner]

after implementing the code given above,

implement the code given in this thread.

https://community.shopify.com/c/shopify-design/add-arrows-to-swipe-between-product-images-next-previ...

[Mkm2021]

many code in this thread which one did u use

[iamabeginner]

I also need the solution for this. If anyone has found it, please help.

[Mkm2021]

how did u fix this one plz ...all my images show on left not only 5

[iamabeginner]

after implementing the code given above, follow this thread below to enable image swipe with buttons on desktop

https://community.shopify.com/c/shopify-design/add-arrows-to-swipe-between-product-images-next-previ...

[ManuelH]

got serious loading issues. Make sure it loads under 2 sec