Personalize product display

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 and that your records share similarities, making them eligible for variants.

Preview

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.

1
2
3
4
5
6
7
8
{
  "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.

Configure distinct results

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

• Set attributeForDistinct with "variantKey" in the index settings.
• Configure distinct with the number of variants to show in the search results, either in the index settings or at search time.