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

# Get started with the Ecommerce UI template

> Learn how to build an online store front with Algolia's Ecommerce UI template.
You can use the sample data, or customize the app to connect your data.


export const Records = () => <Tooltip tip="A record is a searchable object in an Algolia index. Each record consists of named attributes." cta="Algolia records" href="/doc/guides/sending-and-managing-data/prepare-your-data#algolia-records">
    records
  </Tooltip>;

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

export const ApplicationID = () => <Tooltip tip="A unique alphanumeric string that identifies an Algolia application." cta="Application ID (dashboard)" href="https://dashboard.algolia.com/account/api-keys">
    application ID
  </Tooltip>;

export const Application = () => <Tooltip tip="An Algolia application is a self-contained environment with its own indices, configuration, and API keys. Applications don't share data or settings with each other.">
    application
  </Tooltip>;

export const APIKey = () => <Tooltip tip="An alphanumeric string that controls access to the Algolia APIs. It defines what actions are allowed, such as searching an index or adding new records." cta="API key" href="/doc/guides/security/api-keys">
    API key
  </Tooltip>;

You can run the Ecommerce UI template in one of two ways:

* **Using the `latency` Algolia application.** If you use the `latency` application, you can't customize <Records /> or index configurations (such as settings, Rules, or synonyms).
* **Using your own Algolia <Application />.** To do this, you must [send your data](/doc/guides/sending-and-managing-data/send-and-update-your-data) to your Algolia <Index />.

## Run the Ecommerce UI template

1. [Install Flutter](https://docs.flutter.dev/get-started/install)
2. [Fork the Flutter ecommerce UI template repository](https://github.com/algolia/flutter-ecom-ui-template)
3. [Clone the forked repository](https://help.github.com/articles/cloning-a-repository) to your local machine
4. Install the dependencies: `flutter pub get`
5. Configure the [environment variables](/doc/guides/building-search-ui/ecommerce-ui-template/getting-started/flutter#connect-your-algolia-app-to-the-ui)
6. Start the application: `flutter run`

### Connect your Algolia app to the UI

Change the values of the Algolia credentials in the `lib/credentials.dart` file.
To use the sample data from Algolia's Ecommerce UI demo, leave the values as they are.

The following variables are used:

| Name               | Value                                     |
| ------------------ | ----------------------------------------- |
| `applicationID`    | Your Algolia <ApplicationID />            |
| `searchOnlyKey`    | Your Algolia search <APIKey />            |
| `hitsIndex`        | Your Algolia index name                   |
| `suggestionsIndex` | Your Algolia Query Suggestions index name |

## API client

To use the Algolia API from your Dart app, you have these options:

* Use the [Dart API client](https://pub.dev/packages/algoliasearch) (used in this guide)
* Call the [API methods](/doc/rest-api) directly using the [`http`](https://pub.dev/packages/http) package.

## Structure

If you want to experiment with customization, the Ecommerce UI template is structured as follows:

* `lib/data`: services and data providers
* `lib/model`: model objects for products data representation
* `lib/ui/screens`: applications screens and their components
* `lib/ui/widgets`: standalone UI widgets used on multiple screens

### Use your own data and configurations

The demo application data and configurations can be found in the `dataset` folder as JSON files that you can [upload to Algolia](/doc/guides/sending-and-managing-data/send-and-update-your-data):

* `products_configuration.json`
* `products_dataset.json`
* `products_query_suggestions_configuration.json`
* `products_query_suggestions_dataset.json`

## Example product record

The following is an example of a typical product record:

```json JSON icon=braces theme={"system"}
{
  "objectID": "A0E200000002GZB",
  "name": "Michael Kors – shopper "Jet Set Travel"",
  "description": "The sleek leather shopper from Michael Kors is the perfect every day bag, which offers enough space for the most important essentials in the office while traveling or shopping. The longer handles allow you to carry the bag comfortably on the shoulder, while the black leather and silver tag provides subtle elegance. A real investment piece that will accompany you from season to season.",
  "brand": "Michael Kors",
  "gender": "women",
  "hierarchical_categories": {
    "lvl0": "Women",
    "lvl1": "Women > Bags",
    "lvl2": "Women > Bags > Shopper"
  },
  "image_urls": [
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638375538/flagship_sunrise/A0E200000002GZB_0.jpg"
  ],
  "reviews": {
    "rating": 4,
    "count": 42,
    "bayesian_avg": 3.906976744186046
  },
  "color": {
    "filter_group": "black;#333",
    "original_name": "black"
  },
  "available_sizes": [
    "one size"
  ],
  "price": {
    "currency": "EUR",
    "value": 343.75,
    "discounted_value": 0,
    "discount_level": -100,
    "on_sales": false
  }
}
```