> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ecommerce UI template

> Build an attractive, first-class search and discovery experience for your online store built on top of best practices.

Get inspired and speed up the implementation of Algolia in your Flutter based cross platform app (Android/iOS).
The Algolia [Flutter helpers](https://pub.dev/packages/algolia_helper_flutter) outlined in this guide will help you build an attractive, first-class search and discovery experience.

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-flutter-autocomplete.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=d01030044489e5bcdc890a0aa6bae056" alt="Screenshot of a mobile search interface with 'shirt' entered, showing recent searches and popular searches like 'shirts' and color variations." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-flutter-autocomplete.png" />

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-filters-size.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=b55a3126741f1f8ba5f0987bc28d29cd" alt="Screenshot of a mobile ecommerce app's 'Filter and Sort' panel showing size options with 'M' and 'S' selected, and a 'See 9 Products' button." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-filters-size.png" />

## Start with a template, not a blank page

The Ecommerce UI template has significant benefits for developers creating an online store:

* **It's production-ready.**
  As a developer, you can tailor the UI template to your business using pre-packaged, customizable components.
  You can re-use as much of the template as you like and customize the rest.
* You get a beautiful, native search and discovery experience.
* The UI template focuses on great user experience and performance.

## What's a UI template?

The Ecommerce UI template helps mobile developers and UI/UX designers build an online store that matches your business needs.
It's a starter package, designed to be mobile-first, optimized for UI/UX using [Algolia's UI design kit](/doc/guides/building-search-ui/resources/ui-kit/flutter), and embracing search and discovery best practices.

The UI template has two main screens:

* **Home page,** which focuses on product discovery
* **Product listing page,** which unifies search and product discovery into a single experience allowing users to find products by combining keyword-based search and facet-based navigation

The UI template uses the best of the Algolia platform:

* [Search and browse](/doc/guides/managing-results/relevance-overview/in-depth/ranking-criteria)
* [Query suggestions](/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/js)
* [Dynamic Re-ranking](/doc/guides/algolia-ai/re-ranking)
* [Sorting](/doc/guides/managing-results/refine-results/sorting#exhaustive-and-relevant-sorting)

The UI template is built with:

* [**Flutter**](https://flutter.dev) for building cross-platform native apps
* [**Algolia Flutter Helpers**](https://pub.dev/packages/algolia_helper_flutter) to implement advanced search features
* [**Algolia Dart API Client**](https://pub.dev/packages/algoliasearch) to connect to Algolia's APIs

To start a new project, see [Getting started](/doc/guides/building-search-ui/ecommerce-ui-template/getting-started/flutter).

## Components

To get an overview of the UI template components, see [Components](/doc/guides/building-search-ui/ecommerce-ui-template/components/flutter)
