# How To Set Up Complementary Products?

Using the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app, you can choose specific products to display as complementary products in the product information section on your website's product pages.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FUIo9y1YUNlEmvLnQccCO%2Fimage.png?alt=media&#x26;token=e52f43d6-62c7-4736-8bb6-7adeae6ca3c6" alt=""><figcaption><p>Layout Style Default</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fedjk3ColF4NfaaW4Ndsz%2Fimage.png?alt=media&#x26;token=0f398a05-e9ee-4a1c-be0b-93c0f4f2f278" alt=""><figcaption><p>Layout Style Custom</p></figcaption></figure>

{% embed url="<https://www.youtube.com/embed/WjtH_GUuRls>" %}
Instruction Video
{% endembed %}

### Set Up Complementary Products Block <a href="#complementary-products-block-settings" id="complementary-products-block-settings"></a>

1. From your Shopify admin, go to **Apps** -> **Search & Discovery.**
2. Click **View recommendations** button in the **Feature overview** section.
3. Click **Add recommendations** button.
4. Select the main product to show the Complementary Products block in the **Select source product** section.
5. Select complementary products in the **Add complementary products** section.
6. Click **Save**.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FbaMWcofBJzQyP2AJooaT%2Fimage.png?alt=media&#x26;token=a0b78300-3f0f-4af6-ae88-ee5391a1ad58" alt=""><figcaption></figcaption></figure>

### Customizing Complementary Products <a href="#customizing-the-appearance-of-complementary-products" id="customizing-the-appearance-of-complementary-products"></a>

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 **Default product** template in the dropdown of editor window to open theme editor of product page.

4\. From **Product information ->** Click **Add block** -> Choose **Complementary products.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FbSefXfLpR5peIAh1rpqG%2Fimage.png?alt=media&#x26;token=2af66f7a-eaf8-4fce-9d15-bc1b60d63683" alt=""><figcaption></figcaption></figure>

| Setting                                  | Description                                                                     |
| ---------------------------------------- | ------------------------------------------------------------------------------- |
| Heading                                  | Enter the title for the section.                                                |
| Layout                                   | Select the layout for the items of the product block to be either Grid or List. |
| Maximum products to show for grid layout | Select the number of visible products for grid layout.                          |
| Maximum products to show for list layout | Select the number of visible products for list layout.                          |
| Show navigation arrows                   | Show/Hide the navigation arrows for the slider layout.                          |
| Show navigation dots                     | Show/Hide the dots for the slider layout.                                       |
| **Product card**                         |                                                                                 |
| Media fit                                | Determine of how to display product images                                      |
| Enable add to cart button                | Show/Hide add to cart button on each product item.                              |
| **Block padding**                        |                                                                                 |
| Top padding                              | Determine the top spacing of the section.                                       |
| Bottom padding                           | Determine the bottom spacing of the section.                                    |