Shopify themes, liquid, logos, and UX
In previous themes the Collection List could only hold up to 5 Collections by default. Using the new Dawn theme the Collection List can hold many more Collections but is only showing 3 columns per row. Is there a simple way to adjust the number of Collections shown per row ?
Solved! Go to the solution
This is an accepted solution.
You should be able to add this code to your theme's CSS file and it will work:
@media screen and (min-width: 750px)
.collection-list.grid--3-col-tablet.slider .grid__item {
max-width: 20%;
}
}
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.
Can you provide a link to your store?
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.
https://tazrecords.myshopify.com/
pw = feuwho
It is the 'Shop by Genre' Collection List I am looking to have spread into 5 columns per row (as seen on our live site).
This is an accepted solution.
You should be able to add this code to your theme's CSS file and it will work:
@media screen and (min-width: 750px)
.collection-list.grid--3-col-tablet.slider .grid__item {
max-width: 20%;
}
}
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, Laura.
Hi, could you possibly give a little more detail to how to implement this. I have the same issue (have 3 columns need 5) on linentablecloth.myshopify.com. Where in the CSS should this be added? Which .css file and what row? Also, will this be live right after the edit or do I need to push it to the site in someway?
Here's a screen shot of the css in the the Dawn theme. Add it like I have at the bottom.
Hey, it looks like you solved this, how did you do it in the end? The code that was shared doesn't work for me 😞
Can you share a link? I can try this in the browser dev tools on your site, or if it's not live, send me a link to your development Shopify site.
Hello @Anonymous i see you managed to solve it and implement into your shop the 5 columns! 🙂 May I ask what is the solution?
I thought this css was to show more products per row in a collection (more columns). but I don't see that it works. I'm using the Dawn theme.
OK, after going into my frontend and looking at the browser output, I solved the problem for me. Maybe this can help others.
I wanted six products across and changing the max-width, yielded 6 products per row:
@media screen and (min-width: 990px) {
.grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: 16%;
}
}
You will find this code in the css file.
You'll also see the other media queries above it:
@media screen and (max-width: 749px) {
.grid__item.slider__slide--full-width {
width: 100%;
max-width: none;
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.grid--one-third-max.grid--3-col-tablet .grid__item {
max-width: 33.33%;
}
}
You can change those if needed, if you know about media queries. Please test. If this is not an acceptable solution, let me know.
How can I fix the page collections layout? I have added the code given in a previous thread to create page.list-collections.liquid but the collections are all listed vertically. I have tried all of the solutions listed, but none seem to be working for me. I am using Dawn and would like each of my pages with collections to show three rows across. I know this has been answered but can someone help my specific situation, please? Thank you!
victoriacooperantiqueprints.com
Hello @CooperAntiquePr
Please add below CSS
@media(min-width:767px){
.grid-uniform{
display: flex;
flex-wrap: wrap;
}
.product-grid-item{
width:33%;
}
}
Thanks
It is working now but since I need to edit my images, since they are all different sizes, is there a way to make my ‘pages of collections’ look exactly like my ‘all collections’ @devangfour thank you
I think you done with that
Thanks
@devangfour I would like all collection list pages (example here is “architecture”) to look like the “collections
” This is what I’d like the other to look like..
I think you need to contact your developer for this.
Because, You need to redesign pages and If we do via CSS. That's not good. We need to update HTML also.
I think he can do more things for you. Like, Upgrade footer design. As you can see that has lots of space.
So, kindly request don't do with forum.
Thanks
Ok, thank you for your response. 🙂
instead of collection list stacking on one another in mobile , I want it in two columns instead of one column.
thanks for your help.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025