How do I implement Infinite Hits on the search result page and collection pages of my Shopify website?

Here are the basic steps to follow:

1. Set the pagination
The first thing to do is to set the paginationLimitedTo settings. You can do this in your Algolia Dashboard by going to Indices >> presumably "shopify_products" >> Configuration >> Pagination and Display >> Pagination:



2. Import the non-bundled infiniteHits widget
This step is detailed in this documentation we created. 

3. Replace the <hits> widget with the <infinite hits> widget
Before doing customization to your current theme, we suggest you to make a copy of it in case anything goes wrong. You should be able to see if you successfully duplicate it by simply going bellow, in the “Themes library” section.



Look for the below piece of code in algolia_instant_search.js.liquid.

If you did not change anything in this file and are still using Instant Search v1 it should be near line 262.
If you did not change anything in this file and are using Instant Search v4 it should be near line 644.

// Hits 
instant.search.addWidget(
instantsearch.widgets.hits({
container: '.ais-hits-container',
hitsPerPage: instant.hitsPerPage,
templates: { // other code settings ...

Replace this by the following:

instant.search.addWidget(
instantsearch.widgets.infiniteHits({
container: '.ais-hits-container',
hitsPerPage: instant.hitsPerPage,
templates: { // other code settings ...

According to the documentation of the Infinite widgets, this will display the first N items normally like the hits widget, however, this will also display a load more result button. You can find more information about this widget in the following documentation:

https://www.algolia.com/doc/api-reference/widgets/infinite-hits/js/

4. Deactivate the pagination widget
Make sure to comment the pagination widgets part located at the bottom of algolia_instant_search.js.liquid using “//” :

// Pagination 
// instant.search.addWidget( 
//  instantsearch.widgets.pagination({ 
//    container: '.ais-pagination-container', 
//    padding: 2, 
//    maxPages: 20 
//  }) 
// );

For future reference, if you are looking for more general information on customizing the Instant Search Results page, this documentation should be helpful.

Last reviewed 21-04-22.