Shopify Click On Different Button Will Run Different Liquid Code

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" %} 



  • There's no way to do like yours.
  • But I give you relevant-mention:
    • Refer the link; 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, it just likes (create your own store, customize theme with liquid code... )