What happens when your customers can’t find products or services on your website?
They don’t buy your products or services.
No purchase = No money = 😭
A client of ours experienced this issue. They had a hybrid website with half of their site on Shopify and the other half on HubSpot CMS. Their search function didn’t play nice across the entire site.
They asked us to solve the problem, and we did.
Sometimes there are problems that seem insurmountable at first glance, but as you take the time to really dive deep and get into the nitty-gritty of the issues, you begin to realize that small steps will take you to where you need to be.
I mean, you don’t climb a flight of stairs 10 steps at a time.
That’s what our CTO, Corné van Driel, realized when he came across an issue with the search function for one of our clients.
Our client initially had a fully-functional website that was hosted almost exclusively on Shopify which included their blog posts, web pages, products, shop, etc. While they could search by things like product color, SKU, or product collections, they could not search their knowledge base. This, obviously, was a major issue as their customers weren’t able to find relevant articles pertaining to their needs. After all, knowledge is power – and in this regard, our client had none.
So while there was a massive amount of content out there, their customers were unable to find what they wanted when using the website’s search function. This led to a terrible user experience. As was noted in PWC’s 2018 publication on customer experience, just one bad user experience causes 17% of customers to walk away, while 59% of customers walk away after several bad experiences.
That’s just bad for business.
The first small step (for Unlimited kind) was to split their website into two. Web content like blogs, web pages, and the knowledge base would be hosted on HubSpot to give our client access to the super cool features that HubSpot offers CMS clients. The Shopify site held the actual product catalog and the shop.
The issue with this is like the red pill vs. blue pill – you can only choose one search function at a time. On the HubSpot side, you could only search for what was hosted on HubSpot – you couldn’t search for products.
What did we say about product search earlier on? It’s an integral part of a company’s website.
Imagine you have your wallet ready and your inner child is going to make a buying decision that your adult brain knows it shouldn’t (don’t lie to yourself, you know you’ve done it) only to not be able to even find it. You search by what you imagine the product description and color to be and still nothing.
To be honest…it’d ruin my week.
Corné knew this simply wouldn’t cut it, so he took another step up those figurative stairs to reach the top.
Algolia – is it a bird? Is it a plane? No! It’s a third-party search engine!
By using an Algoia-provided plugin for Shopify, Corné was able to set our client’s website up to automatically index products from Shopify into the Algolia search database.
But that isn’t all.
There are a crazy amount of customization options in Algolia that help the company and its customers. For example, you can customize the attributes for an index – product price, color, variant, SKU, etc. – as well as what contents are indexed and what is ignored.
On top of that, there are things called “searchable attributes” that give you even more flexibility in customizing your user search experience. You’ve got:
- Synonyms allow you to translate everyday words your customers use to search for your products.
- Word proximity match allows you to define how closely your customers need to match a word.
- Exact matching forces certain things to be searched by exact terms.
- Segmentation and decompounding allow you to break portions of your product name out so that you can query individual sections instead of the full product name.
I could go on with all of the customization options, but I’ll leave some to the imagination.
These options not only gave our client control but also gave them the ability to change how the search engine works and behaves for their customers. It allowed them to create a custom experience and to help their customers find what they were looking for in a few short clicks.
In addition, our client was then able to reindex items, see how often their search is being used, and see what the most popular searches were – this information, for example, could then be used to make decisions on product naming or what the include in the boy text of a product.
Data’s amazing, isn’t it?
Ok, so we solved that problem. There was still, however, an issue.
Even though we were able to access that information, we had no real way to get the information to reliably be available to HubSpot.
Don’t get me wrong, though. There are some solutions on the market for this now, but they just don’t work anymore. Times have changed, but these solutions haven’t been updated to stay current.
It’s just not the vibes we were looking for.
The final step before that moment of “we solved it!” glory was just around the corner – we needed to enable product search on the HubSpot side.
Shopify’s HubSpot integration shares product information with HubSpot, but that information is only available on deals and cannot be searched from the CMS without extensive changes; those changes would not compare to the amount of configuration possible that is offered by Algolia.
Corné cloned the HubSpot search module and effectively created a custom search module that combined HubSpot search for content hosted on HubSpot, and created an additional result list when the search pops up if any product results were found.
These were extensive changes but we won't bore you with debouncing two sets of results and whatnot.
Additionally, changes were made so that when someone clicks or selects search results for things that don’t live on HubSpot, it will forward onto a separate domain on the client-side.
Basically, it forwards them to shop.[customer domain] instead of trying to keep them on www.[customer domain]. It can also internally forward using what HubSpot has for frequently asked questions or blogs that would be used for the client.
Now, it queries all results when you search – blogs, web pages, knowledge base articles, etc. Additionally, and in parallel to, that request, it queries the Algolia index for the product and if it finds results, it includes an additional section below the search results (i.e. below the HubSpot results) that is dedicated to product search.
Pretty cool stuff.
