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

AndrewH94
Tourist
10 0 3

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

Replies 22 (22)

diego_ezfy
Shopify Partner
2936 562 883

@AndrewH94,

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


<style>
@media (min-width: 749px){
          #main-collection-product-grid > .grid__item{
          max-width: 33.3333% !important;
          width: 100% !important;
        }
}
</style>



Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Zworthkey
Shopify Partner
5581 642 1565

Hii, @AndrewH94 
Do you want to like this if yes?
download (52).png
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.

kuehlapisbymom
Excursionist
27 0 9

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

Zworthkey
Shopify Partner
5581 642 1565

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

kuehlapisbymom
Excursionist
27 0 9
Zworthkey
Shopify Partner
5581 642 1565

@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.

kuehlapisbymom
Excursionist
27 0 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

 

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}

 

britt-blyth
Tourist
9 0 4

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! 

KetanKumar
Shopify Partner
36839 3635 11972

@britt-blyth 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
britt-blyth
Tourist
9 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@britt-blyth 

thanks for url but your store is password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
britt-blyth
Tourist
9 0 4

Sorry!! The password is sawtwo 🙂

anusa
Tourist
11 0 5

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. 

Zworthkey
Shopify Partner
5581 642 1565

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

KetanKumar
Shopify Partner
36839 3635 11972

@anusa 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kevinvi1
Tourist
11 0 5

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

 

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

 

thanks!

 

KetanKumar
Shopify Partner
36839 3635 11972

@kevinvi1 

yes, please give me store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kevinvi1
Tourist
11 0 5

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

 

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

 

thanks!

Kinjaldavra
Shopify Partner
2302 570 1422

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;
 }
}

 

mattsanpedro
Visitor
1 0 1

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!

KetanKumar
Shopify Partner
36839 3635 11972

@mattsanpedro 

Yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 990px) {
#product-grid.grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: calc(33.33% - 1rem * 2 / 3);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing