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

# Personalize product display

> Learn how to personalize the product display in your search results.

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>;

This guide explains how to personalize the visual presentation of search results based on user preferences. By showing variants of products that align with user preferences, such as color choices, you can create a more engaging and relevant search experience. This approach enables users to project themselves into the product and make purchase decisions faster.

## Before you begin

This guide assumes familiarity with [React InstantSearch](/doc/guides/building-search-ui/getting-started/react) and that your <Records /> share similarities, making them eligible for variants.

## Preview

<Frame caption="Search results showing personalized product variants">
  <img src="https://mintcdn.com/algolia/aN8Lr52w2iijNnTe/images/guides/advanced-personalization/personalized-product-display.png?fit=max&auto=format&n=aN8Lr52w2iijNnTe&q=85&s=7c558527a809fcdb5afeae8e798e45f2" alt="Search results showing personalized product variants" width="1900" height="1082" data-path="images/guides/advanced-personalization/personalized-product-display.png" />
</Frame>

In this example screenshot, the search results for "iPod Touch" display personalized variants:

* Color variants exist in blue, silver, black, pink, and yellow.
* Each user sees the variant that best matches their color preferences.
* Only one variant per product appears to maintain clean results.
* The system tracks which variant users click to refine future personalization.

## Structure your records

Each product variant should be a separate record, structured with:

* A shared `variantKey` to group related variants.
* A unique `objectID` for tracking interactions.
* Specific variant attributes, such as color and size.

```json JSON icon=braces theme={"system"}
{
  "objectID": "0b7fe760-e3ce-4b58-81e8-6d1537dbc98e",
  "variantName": "iPod Touch 16GB MP3 Player (Blue)",
  "variantKey": "ipod-touch-16gb",
  "name": "iPod Touch 16GB MP3 Player",
  "color": "blue",
  "price": 189.99
}
```

## Configure Advanced Personalization

In Advanced Personalization, add the `color` attribute to the [attributes for affinities](/doc/guides/personalization/advanced-personalization/configure/setup/indices#select-the-attributes-for-affinities).

## Configure distinct results

Use the distinct feature to display only one variant per product in search results:

* Set [`attributeForDistinct`](/doc/api-reference/api-parameters/attributeForDistinct) with `"variantKey"` in the <Index /> settings.
* Configure [`distinct`](/doc/api-reference/api-parameters/distinct) with the number of variants to show in the search results, either in the index settings or at search time.