Solved

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

kazan_mila
Shopify Partner
18 0 2

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.Bildschirmfoto 2022-02-19 um 12.16.20.png

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 945

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

banned

View solution in original post

Replies 15 (15)

AvadaCommerce
Shopify Partner
3879 839 945

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.

banned
kazan_mila
Shopify Partner
18 0 2

Hi @AvadaCommerce ,

 

thank you so much for your Message!

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

AvadaCommerce
Shopify Partner
3879 839 945

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

banned
kazan_mila
Shopify Partner
18 0 2

@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
Shopify Partner
3879 839 945

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

banned
thegoodcomfy
Tourist
5 0 1

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
Shopify Partner
3879 839 945

Hi @thegoodcomfy 

 

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

 

Thanks you

banned
fallonr
Shopify Partner
2 0 3

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?Screenshot_20230227_082855.png

limelight91
Excursionist
39 1 3

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

limelight91_0-1694879414133.png

 

vivekraghav
Visitor
1 0 0

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 

FairBump
Tourist
8 0 2

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

UandF
New Member
8 0 0

Could you use the same solution for the refresh theme?

BelgiumBaitShop
Tourist
8 0 1

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. 

Rookie16
Visitor
2 0 3

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
Excursionist
23 2 5

I'd also love to know.