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

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"

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.

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

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

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