Changing The Number Of Columns On Collection Page

Store Design
1

Hi There:

I am trying to see if there is anyway to change the number of columns on the collection page of the District version of Shopify? Right now it only allows 3 images per row and I would like to have 4. I have tried to search YouTube with no success. It is only showing how to edit the code from a theme of 5 years ago. Any help in the right direction would be greatly appreciated!

Alisanne

https://shugarplumsgifts.com/

1 Like
2

Hi @ShugarPlums ,

Hope you are doing good.

To make 4 columns on collections pages you have to add below code in your theme.scss.css file

Go to online store > Actions > Edit code

Search for Assets > Theme.scss file and paste the below code at very bottom of the file

.collection .products-grid .box.product {
    width: 25%;
}
 @media screen and (max-width: 950px) {
        .collection .products-grid .box.product {
          width: 50% !important; 
} 
}

Hope this helps,

Regards,

Reena

3

Thank you Reena, it did work! I also did more research though and believe I figured it out myself. Here is what I came up with:

If you want four products per row then add below css in theme.scss.liquid file:

.collection .products-grid .box.product {

width: 22.22% !important;

}

The only thing is I wish the images where bigger. Thank you so much for your help.

Alisanne

1 Like