How can i change product grid to 3 per row (Dawn theme)

Store Design
1

Hi there! How can i change my product grid from 4 per row (currently) to 3 per row on the dawn theme?

Any help would be greatly appreciated

store: https://the-ice-cream-bar-singapore.myshopify.com
password: biaces

2

@AndrewH94 ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

Kind regards,
Diego

3

Hii, @AndrewH94
Do you want to like this if yes?

download (52).png
download (52).png1353Ă—521 441 KB

Then paste this code on top of the base.css file.

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

Thank You.

4

hello @AndrewH94

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 789px){
#main-collection-product-grid .grid__item{
     width: 100% !important;
     max-width: 33.3333% !important;
 }
}
5

Hi… how do I change my “Collections” pages to show 3 products per row? Thank you

1 Like
6

@kuehlapisbymom
Kindly Share your Store url.
So i can help you.

7

https://krollbymom.com/collections/classic-legends

thank you

1 Like
8

@kuehlapisbymom
Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
.grid--4-col-desktop .grid__item {
    width: 33% !important;
}
}

Thank You.

9

Nothing happened to my “collections” pages.

Only thing that changed is my “featured collection” on my homepage. Max products to show is in multiples of 2s. (2,4,6,8,10,12)

So 3 products in one rows, and the 4th became huge on the second row. So I just need the Collections Pages to show 3 per rows. No changes to the homepage will be fine with me.

Screenshot 2021-10-30 at 1.05.10 PM.png
Screenshot 2021-10-30 at 1.05.10 PM.png2818Ă—1504 430 KB

10

hello @kuehlapisbymom

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: 25%!important;
}
}
11

Hello @Kinjaldavra !

Would you be able to share a code that changes the DAWN product grid to 2 per row? I would massively appreciate it!

1 Like
12

@britt-blyth

can you share your store url so i will check and guide

13

My store url is -
https://britt-blyth.myshopify.com/admin/themes/121624625284/editor
Thank you!! :slightly_smiling_face:

1 Like
14

@britt-blyth

thanks for url but your store is password protect

15

Sorry!! The password is sawtwo :slightly_smiling_face:

16

Hi! is there a solution for this? I am having the same issue. I have 4 products in the collection page. I managed to make them show 3 products per row; however, the 4th product took half space of the row in the second row instead of1/3 space.

1 Like
17

@anusa
Kindly Share your Store URl,
So that we can help you.

18

@anusa

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
19

Hello! Looking to change both my featured collection grid and shop grid to 3 columns. Help would be very much appreciated!

Home: https://elunioncoffee.myshopify.com/
Shop: https://elunioncoffee.myshopify.com/collections/all

Password: woowhi

Thanks!

1 Like
20

Hi!
I am trying to change from 4 rows to 3 rows like above.

https://aquald.myshopify.com/collections/all

thanks!