Change from 3 to 4 columns products in Initial Page Featured Collection

[neodstoreof]

Hello all,

I was wondering if anyone could help me with this. I currently have a Brooklyn theme store and in the featured collections in the home page, I would like to change from 3 columns to 4 columns of products. I have already changed the amount of products displayed in these sections from 9 to 12 so that when I change for 4 columns, I have 3 complete rows. 

Also, I would like to make the images smaller a little bit in the featured collection windows in home page. I think the current size is 510x415px, but when I tried to modify, it just stayed the same, unless I used a different ratio. For example, when I wrote 200x200px, it just stayed as a retangular shape, window. I figured this section I was changing was the image, but not the window. So the height adjusted to 200, but the width stayed the same, turning the shape to a retangular shape with a image centered, but leftover window empty space. How can I change the window and image size of these sections?

My store is neodstore.com.br.

[Henry_dev · Accepted solution]

Is it like this: 

If yes, you can add this code at the bottom of the theme.css file

@media(min-width: 1024px) {
  #CollectionSection .grid-uniform {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
  }
  #CollectionSection .grid-uniform .grid__item {
    width: 100% !important;
  }
  #CollectionSection .grid-uniform .grid-product__image-wrapper {
    height: auto !important;
  }
}

[Henry_dev · Accepted solution]

Is it like this: 

If yes, you can add this code at the bottom of the theme.css file

@media(min-width: 1024px) {
  #CollectionSection .grid-uniform {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
  }
  #CollectionSection .grid-uniform .grid__item {
    width: 100% !important;
  }
  #CollectionSection .grid-uniform .grid-product__image-wrapper {
    height: auto !important;
  }
}

[melfiorastreet]

having same problem on dawn theme do you have any particular css 

[collinsmbaka]

Hi @neodstoreof 

You don't need to edit the theme CSS, you can update the grid class. There is a solution for this on this thread

https://community.shopify.com/c/Shopify-Design/How-do-I-add-more-products-per-row-on-my-Brooklyn-the...

Cheers!

[neodstoreof]

Hello! That worked for the collection page. However, I want that same thing to happen in the featured collection section in the initial page of my website.

When you enter https://www.neodstore.com.br/ and you scroll down, I want to see 4 columns of products in those sections. I know how to modify the amount of products in each, but not the amount of columns.

[Henry_dev]

Hello @neodstoreof 

This guide of mine is to apply apply to the first page.

[neodstoreof]

Thank you!! It worked!!

I was mistakenly applying it to the theme.liquid.

[Henry_dev]

Hello @neodstoreof You're welcome. 

If you find this to be the correct solution, please like and accept the solution. Thank you.

[neodstoreof]

Since you're here.. do you know how to do something similar on mobile version? But like, with 3 rows? Because when I open on mobile, it displays one product at a time.

[Henry_dev · Accepted solution]

I think on mobile you should leave 2 columns like this.

You can replace the old code with this new one to apply to both desktop and mobile

#CollectionSection .grid-uniform {
  display: grid !important;
}
#CollectionSection .grid-uniform .grid__item {
  width: 100% !important;
}
#CollectionSection .grid-uniform .grid-product__image-wrapper {
  height: auto !important;
}
@media(min-width: 1024px) {
  #CollectionSection .grid-uniform {
    grid-template-columns: repeat(4,1fr) !important;
  }
}
@media screen and (max-width: 640px) {
  #CollectionSection .grid-uniform {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #CollectionSection .grid-uniform .product--wrapper {
    margin: 0;
  }
}

If you find this to be the correct solution, please like and accept the solution. Thank you.

[neodstoreof]

Damn.. you good!!