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

Store Design
1

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.

2

Is it like this:

BrianDev_0-1628880394407.png
BrianDev_0-1628880394407.png1230×1243 183 KB

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

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/post/733590

Cheers!

1 Like
4

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.

5

Hello @neodstoreof

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

BrianDev_0-1628908488315.png
BrianDev_0-1628908488315.png860×849 107 KB

6

Thank you!! It worked!!

I was mistakenly applying it to the theme.liquid.

7

Hello @neodstoreof You’re welcome.

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

2 Likes
8

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.

9

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

BrianDev_0-1628924375309.png
BrianDev_0-1628924375309.png464×724 77.5 KB

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.

10

Damn.. you good!!

11

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