Creating a Grid/List View + Products Per Page Selector in Shopify

collection.liquid

// To create functionality that allows Shopify collection pages to switch between grid/list and products per page selectors
// Create four collection templates (Or more if you need), two called collection.grid-12.liquid and collection.grid-24.liquid
// and two called collection.list-12.liquid and collection.list-24.liquid
// In the grid templates, add:

        <div class="view-icons">
          <span class="view-icon grid-view" data-view="grid-xx">
            <span class="icon icon-th"></span>
          </span>
          <span class="view-icon list-view" data-view="list-xx">
            <span class="icon icon-th-list"></span>
          </span>
        </div>
        
// grid-xx list-xx - Change 'xx' to reflect the current product count template

        <div class="form-show-sort">
          <div class="form-group pull-left">
            <label for="p_show">Show</label>
            <select name="p_show" id="p_show" class="form-control input-sm">
              <option value="xxxx" selected>12</option>
              <option value="xxxx-24">24</option>
            </select>
            <strong>per page</strong>
          </div>
        </div>
        
// xxxx xxxx-24 - Change 'xxxx' to reflect the current grid/list template

// In theme.liquid, insert this JS

        <script>
        Shopify.queryParams = {};
        if (location.search.length) {
          for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
            aKeyValue = aCouples[i].split('=');
            if (aKeyValue.length > 1) {
              Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
            }
          }
        };
        jQuery('#p_show')
        .bind('change', function () {
          Shopify.queryParams.view = jQuery(this).val();
          location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
        });
        jQuery('.view-icon:not(.active)')
          .bind('click', function () {
            Shopify.queryParams.view = jQuery(this).data('view');
            location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
          });
        </script>

// Inside each 24/48 template, change the pagination limit to reflect this number.

I plan to update this gist to support browser LocalStorage so the customer can leave the website and return to it later and have their preference remembered.