Adding a Load More Results Button to the Search Page on Clerk.js 2

All new Clerk.js 2 Designs for Search Pages come with a Load More Results button included.

However if you are using an older version of the Designs, you can easily add it afterwards.

This is the code you need:

{% if hits > products.length %}
    <div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Show More Results</div>
{% endif %}

Simply paste this code in the bottom of HTML in your Search Page design:

You can even choose how many new products you want to load when the button is clicked by changing the number 40 to any other number. For example 60:

'#{{ content.id }}', 'more', 60)