What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Dawn, more items pr collection row

Solved

Dawn, more items pr collection row

Robinlangoeen
New Member
4 0 0

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?

 

Accepted Solution (1)
ThomasBorowski
Shopify Partner
803 71 242

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.

ksnip_20211120-170027.png

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

View solution in original post

Replies 5 (5)

ThomasBorowski
Shopify Partner
803 71 242

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:

ksnip_20211120-115351.png

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.

 

 

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

diego_ezfy
Shopify Partner
2970 571 917

@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

Robinlangoeen
New Member
4 0 0

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?

ThomasBorowski
Shopify Partner
803 71 242

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.

ksnip_20211120-170027.png

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
Robinlangoeen
New Member
4 0 0

Thank you! 🙂