Change products_per_row on mobile, non css

Shopify Partner
1 0 0

Hi gang.


I have a client who wants to have 3 products per row on desktop, and 2 on mobile.

This causes the problem where we've got a gap after the last product on one of the other.

An even number (28) divides by 2 on mobile for an even finish, but leaves a orphan entry on desktop. Vice versa if Prducts_Per_row us 27/29 etc.


I don't want to load 2x collection pages into the dom with a css solution if I can avoid it (one with the ppr @ odd, the other at even and mobile only), if I can avoid it, so am attempting some Java.


But...I'm too savvy with Javascript (shame!)

It's using the {{ 'rowassign.js | asset_url | script_tag}} at the end of the collection-template file.

My rowassign.js.liquid is below, with console.log's to see if they trigger (they aren't)


function rowswitch() {

var windowWidth = jQuery(window).width();

if( windowWidth < 767 ) {

{% capture layoutData %}{% assign products_per_row = 24 %}{% endcapture %}
console.log('mobile width');

} else {

{% assign products_per_row = section.settings.products_per_row %}
console.log('desktop width');


var content = {{ layoutData | json }};

//The above should inject it into the right point, which is a div called ".rowassign" just above the product loop.