"Inverse" highlight/bolding for searched text

Hey there. We are working on a somewhat custom implementation of Algolia on our site (as we found the Shopify app to just load in too much vs what we actually use and it’s impacting our load times). We are big believers in UX studies around here, and since we don’t have the resources to conduct them ourselves, we lean a lot of places like Baymard.

So there is a highlight helper that will highlight any text the user has typed in within the results. According to this study, however, it is more useful to bold the text that is different from what the user has typed in.
Is there any way to “inverse” the current functionality to achieve this?

Thank you!

Hi @veronica, Thanks for checking and for sharing the study.

We do not have anything out-of-the-box to reverse the highlighting feature so that it bolds the text that is different from what the user has typed in.

The hits response generally looks like:

{
  "hits": [
    {
      "myAttribute": "some value",
      "objectID": "1234567",
      "_highlightResult": {
        "myAttribute": {
          "value": "<em>some</em> value", // have to reverse this yourself
          "matchLevel": "full",
          "fullyHighlighted": false,
          "matchedWords": [
            "some"
          ]
        }      
      }
    }
  ],
  ....
}

If this is the result your team wants they would have to:

  • Inspect the returned hits

  • For each hit, look at the _highlightResult.{attributeName}.value

  • Reverse whatever Algolia considered valid to highlight

  • Display that in the hit template

Overall, custom handling on the frontend by looking at the hits response!

Thank you for the quick reply! I’ll see what myself and our team can do with this.

1 Like

Though I haven’t gotten to the point to actually implement this yet, it just occurred to me that this could probably also be done via CSS. Just bold the text normally and make the items with the highlighted class normal weight.

Of course this whole inverse bold thing will probably only work where text is already limited like in the instant search dropdown, but I’ll definitely be trying this out.

Still, thank you for the insights.