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

Store Design
,
1

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

2

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

3

Hello @Dawood_Mirza_1 , this changed nothing.

4

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

5

@Dawood_Mirza_1 this also didn’t change anything. I will email you the URL.

6

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

7

Hi @Dawood_Mirza_1 ,

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 looks now.png2352Ă—1528 330 KB

how it should look like.jpg
how it should look like.jpg842Ă—595 51.6 KB

8

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

:slightly_smiling_face:

9

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

10

Not working for me, nothing happens.

11

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.

12

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?

Screenshot 2024-10-27 at 4.51.26 PM.png
Screenshot 2024-10-27 at 4.51.26 PM.png2524Ă—2038 356 KB

13

Show thumbnail images vertically:

14 
@media only screen and (min-width:900px) { 
  .product--small .thumbnail-list.slider--tablet-up li.thumbnail-list__item.slider__slide {
    transform: rotate(-90deg);
    width: calc(20% - .8rem);
  }
  .grid__item.product__media-wrapper slider-component.thumbnail-slider {
    position: absolute;
    top: 0;
    transform: rotate(90deg);
    width: 602px; /* manage width of small image */
    left: 0;
    transform-origin: left top;
    height: 100px;
    overflow: hidden;
  }
  .grid__item.product__media-wrapper {
    position: relative;
    padding-left: 100px;
  }
  .thumbnail-list.slider--tablet-up li.thumbnail-list__item.slider__slide {
    transform: rotate(-90deg);
    width: calc(16.8% - .8rem); /* decrease percentage and it will increase items */
  }
}