Is there a way to create a condition to control how many products display on a collection page by device width?
I know that Liquid is server-side but I am wondering if anyone has found a way to do something like this through JS or a Liquid Object? There must be a creative way?
Solved! Go to the solution
An example here - https://webdesign.tutsplus.com/tutorials/quick-tip-building-responsive-layouts-with-floats--cms-2562... . Another option would be to use Flexboxes, more information here - https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ . Obviously, the layout of the HTML should be flexible enough to leverage both approaches.
That's some good info. I wish there was a way to control this.
We display our products on collection pages by mobile 2 col, tablet 3 col and desktop 4 col.
Having single control over the number of products displayed makes the last row inconsistent and just doesn't look good with Pagination.
It looks like our only alternative is to come up with a standard column number like 3 across on all breakpoints.
I wish we could create some theme settings to specify total products per page for the breakpoints.
Yeah, pagination would be an issue. But you can set the page size to multiplier of 6? and then have 2 and 3 columns option for mobile and tablet/desktop? Still better that 3 across all screen sizes?
This is part of theme settings and you should be able to find it in the schema definition and change it to your liking.