Solved

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

Sixpieces
Tourist
14 0 1

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

Accepted Solution (1)
Dawood_Mirza_
Explorer
113 16 26

This is an 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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

View solution in original post

Replies 6 (6)

Dawood_Mirza_
Explorer
113 16 26

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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Sixpieces
Tourist
14 0 1

Hello @Dawood_Mirza_ , this changed nothing.

Dawood_Mirza_
Explorer
113 16 26

This is an 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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Sixpieces
Tourist
14 0 1

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

Sixpieces
Tourist
14 0 1

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

BeyzaNisa
Visitor
1 0 0

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!

 

how it looks now.png

 

 

how it should look like.jpg