# Complementary products

The **Complementary products** block displays recommended products that pair well with the main product.

* Change the **heading** text
* Choose to show recommendations from a **collection** or a **custom list of products**.
* Choose how many product recommendations to show

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F57mj3oDPNBXRZazntmMw%2Fcomplementary-product.png?alt=media&#x26;token=1811466c-68b1-4a87-a7c1-1d4c5515bb1e" alt="" width="563"><figcaption></figcaption></figure>

## Add complementary products

***

Under **Product overview**, click **(+) Add block** and select **Complementary products**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start customizing.

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) to design different page layouts.

[Add dynamic content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) to show page-specific content in the same template.
{% endhint %}

### Select source for recommendations

***

`Click Complementary products block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="239">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Recommendations to show</mark></td><td>Choose the source of product recommendations for cross-sells.</td><td><strong>From product list</strong><br><strong>Search &#x26; Discovery app recommendations</strong></td></tr><tr><td><mark style="color:blue;">Max number of products to show</mark></td><td>Set the maximum number of recommended products.</td><td><strong>3 - 9</strong></td></tr></tbody></table>

&#x20;

### Customize appearance

***

Change the **heading** text and choose whether to show **product images**.

&#x20;

`Click Complementary products block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="287">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter a title for the complementary products block.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Pairs well with"</mark></td></tr><tr><td><mark style="color:blue;">Show product thumbnails</mark></td><td>Show product images next to the product title and price.</td><td></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

&#x20;

`Click Complementary products block to find settings`

| Setting                                         | Description                 | Options                                                                                                                                                    |
| ----------------------------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">Bottom padding</mark> | Add spacing below the block | <p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p> |