Product recommendations, such as Top Products, Brand Recommendations, Next Products, and Vectorized Recommendations, help your shoppers explore your product catalogue, guiding them to specific products without the need to launch any queries.

interact

Can't quite capture the concept? Learn more about Recommendations. :::

Product recommendation modules and components

The Interface X Components library includes the following modules and components to layout multiple experiences to show product recommendations in your search UI:

Recommendations

Module to configure the display of the product results most visited by shoppers.

Semantic Queries

Module to configure the display of semantically similar query alternatives.

Queries preview

Module to display a preview of the product results related to a specific query.

Next Queries

Module to set up the display of suggestions for a search related to a previous query.

warning

For correct performance, make sure that your current search service supports this type of features.

Tailor the web experience

Based on your business strategy and your shoppers’ needs, the Interface X Components library offers the following configuration options and properties:

Top Products UI experience Use the Recommendations module to configure the layout of Top

Products in your commerce search UI. You can:

• Configure the position and place it wherever you prefer, although it commonly appears in the results grid when low results are retrieved or in the no results layout after no matches are found.
• Show as many product recommendations as you want.
• Animate the display of the component at your ease.
• Customize content. Show whatever you need: text, images, icons.
• Extend the performance with result-related components.

Vectorized Recommendations UI experience

Use the Semantics Queries module to configure the layout of Vectorized Recommendations in your commerce search UI. You can:

• Configure the position and place it wherever you prefer, although it usually appears on the SERP, among the product results.
• Show as many product recommendations as you want. Display the total number of recommendations shown.
• Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
• Animate the display of the component at your ease.
• Customize content. Although, the name of product recommendations is shown by default.
• Extend the performance with query preview-related components to display related content, such as the suggested query, product result images, and links.

Brand Recommendations UI experience

Use the Queries Preview module to configure the layout of Brand Recommendations in your commerce search UI. You can:

• Configure the position and place it wherever you prefer, although it usually appears at the pre-search stage.
• Display the suggested queries and the total number of recommendations shown.
• Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
• Animate the display of the component at your ease.
• Customize content. Although, the name of product recommendations is shown by default.
• Customize the Result Cards by combining result data and result components as images or links to match the SERP or create a different component for this use case.

Next Products UI experience

Use the Next Query Preview component to configure the layout of Next Products in your commerce search UI. You can:

• Configure the position and place it wherever you prefer, although it usually appears on the SERP, among the product results.
• Show as many product recommendations as you want. Display the total number of recommendations shown.
• Use different layouts: carousel, list, grid. Although, a carousel or horizontal slider panel is the preferred layout.
• Customize content. Although, the suggested query and the name of product recommendations are shown by default.
• Extend the performance with result-related components to display related content, such as product result images and links.

Note that the Interface X modules and components help you build a configurable UI experience. Even though the UI layout for product recommendations may be similar, sharing multiple configuration options, the source of data differs from one to another:

Type of product recommendation	X Components	Source of data
Top Products	Recommendations component	Search API - Top Clicked endpoint
Vectorized Recommendations	Semantic Queries module	Semantics API
Brand Recommendations	Queries Preview module	Snippet configuration - Initialization options (*Manually configured by merchants and brand managers)
Next Products	Next Query Preview component	Next Queries endpoint from the Beacon API

interact

Want to know more? Learn how to configure your web experience.