Shopify themes, liquid, logos, and UX
Hi everyone! I'd like the product thumbnails on my products pages to appear larger and also closer together. Can anyone write some code(s) that can both remove some of that whitespace on the left and right sides of the gallery of images, as well as some of the space between each of the three rows? The goal is for the thumbnails to appear a bit larger, as well as a little closer together. Thanks so much!
The image below should give you a better idea of what I'm asking -- bigger pictures, closer together.
Oh! And can you also please make the names of the products align with the left sides of the thumbnail pics? Because right now they all seem too far left.
Solved! Go to the solution
This is an accepted solution.
hello @loganwright
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-collection-template .grid-view-item__image-wrapper.product-card__image-wrapper {
max-width: 100% !important;
max-height: 100% !important;
}
#shopify-section-collection-template .grid-view-item__image {
max-width: 100% !important;
max-height: 100% !important;
}
hello @loganwright
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
This is an accepted solution.
hello @loganwright
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-collection-template .grid-view-item__image-wrapper.product-card__image-wrapper {
max-width: 100% !important;
max-height: 100% !important;
}
#shopify-section-collection-template .grid-view-item__image {
max-width: 100% !important;
max-height: 100% !important;
}
This is PERFECT!! Thank you so much.
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 as Solution
I have this same issue, however, when i'm trying to edit code i can't find a file that says assets/themes.css
Hi @Kinjaldavra
I use Studio theme 10.0.0 . I want to remove right and left white space in collection pages as well. I don't have theme.css in my theme. Could you help me how should I proceed with this solution?
I hope you are still active
Thanks very much
Hello,
I tried this solution on studio 10.0.0 and didn't work for me. theme.css doesn't exist so I tried on base.css but didn't work. Could you let me know where should I add it
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024