@LitCommerce I tried using your code, though the images appeared below the main image, not to the left - any idea how to resolve this issue? please see the image below:
whoops haha: www.fairbump.com
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/base.css->paste the 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%;
}
}
Thanks!
THOUGH - How do I make the thumbnails appear rectangle (as per the original image dimensions) ? (not square) and can we make the images align to the top of the main image?
Yes you can align your product thumbnail to the top of the main image by adding new value to one class which @dmwwebartisan has already shared with you. find the class .product–thumbnail_slider .thumbnail-slider and add the following value
align-items: flex-start; to this class and that’s it.
Perfect ! Thanks for sharing. This css code has just work fine in Shopify Dawn theme.
Hi, can you please share the code?
i tried to put thumbnails on the left side but i couldnt make it
I tried this code and it worked. But i want only 5 images to display as thumbnails and then there should be arrows for more than 5 images and an arrow for sliding the main product image. Can you please help.
Did you ever figure out how to add the arrows? I want to add this to my store as well.
Thanks
I would need this also.
Hopefully, someone has figured it out and will share the solution with us.
Thanks
I also need the solution for this. If anyone has found it, please help.
after implementing the code given above,
implement the code given in this thread.
after implementing the code given above, follow this thread below to enable image swipe with buttons on desktop
how did u fix this one plz …all my images show on left not only 5
many code in this thread which one did u use
got serious loading issues. Make sure it loads under 2 sec
Display small images to the left side:
Great work man