This is one of the feature in eCommerce store product listing which allows customers to select the number of products they want to see per page. This comes in a dropdown or number link where the customer choose numbers per page and the product page paginates as accordingly.

This feature doesn’t come in shipify default theme Debut. I have only seen this in some of the premium themes.

Knowledge required for this feature implementation is general developer level who understands shopify workflow.

So, first of all we need to find a collection liquid template from where products are being rendering. For a reference you can look at themplate suffix of any/required collection in collection edit section in backend. In default theme it is collection.liquid which includes section `collection-template`.

Find your collection template in your file and more importantly find `{% paginate collection.products by limit %}` in your collection template this place is where we will be changing this `limit` variable with value of dropdown. Generally this varaible value is obtained from theme configuration settings for `per page products count` or similar attribute.

Now we will create dropdown inside paginate

<div class="sort-per-page">
 <label for="sel1">Show per page:</label>
 <select id="sel1" class="num">
 <option value="/collections/{{ collection.handle }}?view=9" {% if limit == 9 %}selected="selected"{% endif %}>9</option>
 <option value="/collections/{{ collection.handle }}?view=12" {% if limit == 12 %}selected="selected"{% endif %}>12</option>
 <option value="/collections/{{ collection.handle }}?view=24" {% if limit == 24 %}selected="selected"{% endif %}>24</option>
 <option value="/collections/{{ collection.handle }}?view=36" {% if limit == 36 %}selected="selected"{% endif %}>36</option>
 </select>
</div>

In above code a dropdown is being created where options values are assigned and a condition added for selected dropdown.

Now we need to write js which will reload the page on selection of dropdown.

$(document).ready(function(){
    jQuery('.sort-per-page select.num').on('change', function(){
      window.location.replace(jQuery(this).val());
    });
});

In above code after the dropdown is selected the page reloads and adds views parameter and respected value.

Now we get the url parameter and set the limit variable value.

{%- assign limit = 9 -%}

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
{{ pageUrl }}
{%- for i in (1..1) -%}
	{%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
	{%- if pageUrl contains "view=9" -%}{%- assign limit = 9 -%}{%- endif -%}
    {%- if pageUrl contains "view=12" -%}{%- assign limit = 12 -%}{%- endif -%}
    {%- if pageUrl contains "view=24" -%}{%- assign limit = 24 -%}{%- endif -%}
    {%- if pageUrl contains "view=36" -%}{%- assign limit = 36 -%}{%- endif -%}
{%- endfor -%}

{% paginate collection.products by limit %}
   .....

In above code, the url is captured and parameters are being analysed and set the limit value.

Now when you select the dropdown in product listing page the page gets reload and renders the number of products as selected. Also the patination work depending on the products per page number.
Cheers !!

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts