Product variants

If your products come in different variants — like a tool in multiple colors or a laptop with various storage options — the product variants feature in your digital assistant can make it easier for users to see and choose the right option.

Once enabled, you can customize how variants appear in both the Top Product and Recommendations components. You’ll have full control over the image, text, and tooltips for each variant style.

Preconditions

• The assistant must be connected to Data Platform.
• The assistant must be using an Experience Designer theme.
• The Experience Designer theme should be updated to a components version higher than 5.49.1.

Set up product variants

Step 1: Setup in Data Platform

In your catalog, make sure that you have a column for grouped identifiers that link the product variants.

In Data Platform > Pipelines, select the the grouped identifier during attribute mapping. Once mapped, you should be able to see the variants grouped under each product in the catalog.

Step 2: Setup in Conversation Studio

• Select your Digital Assistant and go to the Design tab in Conversation Studio.
• In the right-hand menu, turn on the "Enable Product Variants" toggle.

• Configure the following settings:

1. Variant attribute: This is the title users will see (e.g. "Choose color"). You can later choose to display or hide it in Experience Designer settings.

2. Variant style
   • Image Text – Displays an image alongside the variant name.
   • Dropdown – Users select a variant from a dropdown list.
3. Source for attribute values - Select the attribute from your Data Platform catalog. For example, the attribute color can be used to create product variants based on color.
4. Image Source Attribute - If you selected the "Image Text" style, this is where you can set up the variant images by selecting the column in your catalog that contains them. This column might be different from the main product image column.

For .png images, certain Experience Designer settings (like hover effects) will work better.

3. Setup in Experience Designer

You can adjust where the variant selection appears in the Top Product and Recommendations components.

Open Experience Designer and navigate to your assistant's Results Page. When enabled, product variants will appear on the canvas, where you can style them.

Select the Product Variants component and style:

• General settings – These apply to the entire component.
• Variant style settings – Different options for Image + Text and Dropdown displays.

Use "Present Mode" to preview how the styles look and behave in real-time.

Styling options

You can customize:

• Variant title – the text that appears above the variants (e.g. "Choose color")
• Image and text – how the variant options are displayed
• Tooltips – additional context or descriptions which show when users hover over a variant

If you want to show the title, such as "Choose color", make sure to switch on the Title toggle in the Product Variants component.

Configure availability labels

For products with multiple variations, some options may not be available together. You can customize the message displayed when this happens.

• In Experience Designer, select the Product List component on the canvas.
• In the right-hand settings menu, nagivate to Product Variants > Dropdown > Item availability.
• Switch on the toggle for "Item availability".
• Set unavailable variant labels.
  • {availableVariants} – Lists the available variant options.
  • {unavailableVariants} – Lists the unavailable variant options.

You can use predefined variables to dynamically insert available and unavailable variant names into your messages, for example:

• "Not available in {unavailableVariants}"
• "Available only in {availableVariants}"

How variant selection works

When users interact with a digital assistant, product variants help them compare options and select the best fit. If a chosen variant is unavailable, the system will highlight the conflict and suggest an alternative.

For example:

• If a user selects 512GB storage, but it’s not available in Gold, they will see a message: "512GB is not available in Gold."
• If they proceed, the system will suggest an available color instead (e.g. Silver).