Build a Related Products Carousel
Last updated
Last updated
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
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"
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"
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.
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
