Best way to handle single index to multiple containers in Shopify

I am currently building a collections page were we want to have a particular behaviour where the hits are grouped by attribute and then distributed to respective containers, I fell that the answer is to Create a custom widget or using connectHits.

Here is a CodePen with the behaviour that I want, where I used connectHits() to achieve it.

My questions are:

  1. Is there a better/recommended approach?

  2. How to implement (were should I put the custom widget code?) it in the Shopify context?

  3. Is it possible to apply this still using the algolia_instant_search_product.hogan.liquid template and Hogan as compiler?

Would be grate to be able to do something like the following ( I’ve cut out part of the code make it more readable, to see the full code go to the CodePen) :

Pass the template to the custom widget:

  // ... some code here
    container: document.querySelector('#hits'),
    templates: {
        item: instant.templates.product,

And then use hogan to compile inside the render function:

const renderHits = renderOptions => {
    // ... some code here
            const itemName =;
            el.innerHTML += Hogan.compile(widgetParams.templates.item);

    // ... some code here

Hope someone can help me!



Your approach looks correct overall.
Regarding the customization, here is the relevant documentation:

Not 100% but I think the key thing is that the html containers being used by your widget need to match the ones in the hogan template. I think you need to ensure that all the containers your widget uses are present in the template.

I hope that helps.