How to put the thumbnail images on the left side of the main product image of the dawn theme?
Topic summary
A user seeks to reposition product thumbnail images from the bottom to the left side of the main product image in Shopify’s Dawn theme.
Initial Solution Attempts:
- First CSS code targeting
section-main-product.csswith flex-direction reversal failed to work - Second, more comprehensive CSS code for
base.csssuccessfully repositioned thumbnails to the left
Key Resolution:
The solution worked after enabling “thumbnail carousel” in the product page settings within the theme customizer—a critical step initially overlooked.
Follow-up Issues:
- One user successfully implemented the code but wants to customize thumbnail size, shape (rectangle vs square), and spacing between thumbnails
- Another user reports the code created a long vertical list instead of maintaining the carousel functionality
- Some users cannot locate the “thumbnail carousel” option in Dawn theme settings
Additional Resources:
- A YouTube tutorial link was shared for displaying thumbnails vertically
- Alternative CSS code using rotation transforms was provided for vertical thumbnail display
The discussion remains active with ongoing customization requests and implementation challenges.
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
Hello @Dawood_Mirza_1 , this changed nothing.
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
2 Likes
@Dawood_Mirza_1 this also didn’t change anything. I will email you the URL.
It worked! For other people reading this just make sure to select thumbnail carousel at the product page settings in the theme customizer.
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!
Hi @BeyzaNisa ,
I see your store to be pass protected
Please share Store URL and Password for the changes required.
@Dawood_Mirza_1 thank you!!
www.umewe.eu
Password: hPow8B3m!-cvklrj
Not working for me, nothing happens.
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.
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?
Show thumbnail images vertically:
@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 */
}
}