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
2744 513 695

@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

Zworthkey
Shopify Partner
5581 641 1503

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.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Kinjaldavra
Shopify Partner
2302 569 1405

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
krollbymom
Excursionist
11 0 5

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

Zworthkey
Shopify Partner
5581 641 1503

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Zworthkey
Shopify Partner
5581 641 1503

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
krollbymom
Excursionist
11 0 5

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 569 1405

hello @krollbymom 

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
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
32501 3268 10837

@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
KetanKumar
Shopify Partner
32501 3268 10837

@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 641 1503

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
KetanKumar
Shopify Partner
32501 3268 10837

@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
mattsanpedro
New Member
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!

kevinvi1
Tourist
10 0 4

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

 

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

 

thanks!