Usage on collection pages

EDIT: There’s now a beta feature for this. See @charly.poly’s reply to the thread below and its documentation page.

Unfortunately, there’s no current support as of today, in the integration, of the relationship between Products and Collections with Algolia. This means that replacing Shopify’s collection page with Algolia is not supported.

The relationship would be flowing both ways : we need to know the amount of products of a collection, and we need to have the list of collections of a product.

This thread will help clarify why and list what our integration users would like to implement with this.

Technical difficulties

Facts:

  • Our indexing is real-time.
  • To that end, we’re using Shopify webhooks to keep track of the updates.
  • Webhooks don’t include a reason as for why they were triggered
  • Webhooks only contain the object they were triggered on

Probable consequences:

  • => When a product is updated, we don’t know if its change would make it be part or removed of a Smart collection
  • => So we have, on each product update, to do one API call to list all of its associated collections and reindex every smart collection
  • => And we have, on each collection update, to reindex all of its products.

This would mean a huge indexing overhead that we might not be able to handle for our biggest users, so we have to be very careful before implementing this feature.

Potential alternative

If you’re able to put the collections information in tags or metafields, this can be retrieved on a product update.
This would also give you the ability to have variants instead of products in collections.
I would recommend the usage of named tags for this.
Indeed, they are not subject to the same indexing slowdown than metafields and repeating the same named tag will automatically transform the value into an array of values.

Some custom code will then be needed to:

  1. activate the search page on collections pages
  2. on those pages, filter on a specific collection
2 Likes

Great detailed response.
Beside my technical level that is pretty low, maybe, if I assume, it’s the collection page the problem, but what if a normal page is build and something like a
<div id="algolia" class="product_type_test"></div>
In order to already select the facets?

Collections are unfortunately not available as a facet. If you’re planning on using an available facet, like a tag for instance, it’s definitely doable fairly easily.
If you open your search page and click on a facet, you’ll see that it updates the URL with multiple parameters. One of them is the facet, and you can keep only this one to pre-select the facet you’d like to use.

Like for instance: http://algolia-demo.myshopify.com/search?dFR[vendor][0]=Insignia™

Then you can just change your header links to redirect to this specific URL instead of a collection page.

2 Likes

As a follow-up to this answer, you might be looking for a solution that won’t show the filter in the sidebar, or are looking for a way to control this programatically.
In this case, you can read about this here: Shopify: Add a filter to the autocomplete and / or the search page .

Here is a follow-up on “Using Algolia on Collection Page”.
We released an official beta feature called “Collection search page”.

The official documentation can be found here: https://community.algolia.com/shopify/collection_search_page.html

Here are some points to keep in mind:

  • this feature enables to use InstantSearch on the collection page and also faceting on collections.
  • since this feature is “beta”, it can only be enabled on stores with less than 10 000 products.
  • using this feature will increase your monthly indexing operations usage.

I enabled this in our Shopify store according to the instructions page. However, nothing seems to have changed on Collection Page, i.e., Algolia Collection Search is not appearing on Collection Pages. Using Shopify theme Supply. Any ideas? Thanks!

BTW, do you have an example what it should look like when it is working? For example, sample site or screen images? If you do have sample site or screen images, please add to the official documentation page? Thanks.

Additionally, as a suggestion, would you add a separate index setting for Collections index frequency, i.e., have separate index frequency settings for products, collections, pages, blogs, etc. This way you could potentially re-index Collections every 1, 2, 3, 4, 5, 6, 7 days instead of real time re-indexing. This will reduce index operations immensely.

Hi @steve5,

Have you tried to manually “sync your theme” to force the storefront to use the last version of Algolia templates?

We currently do not have a Collection search page demo but will add screenshots on the documentation as soon as it will be available on our demo shop.

Concerning the operations count, we currently do not maintain a “map/frequency cache” to optimize the indexing since it will add complexity.
However, we may consider digging into this subject in the future, as indexing logic will grow in complexity over time.

Regards,

I figured out the issue. Yes. I did both “Synchronize” and even “Install to a new theme”. The issue is with CSS Selector.

The Search / Filtering on Collection Page is very important to us and probably many other sites. Many other search tools, such as SearchSpring and others, already has this built-in without arbitrary number of product limits.

If you do implement map/frequency cache, please consider implementing it as a time-delay request queue, like how smart traffic lights work. When the light is red and it detects there is a car coming or queued up waiting for green light, it will queue the green light request and apply a delay (a minimum time must pass between last green light and next green light). This way, if there is no change in the Collection, then you don’t even need to run the periodic re-indexing.

Thanks for the suggestion!
This is always a complex tradeoff. We’ve considered implementing a buffer in the past (basically the solution you described).

The main issue is that for some stores, updates propagation is really time sensitive.
If we have to pick a time window, this is likely going to be really small.

Also, the logic itself of deduplication of jobs in between 2 green lights is fairly complex, and we need to get it right. There’s a lot of inter-dependence between different types of jobs, and knowing which ones we can delete, reorder or group is a complex problem.

Hi,

I’ve also followed the instructions here: https://community.algolia.com/shopify/collection_search_page.html, but the filter options either don’t show up, or if they do, the products of the collection doesn’t show up, and clicking the filters doesn’t do anything but change the URL.

I believe my problem is the CSS selector, I’m not sure if I am supposed to be targeting the <main> tag of the whole page, the element that wraps my product elements, or some other one. I have tried all of these and can’t seem to connect the filter to the products. Please advise.

Hi @dbny,

Thanks for reaching us.

Your issue seems to be linked to your Algolia index settings.
Could you please send us a message to support+shopify@algolia.com with the following information?

  • Your Algolia APP ID
  • Your Shopify shop URL
  • The previous message describing your issue

We will then be able to handle and fix your issue.

Thanks a lot,