Shopify themes, liquid, logos, and UX
Hi! I am trying to make my images smaller and the space between them larger in my featured collection section on my home page. I have tried a few code options given to others asking similar questions, but none have worked.
Here is a preview of my store:
And here is a screenshot of the section I am wanting to adjust. The gap between the photos is way too close for my liking and I want to adjust it. Hope to hear back soon, Thank you!
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
.collection .product-grid {
column-gap: 20px;
}
</style>
Note: You can change the value of 20px to any value that match with your requirements
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you! This solved the gap, but now the images are still the same size and are creating 2 rows rather than staying on one row and sizing down with the gap expanding
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025