Shopify collections with custom InstantSearch

Hi all,

So i’m working on a Shopify store using InstantSearch to power the filtering of products - specifically on Shopify collection pages. Ive installed the app and when i use the default setup everything works great.

However, i’ve added my own styling / refinements in assets/search_ui_instant_search as per the docs. The filters and sorting is all working fine with the custom styles / js, however the initial results aren’t matching the collection handle.

For example i go to /collections/a but all products (collections/all) are displayed. This doesn’t happen when i use the default InstantSeacrh collection page.

Ive added:

const search = instantsearch({
  indexName: 'xxx', 
  routing: {
    stateMapping: instantsearch.stateMappings.simple(),
  searchParameters: {
    disjunctiveFacetsRefinements: {
      product_type: ['a']

Which should apply my refinementList widget but apply the ‘product_type’ to match the collection handle:

      container: '#refine-type',
      attribute: 'product_type',
      operator: 'or'

Does anyone have any ideas?


i’ve used initialUiState, rather than searchParameters to set the default filters of ‘product_type’ to match the handle of the collection on load. This seems to work now but it doesn’t feel right

Got to a solution in the end incase anyone else has the same issue:

let collectionHandle = null;

let matches = window.location.pathname.match(/\/collections\/([^/]+)/i);
collectionHandle = Boolean(matches) && matches.length === 2 ? matches[1] : null;


    filters: `collections:${collectionHandle}`,

Uses the direct API do query the current collection as a facet: