# Main product - Cross-sell

## 1. Open the Main product - Cross-sell section:

On the left sidebar of the Theme editor, click the **Main product - Cross-sell** section.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MgxkxXO0k0-rc5UOXxZ%2F-Mgxl7os0AVMT8tYxD2a%2Fimage.png?alt=media\&token=bed2b8ca-9f66-4c46-b30f-c6f40be3c32f)

If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Main product - Cross-sell**.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MgxkxXO0k0-rc5UOXxZ%2F-Mgxl9plf-B2wjDSTYgx%2Fimage.png?alt=media\&token=74547452-7fce-454d-9407-a6969714884b)

## 2. Settings

Click the section name from the available section list on the left sidebar to open the section settings.

### Background

* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.

### Section gutters

* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.

### General settings

* **Heading:** add your text to show it as the section heading.
* **Subheading:** add your text to show it as the section subheading.
* **Pick a rule:** specify to load the way to load the cross-sell products. There are 2 values: **automation** or **manual**. Please refer to [the article](https://beloria-docs.boostheme.com/cross-sell-recommendation-rules) for details of these rules.
  * **Automation:** the site will load the cross-sell products in a manual way first. If there are not found products, the site will load the cross-sell products in an automated way.
  * **Manual:** the site only loads the cross-sell products in a manual way. If there are not found products, the cross-sell block will be hidden.
* **Display as:** choose the way to show the cross-sell products block. There are two values for this setting: **Calculating widget**, and **Carousel slider**.

![Show the cross-sell products as a caculating widget](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MgxkxXO0k0-rc5UOXxZ%2F-MgxmLHmaDON8ItrgiZn%2Fcross-sell-widget.jpg?alt=media\&token=019f7e83-29af-4234-8373-6a09a2340fa3)

![Show the cross-sell products as a carousel slider](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MgxkxXO0k0-rc5UOXxZ%2F-MgxlKEGuYNs8cdc7yUz%2Fcross-sell-slider.jpg?alt=media\&token=c90f634e-4237-441a-b7d4-5fa0242e2fd4)

* **Limit:** adjust the number of products that will be shown.

### Product carousel item settings

Only affect if you configure to show products in a slider. Please refer to [the guide](https://beloria-docs.boostheme.com/tips#product-item-settings) for details of these settings.