Align Product Image Thumbnails To Left Of Main Image - Dawn Theme (Desktop Only)

[kazan_mila]

Hey! I need a Help! I want to change the position for Thumbnail-Carousel on the Product Page to the left side and I use Dawn Theme. Have anybody Idees or code for this solution?

Ideally looking to implement this in desktop only as the mobile default works fine.

[AvadaCommerce]

Hi @kazan_mila ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[kazan_mila]

Hi @AvadaCommerce ,

thank you so much for your Message!

https://bs-dev-ruzana-test.myshopify.com/
Password: ninied

[AvadaCommerce]

Hi @kazan_mila ,

I checked and found that. Your current thumbnail is using slider. Your slider is currently horizontal. Now if you want to change it to vertical, you can't use css. In this part you can hire a shopify expert to assist you.

Thanks

[kazan_mila]

@AvadaCommerce 
when I switch off the slider for thumbnail, can I change this with css? Can you please check one more again, ich delete the slider

[AvadaCommerce · Accepted solution]

Hi @kazan_mila ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste 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%;
	}
}
 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[thegoodcomfy]

It totally worked for me! 

However, the items are not "contained" in a wrapper so when there are more than 5 images, they just extend the thumbnails instead of having an arrow/button to show more if required. 

Would really be useful to know if there's any extra code for that.

Thanks for your help already.

[AvadaCommerce]

Hi @thegoodcomfy 

This part it custom request. You can hire a shopify expert for help

Thanks you

[fallonr]

I used this code in my base.css file, however the thumbnails now only show vertically under the main image, not on the left - is there something I can add to move the thumbnails to the left of the main gallery viewer?

[limelight91]

@AvadaCommerce  I also would like help with this question. I am seeing this when i use your code.

[vivekraghav]

I tried to use your code but it is not working 
Currently I am using dawn theme version 8.0 
just let me know how can i change the position of product thumbnail from bottom to left 

[RyanNicko]

Hey, I've tried this code the images appear below the main image. Any idea why?

[UandF]

Could you use the same solution for the refresh theme?

[BelgiumBaitShop]

Your code worked for me! Only thing dad did not move was the carrousel if there are more than 3 images. So now there is a whole list of images without an option to 'scroll' trough them. What needs to be added to make this possible and have max 4 images on the left and arrows to scroll trough the image list? 

Thanks in advance! Looking forward to your suggestions. 

[Sixpieces]

@AvadaCommerce @AVADA This didn't work for me, I added the code to the mentioned file and it did nothing to the position of the thumbnail images, could you help out?

[ewancastle]

This worked for me but worth noting it only worked when I switched the setting from thumbnails to thumbnails carousel. Dawn Theme 15.0.0

[Rookie16]

Hi @kazan_mila Kazan_mila,  I saw your new test website, it seems that the vertical thumbnails are going well, could you pls kindly give hint for how to achieve it ?

[D666]

I'd also love to know.

[jemar_ogg2024]

Is it possible in Palo Alto Theme? I also want to achieve this one on Palo Alto them but I cannot achieve it even using custom something. May I know if you can help me?

[MRamzan]

Move small images of thumbnails to left: