How to implement search with Headless Shopify

On-site search should form a critical component of any online store. Thankfully, going headless with Shopify provides a stronger foundation for brands to implement discovery-led shopping experiences and rich search experiences.

Implementing search experiences on Headless Shopify stores

There are two sensible ways to implement search on a headless Shopify storefront:

1. Use of the Shopify API through GraphQL querying. This can be implemented fairly easily using Shopify's Hydrogen framework.
2. Implementation of a third-party service provider or platform, integrated into the headless Shopify storefront.

We prefer to augment our headless Shopify builds with third-party search platforms as part of a composable approach to stack selection. This is because we're able to achieve stronger results and better user experiences using best-fit search platforms.

Algolia is our favored search provider, and we integrate this into headless Shopify storefronts using the Algolia API library and SDKs.

Third party search providers with Headless Shopify

Several strong options exist besides Algolia in terms of search providers, such as Vertex AI, Meilisearch, and ElasticSearch. At Cocoon, we favor Algolia because of its relative ease of implementation, strong developer tool-suite, and richness of its platform. Algolia is also easy for clients to interact with, should they need to, such as to tweak facets and search result behavior.

To integrate headless Shopify with a third-party search provider such as Algolia, data from Shopify (such as the store's products, collections, pages, etc) will need to be inserted into the external provider as records. This will occur via API, but there are various ways to actually implement it.

We're the experts in Headless Shopify.

Your search for answers ends here. Discover our services.

Explore Headless Shopify Services

With static Shopify builds, the search index can theoretically be cleared and re-populated at build time, which is perhaps a little expensive in terms of resource usage, but always ensures fresh data without inconsistency. Anything that's been removed from Shopify is therefore not re-added to the search index, and only active products/content will be re-populated into the index.

Most search providers have a batch API that can be hit in order to add or remove rows more efficiently, and most have the ability to selectively identify updated rows, skipping anything that hasn't been changed since the last batch insertion.

Besides batch updates – and particularly relevant for storefronts that use server-side rendering or incremental static generation, rather than a purely SSG approach – it's also possible to use hooks or lifecycle events to selectively update, add, and remove rows from your external search index, effectively in real-time. 

For sites with content that changes frequently, or where pages are predominantly rendered on the server-side (and thus frequently changing, with content being added, updated, or removed fairly often), event-based hooks or lifecycles are more favorable than a batch update of the search index.

To achieve this, Shopify (and/or your headless CMS) will need to dispatch a webhook or run a lifecycle event upon changes to products or content. 

Shopify's webhooks functionality can be used here, hooking into a custom API endpoint served by a serverless environment that transforms and sends the updated data to Algolia or whichever search platform you're using. In this case, a single record is updated at a time, and can happen fairly instantaneously.

The example here is fairly naive in that it doesn't take into account any rate limits or preferential treatment as to which content is updated in the search index immediately and which content is only updated in the search index upon a site rebuild. 

How you implement it will depend purely on your implementation, the rendering methods that you use, and the frequency of updates to products and content on the storefront in question.

Search for small sites

For headless Shopify sites with a very small product dataset – say, under 50 total products – you can save on costs and stack complexity by implementing a custom search mechanism on the frontend. This relieves the build of an additional search provider, at the expense of a simpler search experience that might prove less dynamic. However, for stores with relatively few products, this can make a lot of sense. A custom search implementation might look something like the following:

Informal chat? Works for us. 🤘

Contact Cocoon for a no-cost, no-obligation consultation.

Let's talk Shopify

1. For small data sets, a static JSON object generated at build time can be efficiently queried from an input field and some simple filters.
2. Or, a Shopify GraphQL query that parses the user's query as a filter parameter can be sent via middleware on the server-side from inputs on the frontend.

Remember, this works best for very limited data sets (for instance, if you're selling 50 products or less), as larger stores will require a more advanced search implementation in order to deliver the best experience.