Search by Algolia
What is online retail merchandising? An introduction
e-commerce

What is online retail merchandising? An introduction

Done any shopping on an ecommerce website lately? If so, you know a smooth online shopper experience is not optional ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Looking for something?

Announcing our PWA Ecom UI Template in React
facebookfacebooklinkedinlinkedintwittertwittermailmail

Get inspiration and speed up your Storefront implementation with this React / Next.js Starter kit.

Anyone who has built an end-to-end Search and Discovery experience knows how demanding it can be to create a robust front-end interface that not only meets software development standards, but also the expectations of end-users in terms of speed and UI/UX best practices. Especially when those experiences serve multiple devices at a time, in particular mobile devices, which represent over 60% of web traffic on B2C ecommerce in 2021.

For several years now, our team has been investing time and resources in the InstantSearch and Autocomplete libraries to provide UI components that developers can use, customize, and extend to compose their interfaces. We’re proud to have empowered thousands of our customers, and look forward to enabling many more in the future. 

Despite these libraries, a non-negligible amount of time and expertise is still required to craft a great experience. Customers still need to figure out how to plug our components into their unique UI/UX design and technology. 

Start with a template, not a blank page

We’re thrilled to introduce our first UI template, focused primarily on ecommerce. The UI Template is a storefront implementation using React / Next.js, which you can use either as a starter kit to build your Algolia-powered solution, or an educational and inspirational resource from which you can cherry pick bits of code.

 

Get started image

 

Live preview

Before we dive into how we built the UI Template, and the elements and components included in the package, let’s take a step back and consider the end-user point of view. Click on the live preview below to test the experience on your own devices.

Try the Live Preview

Or scan it from you phone

qr code pwa ecommerce kit

Functional & technical overview

We built the PWA Ecom UI Template with the end-user experience as a core focus, paying particular attention to making it as production ready as possible. The UI Template’s implementation benefits from the following technology: 

  • Uses the latest version of React Hooks with functional components
  • Includes SEO optimizations (server-side rendering using Next.js, SEO-friendly rooting)
  • Is PWA compliant
  • Scores >90% on WebCoreVitals and Accessibility (via Lighthouse)
  • Is built with TypeScript and Tailwind CSS for theming

From a functional standpoint, the current version of this UI Template focuses on the Search & Discovery experience in the following areas:

  • Homepage, with a focus on Discovery
  • Product Listing Page, with Search & Browse unified into a single experience, allowing end-users to navigate products naturally by combining keyword-based search and facet-based navigation.

Additionally, integrating Algolia Autocomplete.js and React InstantSearch into the template has allowed us to unlock not only the Search & Browse capabilities offered by Algolia, but its more advanced features such as Query Suggestion, Merchandising via Rules, AI Re-Ranking, and AI Personalisation.

In future iterations, the UI template will add more pages, such as a Product Detail page with recommendations, product search review, store locator, and help center.

Finally, in terms of design, the PWA Ecom UI Template is based on the UI and the best practices available in our Ecom UI Design Kit released last summer, which we developed to be as neutral as possible, providing you with the flexibility to make this template fit your brand with minimal efforts and short delivery times. 

A UI template built for commerce, but not limited to a single industry

PWA Ecom UI Template’s essential elements can be adopted for any other use-case and industry, benefiting both the company and the end-users by incorporating best UI practices. Its interaction patterns and best practices, as well as its front-end development logics (e.g., server-side rendering, URL rooting, state management), are relevant for web applications beyond ecommerce. 

We’ve experienced this ourselves when we cherry-picked parts of the UI template (at that time in Beta) to accelerate the development of the Algolia CodeExchange. The main objective of our CodeExchange is to enhance the discoverability of resources available to builders using Algolia.

Preview of the Algolia CodeExchange – In yellow the components re-used from the UI Template

ecommerce template example

Leveraging the UI Template allowed us to meet our tight deadline, and even deliver an experience better than the planned design. The template saved us development and design time by not having to rebuild a mobile-friendly filtering sidebar. This time-saver allowed us to move more quickly to enhance the tool.

 

Get started image

 

Remember, you can use the template in two ways: as a foundation of your future implementation, whether you are re-platforming or upgrading your tech stack architecture to embrace the Headless approach; and as an educational resource from which you can get inspiration and/or cherry pick bits of code based on your needs.

What do you think?

Our development team is constantly improving and optimizing our product. We would love to hear from you: 

  • Has the UI Template been helpful for your use-case? Did you face any challenges while using it?
  • Is there anything missing in this template that should be added in future iterations?

Please share your thoughts in our Community.

About the author
Alexandre Collin

Product Manager - Frontend eXperiences

linkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Using UI kits for creating great ecommerce Search and Discovery experiences
e-commerce

Catherine Dee
Alexandre Collin

Catherine Dee &

Alexandre Collin

Redesigning Our Docs - Part 3 - The UX/UI Phase
ux

Nicolas Meuzard

Product Designer

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski