How to change the number of product per row to 6?

[james_chan]

Hi,

Is there any way I can change the number of product-per-row to 6? The max could be 5 but it will looks uncomfortable for me on mobile.

Can anyone help?

Screenshot attached:

 Store link: https://www.allnicewigs.com/

[Dan-From-Ryviu]

Hi @james_chan, 

You can try to increase maximum column on desktop of featured collection section in your Shopify admin > Sale channels > Online store > Edit code > open file featured-collection.liquid 

find "columns_desktop" or something else like this, change "max": 5, with "max": 6,  and Save file.

After that, you can reload your customize page and try to add 6th row in that section. 

Hope it works for you.

[james_chan]

Hi Dan, thanks for the help. But I can find the colums_desktop nowhere. The theme my shop used is Impulse.

[Dan-From-Ryviu]

Could you share featured-collection.liquid file? 

[Dan-From-Ryviu]

You can find something similar like columns_desktop, not exactly the same but I make sure it has limit column number out there, just change it so you can add 6 or more collections for that section. 

[james_chan]

{% schema %}
{
"name": "t:sections.featured-collection.name",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.featured-collection.settings.title.label",
"default": "Featured collection"
},
{
"type": "collection",
"id": "home_featured_products",
"label": "t:sections.featured-collection.settings.home_featured_products.label"
},
{
"type": "range",
"id": "per_row",
"label": "t:sections.featured-collection.settings.per_row.label",
"default": 4,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "rows",
"label": "t:sections.featured-collection.settings.rows.label",
"default": 1,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "checkbox",
"id": "mobile_scrollable",
"label": "t:sections.featured-collection.settings.mobile_scrollable.label",
"default": true
},
{
"type": "checkbox",
"id": "view_all",
"label": "t:sections.featured-collection.settings.view_all.label",
"default": true
},
{
"type": "checkbox",
"id": "divider",
"label": "t:sections.featured-collection.settings.divider.label",
"default": false
}
],
"presets": [
{
"name": "t:sections.featured-collection.presets.featured_collection.name"
}
],

Here is something I can find from the file

[james_chan]

@Dan-From-RyviuAnd I was thinging this may be the part that I try to find.

type": "range",
"id": "per_row",
"label": "t:sections.featured-collection.settings.per_row.label",
"default": 4,
"min": 1,
"max": 5,
"step": 1

I tried to replace the max 5 with 6. And refresh my shop frontpage but nothing changed

[Dan-From-Ryviu]

@james_chan, please change "max": 5 to "max": 6, save your file and go to customize and check if you can add more collection.

[james_chan]

@Dan-From-Ryviu  Did I make a mistake? I've changed the number but the per-row still got a max of 5.

[Dan-From-Ryviu]

Could you dm me and provide Collaborator request code so I can sent request to access your store and help you?

[Dan-From-Ryviu · Accepted solution]

Or try to edit value in this code also

"type": "range",
"id": "rows",
"label": "t:sections.featured-collection.settings.rows.label",
"default": 1,
"min": 1,
"max": 5,
"step": 1
},

[james_chan]

@Dan-From-RyviuNot work as well.

I've sent you the code in dm, please check them up.

[Dan-From-Ryviu]

@james_chan, I'm not receive the code yet. 

[james_chan]

I dm you again. Please go check them

[ZSop]

Hi, I am facing the same challenge.

Had changed the number to 6, but still do not work.

Appreciate if you could help.

Thank you

[Kudosi-Tracy]

Hello @james_chan ,

Here is our suggestions:

Go to Online Stores -> Theme -> Actions -> Edit code

Go to Assets -> base.css -> add the following code in the bottom:

.grid-product__item {
  width: calc(100% / 6);
}

Save and preview.

Hope this will help.

Ali Reviews team.

[james_chan]

Hi @Kudosi-Tracy , thanks for the help. But there's no base.css in my assets. Could be something missing already?