If a user click on a button which has class name: '3-col', it will execute the following code: '{% assign products_per_row = "3" %}'.

and if a user click on a '4-col' button, it will execute the following code: '{% assign products_per_row = "4" %}'.

However the code below doesn't work.

I have researched all ways to do that, but I couldn't. Any advice is appreciated. Thanks!

<button class='3-col' onclick="prod3()"></button> 
<button class='4-col'onclick="prod4()" ></button> 
{% include 'product-loop' with settings.collection_sidebar %}


<script type="text/javascript">
 function prod3(){ 
            {% assign products_per_row = "3" %} 
        }
function prod4(){ 
            {% assign products_per_row = "4" %} 
        }

</script>

If a user click on a button which has class name: '3-col', it will execute the following code: '{% assign products_per_row = "3" %}'.

and if a user click on a '4-col' button, it will execute the following code: '{% assign products_per_row = "4" %}'.

However the code below doesn't work.

I have researched all ways to do that, but I couldn't. Any advice is appreciated. Thanks!

<button class='3-col' onclick="prod3()"></button> 
<button class='4-col'onclick="prod4()" ></button> 
{% include 'product-loop' with settings.collection_sidebar %}


<script type="text/javascript">
 function prod3(){ 
            {% assign products_per_row = "3" %} 
        }
function prod4(){ 
            {% assign products_per_row = "4" %} 
        }

</script>

• javascript
• jquery
• shopify
• liquid
• assign

• 1 Liquid is a template language. It doesn't work that way. You can't change liquid once the page is rendered/loaded. – HymnZzy Commented Apr 13, 2016 at 0:53
• Is there other way that I can implement it? – user21 Commented Apr 13, 2016 at 1:50
• What do you want to achieve? Mention that in the question. – HymnZzy Commented Apr 13, 2016 at 1:56
• Is there other way that I can show 3 products in 1 row or show 4 products in 1 row, depending on which button I click – user21 Commented Apr 13, 2016 at 2:54
• When you use values for products_per_row in liquid without using JS, are there any changes in class for the products? – HymnZzy Commented Apr 13, 2016 at 12:29

3 Answers 3

• There's no way to do like yours.
• But I give you relevant-mention:
  • Refer the link https://full-the-style.myharavan./collections/all; then click a filter-item on the left-bar, then right-bar must change some items following your choose.
  • On Chrome, you can press F12, check Network tab, click a filter-item on left-bar again; make sure that you can see request "/search?...view=grid_and_control"; => solve your problem by sending request to a specified search-page TEMPLATE.
• On your case, try to do some following-steps:
  • Inside your Shopify admin/theme, create 2 search-pages TEMPLATES: "search.3col.liquid" & search.4col.liquid.
  • On each of buttons, You can make request to search-page with 2 views: "/search?view=3col" & "/search?view=4col"
  • Then you can make anything with HTML, CSS, and of course work with liquid-code on 2 search-pages above.

PS: The site above based on Haravan., it just likes Shopify. (create your own store, customize theme with liquid code... )

This is the sort of thing I find curious about Shopify. There is no simple way to provide interaction between their templates and client side code.

In order to do this you need to do it all client side.

Lets say your products are in divs with class 'product-cell' then your code could be:

function prod3(){ 
        $(".product-cell").css('width', '33.3%');
    }
function prod4(){ 
         $(".product-cell").css('width', '25%');
    }

then make sure you are including jQuery as an asset in your theme and if this is something you want to make persistent include the use of localStorage or a cookie.

function prod3(){
    $(".product-cell").addClass("col-md-3");
}
function prod4(){
    $(".product-cell").addClass("col-md-4");
}