hi,
I am trying to create a custom section that’s a featured collection with 5 products per row rather than 4. I solved a similar issue months ago in which I made a custom featured collection with 3 products per row, but unfortunately I am unable to replicate that solution again (I must be missing something).
I’ve already duplicated the section Featured-Collection.Liquid and renamed it and changed the corresponding schema info, as well as added the corresponding info to the en.default.schema.json in Locales. I did change the {% schema %} section to be:
“type”: “range”,
“id”: “products_to_show”,
“min”: 2,
“max”: 99,
“step”: 1,
“default”: 5,
because I wanted a higher max.
So far I’ve tried changing: “grid–4-col-desktop” to “grid–5-col-desktop” as well as changing “grid–one-third-max” to “grid–one-fifth-max” but those didn’t seem to work. I thought I remembered last time having to change width of 25% to 33% but I’m not sure where that is. I’ve looked around other similar questions/solutions and they seemed to be editing the base.css. Not sure if that’s correct.
I have noticed that when I set the product number to 2, it has 2 products each 50% wide. When I set it to 3 products, it has 3 products each 33% wide. When I set it to 4 products, there are 4 products each 25% wide. But when I set it to 5 products, it has a top row of 3 products, each 33% wide and a lower row of 2 products each 50% wide. And when I set it to any number 6 or higher, it has rows of 4 products (or less if it doesn’t fill up, but aligned to the left) each 25% wide. There has to be a simple way to achieve 5 products per row at 20% wide.
Right now I’ve got an exact duplicate of the original featured.collection.liquid but with a new name since the edits I’ve tried haven’t worked, so I’m patiently waiting for instructions on what exactly to edit in there.
All solutions are much appreciated! Thank you,
Jack