Solved

How do I change my "Collections" pages to show 3 products per row? (Dawn Theme)

kuehlapisbymom
Excursionist
27 0 9

Hi.... how do I change my "Collections" pages to show 3 products per row? 

Just the Collections pages. Not the "Homepage" and not "All Products" page.

My website is krollbymom.com

Thank you

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@kuehlapisbymom 

 Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 33% !important;}
.collection .grid--4-col-desktop .grid__item { width: calc(33% - 1rem * 3 / 3) !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12280 2546 3694

@kuehlapisbymom 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@kuehlapisbymom 

 Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 33% !important;}
.collection .grid--4-col-desktop .grid__item { width: calc(33% - 1rem * 3 / 3) !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
kuehlapisbymom
Excursionist
27 0 9

Thank you  @dmwwebartisan!

Jacquline
Excursionist
48 0 7

Hey @dmwwebartisan I used your code it worked great thank you! 

 

All my collections have the 3 products per row now and its great, but now also the featured collection on homepage has 3 products, and I prefer it to have 4 on a row. Is it possible to only make it have 4? 

Jacquline
Excursionist
48 0 7

@dmwwebartisan Any update maybe? Would be super grateful! 

sandranobre
Excursionist
36 2 3

Thank you for this! It worked for me as well! BUT, now the product pictures is all blurry. Why?