> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/carousel/build-a-related-products-carousel.md).

# Build a Related Products Carousel

## Overview

Want to make your product pages more dynamic? This quick tutorial teaches you how to build a custom component using the [Avonni Carousel](/flow/flow-components/carousel.md). This fun, interactive component is the perfect way to show off related products within your Salesforce Flow.

By the end, you'll have a sleek carousel that will help your customers discover even more great items

## Result

<figure><img src="/files/rhC7zEeEieW0ELd1jhKL" alt=""><figcaption></figcaption></figure>

## Steps

### 1. Create a Get Records collection

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Product records by following the below steps:

* **Add a Get Records** element to fetch product records
* Enter a collection Label > **GetProducts**
* Select the **Product Object**
* Select "**`None - Get all Task Records`**" in the condition requirements field
* Select "**`All Records`**" regarding the number of records to display
* Click "**Done**"

{% @arcade/embed url="<https://app.arcade.software/share/7hUotgEpiWpgeA12ADyA>" flowId="7hUotgEpiWpgeA12ADyA" %}

### 2. Add our first screen element

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Task records by following the below steps:

* Add a screen element
* Enter a Label: **Screen 1**
* Click on the **Configure Header** section and uncheck "**`Show Header`**"
* Click on the **Configure Footer** section and uncheck "**`Show Footer`**"

### 3. Add the Carousel component

Under the header component, we will drag the carousel component, the second part of our product showcase component.

* Drag the **Carousel component** from the components list to our screen flow (the Carousel component is located under the custom section)
* Enter an **API Name**. For example, *carouselProducts*.

{% @arcade/embed url="<https://app.arcade.software/share/Sl1jCEGZ7W9ZKjhDTd29>" flowId="Sl1jCEGZ7W9ZKjhDTd29" %}

### 4. Configure the Carousel

#### General settings

* Click on the **Open Component Builder** button to access all the settings for the Carousel component
* Set the **Items per panel to 2** (same for Small, Medium and Large)
* Expand the **Data Source** section and select **`Variable`**
* Select our source collection, the one created [in Step 1](#1.-create-a-get-records-collection) > GetProducts

{% @arcade/embed url="<https://app.arcade.software/share/XdVURH23cU7aKQDXirMH>" flowId="XdVURH23cU7aKQDXirMH" %}

**Configure Data Mapping**

Now we can link fields from our source collection to attributes from the Carousel element. The following fields can be associated to the following attributes:

* **Title** => Product Name
* **Description** => Product Description
* **Image Source** => Display URL (or the name of your field that store the image)
* **Name** => Product ID

{% @arcade/embed url="<https://app.arcade.software/share/yMWsuyqH7YPbxkBt96sc>" flowId="yMWsuyqH7YPbxkBt96sc" %}

**Create an interaction on Item Click**

We just completed the data mapping to map fields with carousel attributes. Now, we can create an interaction to define the action when users click on a Carousel item.

* Click on the **Interactions tab**
* **Type** => Flow Navigation
* **Type** => Next Screen


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/carousel/build-a-related-products-carousel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.