Hello guys, as you see in the first image, under the big main image there are 3 small images to see. Can i somehow apper more then 3 images under the main image? As example 5, as you see in the second image.
Topic summary
A Shopify store owner wanted to display more than 3 thumbnail images below the main product image on mobile devices—specifically 5 thumbnails instead of the default 3.
Initial Solution:
A CSS code snippet was provided to adjust thumbnail width, allowing more images to fit in the available space by modifying the .thumbnail-list li width to 18%.
Follow-up Customizations:
The user then requested two additional modifications:
- Remove navigation arrows - Achieved by hiding
.slider-buttonelements and adjusting padding - Adjust spacing between thumbnails - Resolved by modifying padding, margins, and gap properties, with thumbnail width fine-tuned to 19.5%
Implementation Method:
All solutions involved adding custom CSS code to the theme’s theme.css or base.css file via the Shopify theme code editor, with media queries targeting mobile devices (max-width: 749px).
The issue was successfully resolved through iterative CSS adjustments, with images demonstrating the visual changes at each step.
Hi @NikosBat
If you add images here, they will start appearing as small images.’
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
@NikosBat Sorry for my previous solution, I didn’t look at your question properly. Here is the correct solution.
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:749px){
.thumbnail-slider.slider-mobile-gutter.quick-add-hidden .thumbnail-list li {
width: 18% !important;
}
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
1 Like
Hello Websensepro, that worked for me thank you very much.
I have 1 more question, can I somehow remove the arrows on the sides of the images?
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:749px){
.slider-button {
display: none !important;
}
.thumbnail-slider {
padding: 0 26px !important;
}
}
If my reply is helpful, kindly Again click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
1 Like
Thank you Websensepro, that solved my problem.
Can I some how adjust the space between this, to be all the same?
@NikosBat Please mark this solution and the previous one also.
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:749px){
.thumbnail-slider .thumbnail-list.slider {
padding-top: 0px !important;
margin-top: -12px !important;
gap: 0 !important;
}
.thumbnail-slider.slider-mobile-gutter.quick-add-hidden .thumbnail-list li {
width: 19.5% !important;
}
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
1 Like
Thank you Websensepro, that has solved my problem