How do I change the thumbnail orientation to vertical?

Store Design
, , ,

Topic summary

A user seeks to change product page thumbnail orientation from horizontal to vertical without using an app, and wants to add previous/next slide buttons for variant-based thumbnail navigation. They’re using the latest Dawn theme.

Solution Provided:
A respondent (MS Web Designer) shared CSS code to be added to the base.css file that:

  • Repositions thumbnails vertically on desktop (min-width: 750px)
  • Adjusts thumbnail spacing and layout using flexbox
  • Modifies slider button display and thumbnail width

Current Status:

  • The vertical alignment was successfully implemented
  • The question about adding prev/next slide buttons remains partially addressed
  • A follow-up response mentions moving thumbnail images to the left with a YouTube tutorial link

Note: Some text in the original conversation appears corrupted or reversed, making portions difficult to parse, but the core technical solution and outcome are clear.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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.

zenir_official_0-1713494222545.png
zenir_official_0-1713494222545.png1035×788 277 KB

  • 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?

zenir_official_1-1713494475951.png
zenir_official_1-1713494475951.png1260×376 180 KB

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

2

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

4 Likes
3

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

4

Move thumbnail images to the left: