Shopify themes, liquid, logos, and UX
Good Day, sorry if this question was asked before.
I would like to increase the number of slots i can add in a single row for the collection list section. At the moment it can ony fit 3 per row, if i add a 4th it will create another line (Example below)
The section name is "Collection-List.liquid"
I would like to be able to add 4 in a single row, i tried a bunch of things with the code but none worked, i am not really good with liquid. Would really apreciate some help with this guys!
Store url: https://donutsole-hu.myshopify.com/
Password: twilye
Thank you very much in advance!
Solved! Go to the solution
This is an accepted solution.
You'll need to write some CSS to do this. If you open the code editor for your theme and open the correct liquid section/snippet, you can paste this directly in and it should work.
<style>
@media only screen and (min-width: 1140px) {
.CollectionItem {
min-width: 25%;
}
}
</style>
The best solution though would be to ask a developer to build custom functionality into the theme that allows you to set how many blocks per row.
Hope that helps!
Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel
- Was my reply helpful? Please Like and Accept as Solution.
- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.
This is an accepted solution.
You'll need to write some CSS to do this. If you open the code editor for your theme and open the correct liquid section/snippet, you can paste this directly in and it should work.
<style>
@media only screen and (min-width: 1140px) {
.CollectionItem {
min-width: 25%;
}
}
</style>
The best solution though would be to ask a developer to build custom functionality into the theme that allows you to set how many blocks per row.
Hope that helps!
Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel
- Was my reply helpful? Please Like and Accept as Solution.
- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.
Thank you very much @laurafizzypixel
I added the code after the last </style> label in "Collection-List.liquid" and it worked perfectly!
Hi @laurafizzypixel,
May I ask what code to use if i wanted 2 collections per row on a mobile?
Many thanks
Mark
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024