Shopify themes, liquid, logos, and UX
Hi, I'm using the Dawn theme and noticed that only three thumbnail images are displayed on the product page for mobile, despite our website having more than six images available. Is there a way to showcase more thumbnails, so our customers are aware of additional images to view?
Any assistance would be greatly appreciated. Attaching image below for reference. Thank you so much!
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > section-main-product.css and paste this at the Top of the file:
@media screen and (max-width: 749px){
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.6rem)!important;
}
}
Hello @avaskye ,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the Bottom of the file:
@media screen and (max-width: 749px){
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.6rem);
}
}
Hi @ZestardTech Unfortunately that didn't work for our website. Do we need to change any of the numbers? It's still showing only 3 thumbnails.
Hello @avaskye
Please share your store URL and Password.
So that I will check and let you know the exact solution here.
@ZestardTech website is 6cbb37.myshopify.com and password is hblo - thank you so much in advance!!
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > section-main-product.css and paste this at the Top of the file:
@media screen and (max-width: 749px){
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.6rem)!important;
}
}
THANK YOU! I see 4 thumbnails now :0)
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.
Hi @avaskye ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
@BSS-Commerce Hi, yes, of course! Our store link is 6cbb37.myshopify.com and password is hblo - thank you so much in advance!
Hey @avaskye ,
You can add CSS to the base.css file:
@media only screen and (max-width: 749px) { .thumbnail-list.list-unstyled.slider slider--mobile { flex-grow: 1; display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } }
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
I just tried adding this to our base.css code, but it's still showing 3 thumbnails on the product page on mobile. Am I doing something incorrectly? Thanks!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025