Shopify themes, liquid, logos, and UX
How to put the thumbnail images on the left side of the main product image of the dawn theme?
Solved! Go to the solution
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
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
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
It worked! For other people reading this just make sure to select thumbnail carousel at the product page settings in the theme customizer.
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.
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
Thank you!
Hi @BeyzaNisa,
I see your store to be pass protected
Please share Store URL and Password for the changes required.
🙂
Not working for me, nothing happens.
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:
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024