Adding more than 5 collections in a row Impact theme

Store Design
,
1

Is that possible to adjust the number of collection rows? I wish it could be 6 or 7

Setting 'collections_per_row' can't be greater than 5

https://simaxsports.com/

2

Hi @zakuntsart

You can follow these following steps:

  1. Go to Theme => Edit code.

  2. Add the following code at the end of file theme.css or base.css.

@media screen and (min-width: 1400px)
#shopify-section-template--19142777962796__158a0f6b-56f2-4a69-91b7-661f36d3b862 .collection-list {
    --collection-list-grid: auto / repeat(7, minmax(0, 1fr));
}
@media screen and (min-width: 1400px)
#shopify-section-template--19142777962796__28942680-ab3a-423f-92a5-d361c7dcf0a0 .collection-list {
    --collection-list-grid: auto / repeat(7, minmax(0, 1fr));
}

Here’s the result:

BSSCommerce_1-1686553782707.png
BSSCommerce_1-1686553782707.png1675×823 311 KB

Please note: You can replace “7” by the number of collection you want to display on every row.

--collection-list-grid: auto / repeat(7, minmax(0, 1fr));

If it worked, please mark as a solution. Good luck!

3

Does not work for me, maybe some previous code fails it

@media only screen and (max-width: 767px) {
.collection-list {
grid-template-columns: 31% 31% 31% ;
justify-content: space-around;
} 
   
}
@media(max-width: 768px){
	.shopify-section--main-collection .product-list{
		grid-template-columns: auto auto auto;
	}
}

@media screen and (min-width: 1400px)
#shopify-section-template--19142777962796__158a0f6b-56f2-4a69-91b7-661f36d3b862 .collection-list {
    --collection-list-grid: auto / repeat(7, minmax(0, 1fr));
}
@media screen and (min-width: 1400px)
#shopify-section-template--19142777962796__28942680-ab3a-423f-92a5-d361c7dcf0a0 .collection-list {
    --collection-list-grid: auto / repeat(7, minmax(0, 1fr));
}