Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Sixpieces
Shopify Partner
16 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_
Trailblazer
135 18 29

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 12 (12)

Dawood_Mirza_
Trailblazer
135 18 29

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
Shopify Partner
16 0 1

Hello @Dawood_Mirza_ , this changed nothing.

Dawood_Mirza_
Trailblazer
135 18 29

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
Shopify Partner
16 0 1

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

Sixpieces
Shopify Partner
16 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.

MCCMtl
Visitor
2 0 0

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
Visitor
3 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

Dawood_Mirza_
Trailblazer
135 18 29

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

🙂

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

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

MCCMtl
Visitor
2 0 0

Not working for me, nothing happens.

 

egmzem
Shopify Partner
3 0 0

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

MRamzan
Shopify Partner
392 3 36

Show thumbnail images vertically:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112