How to put the thumbnail images on the left side of the main product image of the dawn theme?

[Sixpieces]

How to put the thumbnail images on the left side of the main product image of the dawn theme?

[Dawood_Mirza_]

Hi @Sixpieces,

Go to Online Store>Theme>Edit code.

Search file section-main-product.css and paste the below code at the bottom of the file 

Save

@media(min-width:750px){
.product.product--small.product--right.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet{

flex-direction: row-reverse !important;
    column-gap: 10px !important;
}
}

 Hope to have helped you,

BR 

Dawood Mirza

[Sixpieces]

Hello @Dawood_Mirza_ , this changed nothing.

[Dawood_Mirza_ · Accepted solution]

Search for base.css file and add this a the bottom

@media (min-width: 757px) {


.product--thumbnail_slider .thumbnail-slider {
  align-items: self-start;
}
	 .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: 100%;
	}
	 .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 {
       height: 100%;
    overflow: scroll;
		 padding: 0;
		 display: block;
	}
	 .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
		 width: 100%;
	}
}

remove earlier code

I hope this works 

SHARE YOUR STORE URL if problem occurs

[Sixpieces]

@Dawood_Mirza_ this also didn't change anything. I will email you the URL.

[Sixpieces]

It worked! For other people reading this just make sure to select thumbnail carousel at the product page settings in the theme customizer.

[MCCMtl]

I have no idea where is the option for "thumbnail carousel" i don't see anything related to thumbnails on Dawn. Can you help me please, thank you.

[BeyzaNisa]

Hi @Dawood_Mirza_,

your code worked great for me, thank you! Can you tell me how I can adjust the size and form of the thumbnails? I would like them to be

• at least twice as big as they are displayed now
• a rectangle instead of a square
• and I would like to add space between the thumbnails

Thank you!

[Dawood_Mirza_]

Hi @BeyzaNisa,
I see your store to be pass protected 
Please share Store URL and Password for the changes required.

🙂

[BeyzaNisa]

@Dawood_Mirza_ thank you!! 
www.umewe.eu 
Password: hPow8B3m!-cvklrj

[MCCMtl]

Not working for me, nothing happens.

[egmzem]

hello.  I used the code to move the images to the left, which it did (thank you), but I now have a long list of thumbnails instead of a carousel...  Is there a way to do the carousel like there was when they were at the bottom?

[MRamzan]

Show thumbnail images vertically: