HI,
Hopefully you can help… currently my products are showing 3 thumbnails to the left of the product and I’d like to increase to 5. I am using the Dawn theme.
Any ideas how this is done?
The image attached shows what I am talking about.
I appreciate your help.
Richard
Hello Richard,
Greetings for the day.
Can you please confirm how many images you added to Product media?
If there are more than 3 images in the media you will be able to see it on the product page as well.
For example
I have added 4 media to the Product page
I can see all 4 images on the Storefront :
Thanks
Hi @seequence8 ,
I have check Dawn theme, but they doesn’t provide this kind of vertical carousel functionality.
Can you please verify that you can use any third party private app for product carousel or any other theme to implement vertical carousel?
Please verify and let me know then I will check on that.
Thank you.
Hi,
Thank you for responding.
I have added 6 sub images and it is only showing 3.
It doesn’t show more images if there are more than 3 uploaded.
Ideally I would like to show all, if I have more, but 5 would be better.
Any other ideas?
Thank you
Richard
Hi,
Thank you for responding.
I have not added any third party apps.
THe im,age I supplied was direct from my website via the Dawn theme which uses a vertical carousel. The problem I am having is to show 4 products and not 3.
If you have any ideas how to show 5 images that would be most appreciated.
Many Thanks
Richard
Hi @seequence8 ,
Please send your site and if your site is password protected, please send me the password. I will check it.
Thank you,
Site: https://6r7nrnrgwjggw5uu-56211046536.shopifypreview.com
Password: fraserbarron
Your help is appreciated.
Many Thanks
Hello @seequence8 ,
Thank you for sharing the details. I see inline CSS that has fixed height. Your requirements can get fulfilled by adding some CSS to the theme’s default CSS file.
You can choose to make those in your CSS file. To do this go to Online Store > Themes, find the theme that you are working on, then click on Actions > Edit Code. Make your way over to Assets > theme.scss.liquid.
Add below CSS at the end of theme.scss.liquid file
.slick-list.draggable {
height: 650px !important;
}
Output :
Note: Any changes to the theme’s CSS are not easily reversible. Make sure to create a backup of your theme in case you need to revert any changes
Thanks
Thank you so much!
Yes, it worked as you described.
Many Thanks
Richard
Glad to help @seequence8 
Hi @seequence8 ,
SaaSEnthu solution works really well, but it throws an error if the image size changes.
Therefore, if you want it to work all the time, you need to change it with the JS code.
First, you need to remove the newly added code of SaaSEnthu.
Then you go to theme.js file, find ‘_productThumbnailSlider’ and change number here:
Hope it is clear to you.
Brilliant.
Worked just as well.
Many Thanks
Richard
