Dawn, more items pr collection row

Solved
Robinlangoeen
New Member
3 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
650 44 153

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

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
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

Replies 5 (5)
ThomasBorowski
Shopify Expert
650 44 153

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.

 

 

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
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★
diego_ezfy
Shopify Partner
2313 415 544

@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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
Robinlangoeen
New Member
3 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
650 44 153

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

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
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

Robinlangoeen
New Member
3 0 0

Thank you!