Skip to main content
Skip table of contents

LWC - Cross Sell Carousel

Cross Sell Carousel

With the Cross Sell Carousel, you now have more control over what your users get to see in Lightning Community or Community Hub. You can also set the title you would like them to see: Like "You Might Also Like", or "Customers who bought this also bought..." to hook the users and encourage them to look at related products to promote cross selling.

Check out the Floating Component Property Editor given below, which enables you to do this and the properties table for how you can perform point-and-click configuration to make the cross sell carousel look just like want it to!

Configuration Options

Learn more about Experience Builder here.

From the components list on the left panel, select the Cross Sell Carousel component and drag it onto the site page.

On the page, click within the Cross Sell Carousel component to bring up the Property editor.

Figure 1. Cross Sell Carousel LWC with configuration properties

Carousel Title

This will appear at the top of the carousel, to attract the user's attention to the recommended products. By default, it is set to: You Might Also Like.

Data Source

Enter the Data Source used to power the records in the cross sell carousel. Default value is LightningStoreCarouselDataSource which gives correctly configured products that have same tags as the logged in account or purchase history of last 90 days. You can also create a new SOQL query and use it in a new data source, and select the newly created data source from the dropdown. 

Creating your own Data Source

For ease of use and the benefit of one time set up, you can also create a new SOQL query and use it in a data source. To do this, follow the below steps:

  1. Create a SOQL query. While doing this, keep in mind to select the below values:
    • Select Sharing Mode as System
    • In SELECT, enter ID, Name.
See an example of a query...

Given below is an example of what a query can look like. Please enter the values as per requirement.

2. Create a Data Source. While creating a data source for cross sell carousel, use the below details:

  • Enter Class Name as LightningCarouselSOQLDataSource
  • Enter the Query Name (given while creating the query in step 1 in Context field.
  • Enter SObject Type/Class as NC.CrossSellCarouselDetails

The items in the data source created by you will display irrespective of selections in following fields, unless added to the query:

  • Self Service enabled (in Product record)

  • Cannot be sold separately (in cross sell carousel configuration)

  • Status (in Product record)


Enter a comma separated list of all objects and/or records that you want to display in the carousel from all the records returned by the Data Source. If this is left blank, all records returned from the data source are displayed. Enter values in any of the formats given in help text. For example: NU__Product__c to display all items in Product object, OR Merchandise to display all items in Merchandise Record Type OR NU__Product__c.Merchandise to display all items of Merchandise Record Type in Product object.

It's a much quicker way than creating a new data source!

Maximum Items

Enter the maximum number of items which can be displayed in the Carousel. For Query based data sources, Nimble AMS will consider the lesser value of the two fields: Maximum Items and Limit of the query. Default value for this is 15.

Items Per View

Enter the number of items to be displayed per Carousel view. Default value for this is 4.

We recommend keeping the items per view at or below 5-7.  Setting this number too high could impact the user experience and make it more challenging to find products.

Scroll Duration (millisecond)Enter the duration after which the carousel should slide (in milliseconds). Default value is 0, which means carousel will not scroll.
Open in new browser windowSelect this checkbox, to open the record in a browser window when a user clicks on it. It is unchecked by default. 
Use other LWCs from the Component list to create impactful page for your constituents. For e.g. use the ‘Rich Content Editor’ to add supporting information about the Cross See Carousel. For detailed steps on how to access and use Experience Builder, visit Experience Builder Overview (


Figure 2. Cross Sell Carousel when used in Experience Cloud

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.