Collection Product Count | Number of products per breakpoint?

Solved
Highlighted
Tourist
11 0 1

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?

0 Likes
Highlighted

Success.

Shopify Partner
1647 206 325

Unlikely this can be done using liquid. Also, even with the JavaScript/storefront approach it's very dependent on the theme of choice, unlikely you can get a suggestions with a generic solution. Often, the row breaks are coded using CSS float: left and clear: both when you want to cary over to the next row. The rule to set clear: both is driven by the media query and applies to the n-th child, depending on the breakpoint.

 

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.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
11 0 1

Thanks Sergiu!

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.

0 Likes
Highlighted
Shopify Partner
1647 206 325

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?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Tourist
11 0 1

We currently have our theme pulling from a total item value.

Screen Shot 2020-02-04 at 12.10.27 PM.png

Can you show me a snippet example of using a page size multiplier?

0 Likes
Shopify Partner
1647 206 325

This is part of theme settings and you should be able to find it in the schema definition and change it to your liking.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes