> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/product-page/product-information/how-to-set-up-complementary-products.md).

# 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="/files/oNU5HooDyKOBwd4W8Qel" alt=""><figcaption><p>Layout Style Default</p></figcaption></figure>

<figure><img src="/files/p6FjKjGENQlt6lipfGpW" 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="/files/FnfceEwbqn6G4Az6hQ92" 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="/files/9oKW9R53WXGqM293IgTT" 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.                                    |