Vue-storefront: As a user I want to choose number of columns of products I see on the category view

[pmaojo]

What is the motivation for adding / enhancing this feature?

[not for mobile]

The number of columns determine two aspects:

• Size of product image thumbnails on the category page. Less columns - bigger images.
• Amount of products displayed. More columns - more products visible.

Could different column layout affect site ROI? It must affect. But there cannot be a generic rule for this, each e-commerce belongs to different markets, different users, different products, this should be adaptative to each business model.

How can we enhance this to develop an intelligent solution that maximizes clicks on products?

v1 - As I user I want to select the number of columns. (this could be a good start)
v1- As I user I want my selection to be remembered

v2- As a product owner I would like to get data on which column configuration got more sells (by cart total), which was the most selected among users, and decide default columns and available numbers.

v3- As a product owner I dream that we could use Tensorflow to bring some machine learning to this and other components.

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [x] This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [ ] (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

### What do you think?

[heyfets]

I'll take it.

[alinadivante]

@heyfets maybe @StasiekDivante will suggest some graphic solution like image-size?

[StasiekDivante]

@alinadivante not sure what's the issue here, could you elaborate?

[alinadivante]

@StasiekDivante I want to ask if you have any suggestions/ideas how we can do selection options for displaying the number of products columns on the category page?
Which solution is better?

or

[StasiekDivante]

I believe numbers are a better solution here, as the meaning of icons might not be clear in this case

[pmaojo]

I believe numbers are a better solution here, as the meaning of icons might not be clear in this case

I agree.

[alinadivante]

@vishal-7037 IMHO products column change functionality is located in wrong place and it doesn't look good. Maybe we can move it a little bit closer to Sort by option? (but at the same time remembering about changes from issue #2935 )

[StasiekDivante]

@alinadivante could you share a screenshot how it looks now?

[alinadivante]

@StasiekDivante

[StasiekDivante]

@alinadivante yeah, just go on and move it closer to sort by

[pmaojo]

I suggest also aligning both inputs horizontally with the title "Women"

[StasiekDivante]

Sure thing @pmaojo! I made a simple graphic to help you with this

[vishal-7037]

@alinadivante , @StasiekDivante
Okay, Working on it.

[pmaojo]

[pmaojo]

@StasiekDivante yes :D

[StasiekDivante]

@pmaojo tbh It would be more visually pleasing if you had text lying on one baseline (check img from my previous post), I wouldn't mind underlines going beneath this text baseline 😄

And vertically it's perfect!

[vishal-7037]

@StasiekDivante ,
So no need to work on alignment issue. right?

[StasiekDivante]

Hey @vishal-7037, this is how it is now:

and that's how it should be:

[vishal-7037]

@StasiekDivante Okay, Got it.

[StasiekDivante]

@vishal-7037 sure, it just needs vertical and horizontal alignment

[alinadivante]

@vishal-7037 Please remember to take into account changes regarding: #2935
Sort by will be looks like on this screenshot

[vishal-7037]

@alinadivante, @StasiekDivante I've updated design as per your suggestion and also according to https://github.com/DivanteLtd/vue-storefront/issues/2935

Please review https://github.com/DivanteLtd/vue-storefront/pull/3017 and let me know.

Thank you.

[alinadivante]

@vishal-7037 thank u for your fixes :)