Please note providing custom implementation advice is outside of our support scope.
The aim of this article is to assist in providing a general guideline on how you can implement infiniteHitsin your Shopify store, and you may need to customise further to ensure that it meets your requirements.
In this implementation, you will need to use the InstantSearch hooks beforeISStartAddWidgetArray and afterISStartRemoveDefaultWidget.
In conjunction with this implementation, we recommend to review this documentation on App Blocks configuration in which you will need to enable on your Shopify theme.
After enabling the App Blocks on your InstantSearch, follow the steps to add custom widget as per below:
1. Create additional files called algolia_custom_hooks.js and algolia_custom_styles.css under the Assets folder and add the widget that wasn't bundled with App Blocks.
2. Scroll all the way to the bottom and add the InstantSearch CDN above the algolia_custom_hooks.js inside the theme.liquid file. The algolia_custom_styles.css is added before the InstantSearch CDN.
3. Head to the algolia_custom_hooks.js file and remove the hits and pagination widgets
4. Now add the infiniteHits widgets
5. Add the following standard CSS in algolia_custom_styles.css. You will need to customise it accordingly further to your requirement
6. And so this is the final result. If the "show more results" is clicked, we'll append more results to the bottom. You will need to do further CSS styling on the button so it is placed in the right location accordingly.