The PWA Ecom UI Template is an open-source, MIT-licensed ecommerce starter kit from Algolia, built with React 18 and Next.js, that provides a complete search and discovery storefront UI. It takes an Algolia index of product data as input and renders a fully responsive product listing page with search-as-you-type, faceted refinements, sorting, and personalization, with output as a deployable Next.js application. The template is designed in accordance with the Algolia ecommerce UI design kit and focuses on performance and customization. A live preview of the latest version is deployed on Netlify.
What is the PWA Ecom UI Template?
The PWA Ecom UI Template is an open-source, MIT-licensed ecommerce starter kit from Algolia, built with React 18 and Next.js, that provides a complete search and discovery storefront UI. It takes an Algolia index of product data as input and renders a fully responsive product listing page with search-as-you-type, faceted refinements, sorting, and personalization. The template follows the Algolia ecommerce UI design kit and is available as a live preview on Netlify.
Key Features
- Unified search and browse — A single product listing page merges searching and browsing the catalog, using core InstantSearch widgets like Hits/InfiniteHits, RefinementList, HierarchicalMenu, SortBy, and RelevantSort.
- Custom widgets as NPM packages — ColorRefinementList, SizeRefinementList, and LoadMoreWithProgressBar are distributed as separate NPM packages; additional custom widgets (ExpandablePanel, RefinementsDropdown, RatingSelector, NoResultsHandler, BreadcrumbWithQuery) are included in the repository.
- Full Algolia platform integration — Supports fuzzy search, synonyms, AI Re-Ranking, AI Personalisation, the Insights API for sending events, Advanced Analytics, A/B Testing, Merchandizing, Rules (Banners), Query Suggestions, and multiple sort orders.
- PWA and mobile-first — Fully responsive and PWA compliant, with a mobile-first approach; the template reaches more than 90% on all Lighthouse scores.
- Modern front-end stack — Uses React 18, Next.js for Server-Side Rendering, TypeScript, Tailwind CSS for theming, and Autocomplete.js for the search box experience.
- Extensible widget architecture — Builds on InstantSearch widgets and Autocomplete.js plugins, allowing developers to customize and extend components; the template is modular by design.
Who is it for?
- Ecommerce developers who want a production-grade reference for building an Algolia-powered search and discovery experience without wiring up InstantSearch from scratch.
- Product teams at online stores that need a mobile-first, PWA-compliant storefront with merchandizing, personalization, and analytics features already integrated.
- Agencies building custom ecommerce sites who need a proven, customizable starting point based on the Algolia ecommerce UI design kit.
Use cases
- Independent merchants: launch a polished product listing page with faceted navigation, ratings, and size/color filters in a short time, then customize the Tailwind theme to match their brand.
- Front-end teams: reuse the packaged custom widgets (ColorRefinementList, SizeRefinementList, LoadMoreWithProgressBar) inside their own React InstantSearch applications.
- Algolia users: study the reference implementation to learn how to combine AI Re-Ranking, Rules banners, and Query Suggestions in a single product search interface.
How does the template work?
The template uses React InstantSearch with core widgets customized through connectors, plus Autocomplete.js plugins for the search experience. Developers connect it to their Algolia index, configure facets and sort orders, and run the Next.js application with Server-Side Rendering. Getting started instructions are available in the Algolia documentation.
Pros and cons
- Pros: Open source under the MIT license; all Lighthouse scores exceed 90%; includes advanced Algolia features like AI Re-Ranking, personalisation, and A/B testing.
- Cons: Browser support is limited to the last two versions of Chrome, Edge, Firefox, and Safari; the Recommend integration is marked as in progress (🔄) rather than a completed feature.
FAQ
Is the PWA Ecom UI Template free?
Yes, the template is released under the MIT license, so it is free to use, modify, and include in commercial projects. The only requirement is that you have an Algolia index to connect to for search data.
Do I need an Algolia account to use it?
The template depends on Algolia's search platform, so you need an Algolia application with product data indexed and API credentials configured. The front-end code itself is self-contained and open source.
How do I get started?
The official Getting Started page in the Algolia documentation walks through installation, connecting your index, and running the Next.js application. A live preview is also available on Netlify to see the template in action.
Can I customize the theme?
Yes, theming is handled with Tailwind CSS, and the template is designed to be modular and extensible. You can create a custom theme, add new pages, and replace the included widgets with your own.
