> For the complete documentation index, see [llms.txt](https://vodoma-docs.boostheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vodoma-docs.boostheme.com/static-sections/product-pages/main-product-crosssell.md).

# 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://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MffM4IP21kuwgH4sZ-0%2F-MffSTwOMF9HN44cL1__%2Fmain-product-crosssell-open.png?alt=media\&token=301e69a3-3718-4ed1-80d4-c4246cc72727)

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://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MffM4IP21kuwgH4sZ-0%2F-MffS_F5Pb3uR2Bbc3DJ%2Fmain-product-crosssell-add.png?alt=media\&token=e6471fdc-9f86-4df6-adb9-0dd0834db3ba)

## 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](/cross-sell-recommendation-rules.md) 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://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHZ9pBXNTeEG9jtYzuV%2F-MHZBKySArYmTs0UrHDu%2Fcross-sell-widget.jpeg?alt=media\&token=0d9f2d88-3c6c-4920-88c7-96386b4937b9)

![Show the cross-sell products as a carousel slider](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHZ9pBXNTeEG9jtYzuV%2F-MHZBXzPyccxFcrfIX7W%2Fcross-sell-slider.jpeg?alt=media\&token=efb6b7c4-c9ef-4207-b158-06e8ed090b66)

* **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](/tips.md#product-item-settings) for details of these settings.