Although Shopify is an incredible resource for eCommerce, Shopify intentionally limits the number of products you can access in the collection object to 50 per page. In other words, the maximum number of products you can access and display on your collection page by default is 50. For some, this may be enough, but this is 2020, you can edit and customize literally anything, and this is not excluded. In order to get around this pesky product limit, I’ve got a little trick that you can use.

The default code to output products from a collection looks like this...

{% for product in collection.products %}
    {% comment %} The code to output each product goes here {% endcomment %}
{% endfor %}

And this will output the first 50 products from the collection. But what if we need to display more than 50? Maybe we want to display all products in a collection on a single page, so that we could perhaps lazy load them as the user scrolls down the page rather than forcing the user to click to the next page, which in this day and age might just be the extra effort that causes someone to bounce.

The key to getting around the product per page limit is to leverage the paginate object. You will see this in a typical collection.liquid template in most standard shopify themes and it usually looks like this:

{% paginate collection.products by 12 %}
    {% for product in collection.products %}
        {% comment %} The code to output each product goes here {% endcomment %}
    {% endfor %}
{% endpaginate %}

In the example above the template outputs a maximum of 12 products per page, since the loop is wrapped inside the paginate object that specifies 12 products.

All we need to do, is increase that value to a very high value that your collection is unlikely to exceed such as 1000, so that we effectively ensure that all products are always returned on the first page of the paginate object, and ultimately it returns all products in the collection in a single object that we can loop through in one pass.

{% paginate collection.products by 1000 %}
    {% for product in collection.products %}
        {% comment %} The code to output each product goes here {% endcomment %}
    {% endfor %}
{% endpaginate %}

And that’s all there is to it! 

This simple trick means you get total control over how you format your collection page, rather than being stuck with the default X number of products per page format - which let’s face it isn’t always ideally suited to more dynamic/interactive page designs. Take control over your Shopify page and show as many products as you want to, it might just be the small change that leads to fewer bounces and more conversions!