Displaying correct swatch/colour when searching for "red mug"


Hi, we’re using Magento and have integrated Algolia fullpage/instant search (site due for relaunch imminently, but it will be at www.printkick.com)

One thing i’ve been interested in is showing the correct image when a customer searches for a colour word within their text. E.g. typing “red” shows all red products (these are swatches in Magento).

The colour word would effectively be excluded from the search and only modify the image shown to the customer. The rest of the search phrase would be used to display relevant results.

Is this something that other stores have done, or is there any guide on how it could be achieved?

EDIT: Exactly as described in this Baymard article: https://baymard.com/blog/color-and-variation-searches


for swapping images, this works out of the box (based on the facet, not sure if for query term), there is a config value for this. But you need to make sure the attribute is called “color”, that is hardcoded. Otherwise, see Configurable products - where we are and where to go how we achive that in a more general approach


Hi Alex, thanks for the quick reply. Yes, I was looking for something more akin to a natural language processing feature where the query term is used as a facet


HI Aman,
I haven’t got my head around how this matching of query term->facet works, but the use case with the color is easy, as we define color as a searchable attribute and place that high in the search attribute list.
But this obviously requires the magic of distinct I described in the other post.


Hi Alex, there’s a good article on why it might be useful here: https://baymard.com/blog/color-and-variation-searches?

Is there anyone else who could help with the high level view of how we would convert text input into activating a colour filter?

Is it possible to do this with query rules?


Hello @aman,

the feature @alex1 describes works with query as well: https://github.com/algolia/algoliasearch-magento-2/blob/master/view/frontend/web/internals/common.js#L97-L116

You need to have set attribute color as searchable attribute and each time someone is searching for red tshirt, it’ll detect the red and display red images. It won’t remove the word red from the query tho.

This can be achieved with query rules. In Magento, just switch “Create Query rule?” column to “Yes” in facets configuration next to color attribute and it’ll work :slight_smile:

Let me know how it works for you :raised_hands:

1 Like

Hi Jan, thanks a lot for this! Will forward on to the dev team :slight_smile:

1 Like

Hi Jan, we got it working! https://www.printkick.com/

Try things like “red mug” “black umbrella” “yellow bag” etc. Magic!

Thanks for your help @alex1 too!