A space to discuss online store customization, theme development, and Liquid templating.
Hi all!
I am using the Dawn theme, and with the standard layout it has 4 items pr row on pc, some of my collections contain many items, up to 2-300, this makes alot of pages pr collection.
Is there a way to change from 4 items at 25% size, to 8 items at 12,5% size pr row?
i tried to change some numbers in the collection grid liquid but nothing changed so i might have to do multiple changes?
Example of collection i would like 8 rows on:
https://www.xn--stsj-woa.no/collections/s-s-fusion-strike-singles-1
Any tips where to start?
Solved! Go to the solution
This is an accepted solution.
You can increase the number of products per page up to 24 in the theme settings. If you want to increase the number to beyond 24 change the value in the file sections/main-collection-product-grid.liquid and then go back to theme settings and adjust the slider as need.
Go to the code editor and open the file assets/base.css. Search for .grid-item, should be around line 943. You will see various percentages for the width of products on collection pages:
Be sure to make a backup of the file before you make any changes.
Play around with those percentages and with the width of your browser window, also try mobile/tablet, and see what works best.
@Robinlangoeen, do this to fix it in 20 seconds:
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 (min-width: 767px){
#main-collection-product-grid .grid__item{
max-width: 12.5% !important;
}
}
Kind regards,
Diego
This worked, but it didn't add more items per page, only made the current page smaller, know a way to load more items when they are smaller?
This is an accepted solution.
You can increase the number of products per page up to 24 in the theme settings. If you want to increase the number to beyond 24 change the value in the file sections/main-collection-product-grid.liquid and then go back to theme settings and adjust the slider as need.
Thank you! 🙂