Build frontend

In this sprint, you will use Algolia’s libraries to build a frontend based on the mockups you've already created. Once you’ve completed the tasks below, you can move onto the next sprint.

Build front end image
Register for Webinars and view the Recording

Team members

Depending on the size of your company, some of these roles may be the same person. This sprint it is important we identify these roles and get in contact with them.

Project Manager

Planning and project oversight

Front End Engineers

Build application and visual and interactive elements

Shopify Integration

Shopify setup


Recommended integration

Using Shopify templating

No customization required (Styling can be customized)

Use the bundled InstantSearch library via the plugin 

Using Shopify templating

Customization required (Adding and removing widgets)

Use the bundled InstantSearch library via the plugin and edit this in the Shopify theme editor

Custom Storefront or headless Shopify

Customization required (Adding and removing widgets)

If you’re using a custom storefront or headless Shopify you can use instantsearch directly in your codebase


Magento set up


Recommended Integrations

Standard Magento

No customization required (Styling can be customized)

You can enable the autocomplete menu, category page and results page directly from the plugin

Standard Magento

Customization required (Adding and removing widgets)

To customize the results page, category page or autocomplete you will need to install the customAlgolia extension and override the templates or add front-end events

Headless Magento

Customization required (Adding and removing widgets)

If you’re using headless Magento you can use InstantSearch directly in your codebase

Salesforce Commerce Cloud

SFCC set up


Recommended integration

Standard SFCC

Customization required (Adding and removing widgets)

You can customize an InstantSearch implementation using the SFCC cartridge.

SFCC Headless

No customization required (Styling can be customized)

You can connect your frontend to headless SFCC using Algolia’s boilerplate, a React front-end, or Mobify.

If you aren't using the above integrations, and for any Search Results or Category Page implementation, we recommend to use InstantSearch in conjunction with Autocomplete, as it improves both developer and user experience.  InstantSearch is available in the following flavors:

InstantSearch provides  widgets whose styling you can customize. If you want to change the HTML of a widget, it’s best to  use a connector so that the query state can be preserved.In case you need further customization, you can create a fully custom widget. Follow the building the search UI track to learn more.

algolia autocomplete


For an autocomplete experience, including a  Query Suggestions implementation, the Autocomplete library is the way to go, especially on mobile where real estate is limited. An Autocomplete is made of sources and plugins, where plugins can add a source and react to state changes.  

Algolia Recommend

Recommend Library

Recommend is a JavaScript UI library for the Algolia Recommend product to display recommendations on your site. Recommend exposes two UI components, one for each Algolia Recommend model: Frequently Bought Together and Related Products

You can easily bootstrap an InstantSearch implementation using create-instantsearch-app. The InstantSearch.js Readme, ecommerce demo sandbox, and the getting started guide are also great starting points.



To get started with Autocomplete, read about the core concepts to learn more about underlying principles, like sources and state. Then try out the playground where you can fork a basic implementation and play around. Once you’re ready, you can install the library and get started.

Sending user events is required to unlock click and conversion analytics and advanced Algolia features. It’s best to implement events when you are first developing your frontend. Don’t forget to use your planning documents from the Design UI sprint.




If you are using Algolia’s supported events then you need to add Algolia related information including the queryID, index and the objectID. Then you can add the Algolia destination to the Segment dashboard. If you aren’t using the supported events already, you can implement them, or use the Algolia nsights library as detailed above.

google tag manager

Google Tag Manager

First, import the official Algolia Search Insights template. Then, you can set up Tags to send events to Algolia’s insights API. After this, leverage your existing click and conversion Triggers,or create new ones.

mParticle logo


If you are already tracking events with mParticle, leverage the official Algolia Insights integration available on the mParticle catalog to forward your existing events.

Insights Middleware

InstantSearch.jsReact InstantSearch Hooks and Vue InstantSearch can report events to Insights effortlessly, by setting the appropriate parameter. To send Insights events with React InstantSearch, you can follow this guide.



Algolia supports sending events directly from your Autocomplete and you can enable this via a plugin.

API Clients

You should use an API client to send events if:

  • If you aren’t using InstantSearch in any other flavor than vanilla Javascript or Vue, and want to send events from the frontend, the Insights library is the best way to go. 
  • You can use any of the API clients to send events from your backend.