In the attention economy, every second counts. That’s why search is critical for enterprises. Effective search enables customers to find your brand and discover your products from a sea of competition. It delivers personalized, contextualized results to drive user engagement, using advanced algorithms to gain insights from user buying behavior and search patterns across various interactions. Scalability and performance considerations, too, are essential to search functionality, as businesses must process an exponential growth of data across various systems without sacrificing performance.
Today’s CTOs face the challenge of balancing speed, performance, and cost, while building a scalable tech stack that can evolve with their business. The complexity of data integration across various systems—such as ERPs, CDPs, and PIMs—compounds the difficulty of delivering effective, personalized search results, particularly for enterprises with extensive product catalogs and global operations. Moreover, as data volumes continue to grow, ensuring scalability without compromising performance becomes increasingly vital.
Shopify's composable architecture addresses these challenges, allowing enterprises to leverage best-of-breed components and prebuilt integrations with third-party tools—such as Algolia’s end-to-end AI search-and-discovery platform—to create powerful and compelling search experiences.
Enterprise search and commerce composability with Shopify and Algolia
Shopify’s native search features can service the needs of many diverse companies. These features include custom recommendations, advanced filtering, synonym groups for product descriptions, boosted product discovery based on search results, complementary product suggestions on PDPs, search performance analytics, and more.
Shopify’s robust partner ecosystem also offers enterprises access to various cutting-edge search functionalities, accessible through easy, prebuilt integrations. For example, Algolia's end-to-end AI search-and-discovery platform empowers merchandisers to deliver fast, relevant, and personalized search results and recommendations—driving loyalty, AOV, and conversions. Algolia is a multitenant SaaS solution and an API-first product, with enterprise-grade features including configurable indexes, dynamic query reranking and AI-powered personalization (AI search, browse, recommendations, merchandising studio and analytics). When it comes to speed and performance, Algolia is world class, with the ability to handle catalogues with hundreds of millions of SKUs with multiple variants to power tens of thousands of search queries per second, while delivering top performance levels ("5-9s") globally.
In this blog post, we will delve into reference architectures for integrating Algolia with Shopify, focusing on both the Shopify + Algolia App (headed) and Shopify + Algolia app + Hydrogen React app (headless) models, showcasing how these integrations can provide scalability and accelerate time to value.
Shopify Liquid storefront integration with the Algolia AI Search & Discovery app
The Algolia AI Search & Discovery App enables scalability, real-time updates, and merchandiser-friendly operations through the following key integrations:
-
Indexing: The app uses the Shopify GraphQL Admin API bulk operations to export large datasets of products, collections, blog posts, pages and their associated metafields from Shopify during index creation or full updates. Shopify product and collections webhooks are also used to support an event-driven architecture that instantly syncs updates in Shopify with Algolia indices.
-
Algolia app UI in Shopifyadmin: Algolia’s app UI embeds search and merchandising configuration directly within the Shopify admin panel. Basic settings, like Algolia InstantSearch and merchandising rules, can be adjusted without exiting Shopify. More sophisticated settings can be adjusted through a secure redirect to Algolia’s back end.
-
Search results display on the storefront: Search results are displayed on the storefront through Shopify app embed blocks, which integrate Algolia’s search results into dedicated sections of the Shopify Liquid storefront, configured via the theme editor. This setup maintains a cohesive user experience and high performance, even during peak traffic.
- Product recommendations: In addition to Algolia-powered search results, the app leverages Algolia Recommend to generate personalized product recommendations, surfaced in app embed blocks based on Algolia models such as Frequently Bought Together, Related Products, Looking Similar, or Trending Items.
In summary, enterprises can quickly connect Algolia and Shopify through Algolia’s AI Search & Discovery app. This app powers advanced search functionality through plug-and-play integrations with Shopify’s Liquid storefront through app embed blocks to move the needle on searchability and findability for your customers.
Let’s now take a look at a common composable scenario—a headless build where Algolia is integrated into a Shopify Hydrogen front end.
Headless integration with the Algolia AI Search & Discovery app + Hydrogen React app
In a headless architecture scenario, the integration between Shopify and Algolia uses the Algolia AI Search & Discovery app for back-end indexing jobs as described above. Yet front-end integration to surface search results and recommendations is done via purpose-built React components powered by Algolia packages that can be integrated in your Hydrogen React app via dedicated app routes. (Note: These architectural diagrams are based on an example Shopify Hydrogen React app from Algolia’s public Github repository.)
Let’s take a deeper look at the different elements behind this headless integration:
- React InstantSearch UI library: Algolia provides an open source UI library for React to build your own custom search and recommendation interface in your Hydrogen React app, powered by Algolia.
- Prebuilt React components: The library contains prebuilt components like UI widgets such as <SearchBox> or <RelatedProducts> to return Algolia-powered search and recommendation results. Widgets can be styled with CSS, and Hooks are available to refine the render outputs of the widgets. React server-side rendering is done by wrapping components in the <InstantSearchSSRProvider> and <InstantSearch> root components.
- ‘Custom’ React components: Leverage Algolia libraries like autocomplete-js and autocomplete-core to create your own React search components for Hydrogen. A good example is the <Autocomplete> component that adds the Algolia Autocomplete capabilities to the Shopify search bar in a Hydrogen build. Here is anexample from Algolia’s Hydrogen Github for the <Autocomplete> component.
- App routes: Connect URLs to the React components, creating a flow of pages or views in your Hydrogen storefront that leverages your prebuilt React components to render an interactive, user-friendly UI according to your requirements. The Algolia Hydrogen Github shows how a route like ($locale).search.jsx maps a Hydrogen search results page URL to the Algolia InstantSearch components to render search results powered by Algolia, or how Collection search results are surfaced via the ($locale).collections.$collectionHandle.jsx route.
Headless enterprises can also choose to build their own components. To provide complete flexibility, Algolia also offers API clients the ability to implement a bespoke integration with Shopify, helping customers meet all their specific requirements, regardless of the complexity of their projects. This opens access to underlying data and primitives within Algolia, like indices, records or recommendations that can be coupled with Shopify’s own APIs and libraries to create a custom headless integration that adapts to your architecture.
As shown above, leveraging Algolia’s AI Search & Discovery app for back-end indexing, alongside various prebuilt components for front-end integrations, can quickly integrate Algolia to Shopify headless builds.
How Algolia and Shopify handle complex commerce search scenarios
Algolia designed its integrations around key Shopify primitives to facilitate managing advanced commerce search scenarios. These include:
- Cross-application data mapping and synchronization through metafields: Algolia indexes Shopify’s product and collections metafields, allowing access to the full scope of data on these primitives to feed its search engine results. Metafields are converted into records attributes within Algolia’s indices, which can then be used for facets, algorithm ranking criteria, or merchandising rules. This enables the fine-tuning of Algolia’s search and recommendations algorithm using all available data for each product and collection in Shopify, with no additional development lift. As metafields are a commonly used primitive by Shopify App Partners to map data models to Shopify, they provide an efficient way to make sure apps communicate effectively. For instance, a PIM can synchronize rich product data through to Shopify product metafields, which are then automatically synchronized with Algolia’s indices and a CMS to provide a comprehensive storefront search-and-discovery experience.
- Multi-locale search results optimization: The Algolia app creates one index for each market and language configured in Shopify Markets to provide localized tailored search results to your customers depending on the locale selected on your storefront. A separate index per Shopify Market allows you to fine-tune search configurations in Algolia for a given language/market context, for instance by configuring localized dictionaries, synonyms, query suggestions or ranking rules. Metafields and market-specific pricing are also indexed to return search results in the correct language and currency. Algolia Autosuggest also has a dynamic selector helper for the autocomplete menu to connect to the correct search form URL when users change to a different language/market on your storefront.
- Location-based search results: Algolia also indexes Shopify locations and associated inventory quantities as key value pairs recorded in a locations_inventory record attribute. This allows you to offer searching and filtering by location or BOPIS options as part of your Algolia search results. You can also match locations_inventory records with an indexed longitude-and-latitude locations database to tackle more complex use cases like reranking search results according to a customer’s geolocation and available inventory.
Beyond plug and play: Navigating complex enterprise integrations with Algolia and Shopify
The paths outlined above can provide quick deployment of Algolia on Shopify with minimal integration. Yet, enterprise integrations are seldom ready to go “out of the box.” They typically have several interconnected back-end systems, each with various integration methods depending on the data and integration methods of each partner.
For instance, when a PIM serves as the system of record for product information, enterprises will need to leverage a custom or prebuilt integration between Algolia and the PIM for indexing jobs. Shopify’s extensible data model is well suited to support these multi-interface integrations. Through metafields, essential data is stored on Shopify and can be shared with multiple systems. In addition, Algolia is schema-less and can easily index data from these systems to enrich the search experience (i.e., with inventory data) and aggregate different types of products and content.
In addition, enterprises may want to develop some custom integrations to Algolia, in addition to using some of the preconfigured integrations, depending on factors such as data structure, index size, and expected frequency of record updates. For instance, one way to enable multi-locale search indexing is to retrieve localized product data from Shopify with the Storefront API with the @inContext directive to create localized indexes within Algolia. Algolia APIs offer flexibility in retrieving and exposing data so that enterprises can tailor their search UI to their liking. Merchants can associate Algolia filters with indexed Shopify collection pages to build their own custom filter search results pages rather than using out-of-the-box app blocks and filter logics. For example, Gymshark powers each collection page with Algolia's AI-powered ranking to optimize conversions on each page. Gymshark also created custom Algolia Recommend panels on the cart at checkout to increase AOV.
Conclusion
Effective search is fast, relevant, and personalized. However, navigating the best approach to implement these search features can be quite challenging. CTOs face the delicate task of balancing platform speed and performance with the need for robust features and quick time to value. With various integration methods, including an embedded interface in Shopify’s admin and prebuilt configurations for headless sites, thousands of businesses have chosen to run Algolia’s best-in-class search-and-discovery experience on Shopify, the largest ecommerce platform. With the right tools in place, the possibilities for growth and innovation are limitless.
To learn more about our enterprise technology partnerships, visit our Partner Directory.
