How do I change the thumbnail orientation to vertical?

[zenir_official]

Hi. I would like to change the orientation of the product detail page to vertical as shown in the example image below without using an app.
I'd appreciate it if you could tell me how to edit the code.

+ Additional questions

The thumbnail changes depending on the variant, but I want to add a prev/next button to the thumbnail to add a slide function like example . Can I do this without the app?

Here is the preview link of my site. I'm using the latest version of the Dawn Theme.
https://8v98ymydey103ial-86858006827.shopifypreview.com

[INA_MSWEB · Accepted solution]

Hello Zenir,

Hope you are doing well.

I am San from MS Web Designer.

Here is the solution:

Go to Online Store->Theme->Edit code > Asset->/base.css->paste below code at the bottom of the file:

@media (min-width: 750px) {
  .product--thumbnail_slider .thumbnail-slider {align-items:flex-start !important;}
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{margin-bottom:5px !important}
	 .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 have any concerns feel free to ask.

Regards,

San

[zenir_official]

Thumbnail alignment is now vertical, thank you. Do the previous / next slide buttons require an app or special code editing?

[MRamzan]

Move thumbnail images to the left: