Algolia on Shopify Collection Page (using hidden facet)

We’d like to use Algolia’s filtering on Shopify collection pages.

We know Algolia’s Shopify integration can’t use collections as a product facet (for technical reasons), so our solution is to add collection handles to the product manually (as metafields or possibly as tags) so we can create a “hidden facet” on that collection metafield, and automatically select it when the collection page loads.

For example, we would manually assign all products in the “shirt” collection the metafield {"collections":["shirt"]}, use that as a facet in Algolia, but hide the facet from the customer and preselect the shirt facet on the /collections/shirt page.

I’m just wondering if you have any examples of someone doing this successfully, and what if any technical limitations you think we could run into if we were to pursue this.

Please let me know if you need any further clarification. Thanks!

The main difficulty is mostly about finding a way to tag your products with your collections.

You can use multiple times the same named tag for instance to create an array.


Will be indexed as named_tags.collection: ['A', 'B'].

Otherwise, you can use the string array strategy of the metafields in the metafield’s options in our app.

Once you have this indexed, you’ll indeed need to add it as an hidden facet.

Then about the front-end code needed, you’ll first need to detect you’re on a collections page.
In algolia_instant_search.js.liquid, you’ll need to modify the first condition that checks if you’re on the /search page.

Then once you’ve determined you’re on a collection’s page and have extracted the collection from the URL, you’ll need to add a filter at initialization time for the instant search.
To do this, I’d suggest you to check out this answer about how to add filters at initialization time, both for the autocomplete and the instant search: Shopify: How to filter $0 items from auto-complete and search results?.