FROM CACHE - en_header

Dawn, more items pr collection row

Solved
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)

Accepted Solutions
ThomasBorowski
Shopify Expert
803 71 217

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: themepunk.io
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 Expert
803 71 217

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: themepunk.io
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
2809 531 744

@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 Expert
803 71 217

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: themepunk.io
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! 🙂