# Complementary products

Displaying complementary products to customers makes it easier for them to discover new products, and can help to increase online store sales.

{% hint style="info" %}
To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)
{% endhint %}

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window **->** Choose **Default product**.
4. From the side menu, select **Product information**. Click **+ Add block** and select **"Complementary products"** block, or click the **Search** bar to enter a search term.

<table><thead><tr><th width="232">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading<br><em><mark style="color:red;">(Leave the field blank to hide the heading)</mark></em></td></tr><tr><td>Maximum products to show</td><td>Determines the maximum of products can be shown. Can be from 1 to 10, increasing arithmetically of 1.</td></tr><tr><td>Number of products per page</td><td>Determines the maximum of products per page can be shown. Can be from 2 to 4, increasing arithmetically of 1.</td></tr></tbody></table>

#### **Product card**

<table><thead><tr><th width="236">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>Select image ratio from the dropdown menu:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Portrait</strong></li><li><strong>Square</strong></li></ul></td></tr><tr><td>Show color swatch</td><td>Determines the maximum of products can be shown. Can be from 1 to 10, increasing arithmetically of 1.</td></tr></tbody></table>

#### **Block padding**

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the block. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the top inner space of the block. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>
