Search by Algolia
Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

Best practices of conversion-focused ecommerce website design
e-commerce

Best practices of conversion-focused ecommerce website design

The inviting ecommerce website template that balances bright colors with plenty of white space. The stylized fonts for the headers ...

Catherine Dee

Search and Discovery writer

Ecommerce product listing pages: what they are and how to optimize them for maximum conversion
e-commerce

Ecommerce product listing pages: what they are and how to optimize them for maximum conversion

Imagine an online shopping experience designed to reflect your unique consumer needs and preferences — a digital world shaped completely around ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

DevBit Recap: Winter 2023 — Community
engineering

DevBit Recap: Winter 2023 — Community

Winter is here for those in the northern hemisphere, with thoughts drifting toward cozy blankets and mulled wine. But before ...

Chuck Meyer

Sr. Developer Relations Engineer

How to create the highest-converting product detail pages (PDPs)
e-commerce

How to create the highest-converting product detail pages (PDPs)

What if there were a way to persuade shoppers who find your ecommerce site, ultimately making it to a product ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Highlights from GopherCon Australia 2023
engineering

Highlights from GopherCon Australia 2023

This year a bunch of our engineers from our Sydney office attended GopherCon AU at University of Technology, Sydney, in ...

David Howden
James Kozianski

David Howden &

James Kozianski

Enhancing customer engagement: The role of conversational commerce
e-commerce

Enhancing customer engagement: The role of conversational commerce

Second only to personalization, conversational commerce has been a hot topic of conversation (pun intended) amongst retailers for the better ...

Michael Klein

Principal, Klein4Retail

Craft a unique discovery experience with AI-powered recommendations
product

Craft a unique discovery experience with AI-powered recommendations

Algolia’s Recommend complements site search and discovery. As customers browse or search your site, dynamic recommendations encourage customers to ...

Maria Lungu

Frontend Engineer

What are product detail pages and why are they critical for ecommerce success?
e-commerce

What are product detail pages and why are they critical for ecommerce success?

Winter is coming, along with a bunch of houseguests. You want to replace your battered old sofa — after all,  the ...

Catherine Dee

Search and Discovery writer

Why weights are often counterproductive in ranking
engineering

Why weights are often counterproductive in ranking

Search is a very complex problem Search is a complex problem that is hard to customize to a particular use ...

Julien Lemoine

Co-founder & former CTO at Algolia

How to increase your ecommerce conversion rate in 2024
e-commerce

How to increase your ecommerce conversion rate in 2024

2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How does a vector database work? A quick tutorial
ai

How does a vector database work? A quick tutorial

What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...

Catherine Dee

Search and Discovery writer

Removing outliers for A/B search tests
engineering

Removing outliers for A/B search tests

How do you measure the success of a new feature? How do you test the impact? There are different ways ...

Christopher Hawke

Senior Software Engineer

Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

Algolia's search propels 1,000s of retailers to Black Friday success

In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Back in November 2015, we released the first full version of InstantSearch. We’ve received tons of feedback, leading to over 11,000 commits and 3,300 stars on GitHub as we continually refine this library. Now that we’re on v4, we figured this would be a good time to jot down the thought process behind problem-solving with InstantSearch.

We’ll keep this short, so it’ll be a good resource for you to come back to, but the gist is that whenever you need to tackle adding a new feature with InstantSearch, you’ll follow these three steps:

Making good use of premade widgets

Right out of the box, InstantSearch comes loaded with tons of interesting widgets that incorporate nearly every functionality Algolia offers. Almost anything you’d want to build in a typical search interface can be constructed by piecing together these widgets like Lego.

Take a look at this showcase for a good example of how they can be pieced together.

Here’s a good example of our friends at Starschema putting this into action. Before doing anything else, their engineer Soma was able to plan out the entire UI with a simple wireframe, knowing that Algolia’s widgets would fill in the rest. Steps 3.1 to 3.8 show the premade widgets that he chose to include and how he went about implementing them.

There’s more detail in the article, but the gist of it is that you call the addWidgets function on the InstantSearch object, passing it an array of widget objects.

Extending the premade widgets to include custom functionality

To continue the Lego illustration, there’s only so much you can build with the basic blocks. To build something truly interesting, realistic, or complicated, you’d need to start experimenting with colors and dimensions and connection points. Most times, it wouldn’t make sense to design a completely new brick, but to modify an existing one to fit.

That’s the same approach we take with InstantSearch widgets: before jumping all the way to building a new widget, we try to modify an existing one to do what we’re looking for.

This is the guide to customizing an existing widget. It involves hijacking just part of the widget to add some new functionality while not getting rid of what makes InstantSearch so valuable. You could edit just the logic part by creating a connector, or just the textual part for translation purposes, or just the styles to make the widget look different, among other things.

The widgets are made up of their renderer (for styles and markup) and their connector (for logic), and there are myriad ways to mess with either of those.

Building new widgets from scratch into InstantSearch

But say you’re looking for something so radical that there’s no clear path of modifications you can make to get from an existing widget to what you want. Your only way forward is to create your own new widget from scratch.

Like we mentioned, a widget is formed by a renderer (for styles and markup) and a connector (for logic) working together, so to make your own widget, you just need to create those two subcomponents. There’s an excellent guide on that here

With these steps, you can build almost anything with InstantSearch, even non-Algolia functionality. We’ve experimented with this process a lot here on the blog and with our customers, and every time it’s proved to be a very flexible and powerful system that gives you a lot of options without being a burden for more straightforward implementations.

We promised we’d keep this short, so if you’ve got any more questions, feel free to ping us on Discourse. Happy building!

About the author
Jaden Baptista

Technical Writer

Recommended Articles

Powered byAlgolia Algolia Recommend

Connectors, Docs & the Future — a Deeper Look into InstantSearch.js v2
product

Alexandre Stanislawski

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski

Announcing instantsearch.js: Everything you need for great search in one library
product

Alexandre Stanislawski