# Complementary products

{% hint style="warning" %}
**Tip |** Want to make your product pages even more powerful? Check out our new [Flash Bundles](https://apps.shopify.com/flash-bundles?utm_source=fluorescent.co\&utm_medium=helpcentre\&utm_campaign=flash_bundles) app to create high-converting product bundles that will increase your average order value! [Try it for free](https://apps.shopify.com/flash-bundles?utm_source=fluorescent.co\&utm_medium=helpcentre\&utm_campaign=flash_bundles)
{% endhint %}

In the Product template, the **Complementary products** block shows customers related products that they can purchase in addition to the current product. Create a custom product list that pair well together.

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-76beab6425afde445396fdfc8ef147867511602b%2Fproducts-comp-l.jpeg?alt=media)

## **Set up block**

Follow the steps to add a complementary products block with a custom product list. You can customize the heading and layout of the block.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Under **Product overview**, click **(+) Add block** and select **Complementary Products**.
2. Click on the new **Complementary products** ("Pairs well with") block to open the settings.
3. Select which **Column** to display the block: Either the **Right** (in the product form) or on the **Left** (beneath the product media).
4. Enter **Heading** text to display a short title of a few words.
5. Select the **Maximum products to show** using the slider.

   > Between 1 and 10. We recommend 3 to 4.
6. Select the **Columns per row** using the slider: 1, 2, or 3.
7. (*Optional*). Select an **Image aspect ratio** to change the shape of the product images. Either **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.
8. Under **Products to show**, choose to use a **Custom product list** or **Search & Discovery app recommendations**.
9. (*For custom product list*) Click **Select products** to manually choose what products to display.

   > **Tip**: Complementary products are ideally the same cost or lower as the original product.

   > To show different products on different product pages, follow the steps below to [add a Product metafield to use as a **dynamic source**](#add-dynamic-content-for-different-products).
10. (*For Search & Discovery recommendations*) Download Shopify's Search & Discovery app to use and customize automated recommendations. [Learn more here](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations).
11. Choose the **Layout** to display the products in a **Slider** or **Grid**.
12. Click **Save**.

</details>

## **Add dynamic content for different products**

If you want to show different complementary products on specific product pages, you can use Shopify's **metafields** and **dynamic sources**. These features allow you to store custom information for each of your products and automatically display that information on the correct product pages.

Watch the video or follow the steps below to create metafields for your products, add complementary products to those metafields, then use **Dynamic sources** to connect those metafields to the complementary products block.

> For a general introduction, see our [Dynamic sources and metafields tutorial](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).

{% embed url="<https://youtu.be/gxB6XDhCy80>" %}

### **1. Create product list metafield**

Create a **Product** metafield to add multiple **complementary products** to each product page in your Shopify Admin.

Shopify's **Metafields** lets you store additional information about your products. You can create custom fields to hold different types of information in your Shopify admin, and enter unique content for each of your products.

The steps below tell you how to add a metafield for storing text that you want to display in the collapsible rows block.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Complementary products** block to open the settings.
2. Next to **Custom product list**, click the **Insert dynamic source** button and select **(+) Add Metafield**.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-c97c51623f9a7400d398035c6b0a3fc2ffbb9475%2Fdynamic-create-metafield.jpeg?alt=media)

   > Alternatively, go to **Settings > Custom data** in your **Shopify admin**.
3. Click the **Products** tab.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-0faa0d0960ece34cf4f568c8325e4059beada7c7%2Fmetafield-product.jpeg?alt=media)
4. Click the **Add definition** button in the top-right.
5. Enter a **Name** that describes what information the metafield will contain. For example: "Related products".

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-883e6e18ac8b303bc447a22e2cdc8711a3f0c817%2Fmetafield-related-products.jpeg?alt=media)
6. Click **(+) Select type** button and select **List of products**.
7. Click **Save**.

</details>

### **2. Add products to metafield**

Once you've created a product list **Metafield**, you can now add multiple products to those fields by going to your products in the Shopify admin.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify Admin**:

1. In the **Shopify admin**:
2. Go to your **Product inventory** in your Shopify admin and open one of your **Products**.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-ba6779753d96402956a9813479e339a0ef63dc5d%2Fadmin-product-inventory.jpeg?alt=media)
3. Scroll down to the **Metafields** section and find your product list metafield, then click on the field to **Select products**.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-c0852b5769f09075e3c80bf044453cb72d42d1f4%2Frelated-products-metafield.jpeg?alt=media)
4. Click **Save**.
5. Repeat steps 1 - 3 to populate the product list metafield for each of your products.

</details>

### **3. Insert metafields as dynamic sources**

You can go to the theme editor to insert a **Dynamic source** in the **Complementary products** block.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Complementary products** block to open the settings.
2. Click the **Insert dynamic source** button next to **Customer product list**

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-afbdc9fa288b29f77242b27f62f2901fdeb37e01%2Fdynamic-source-example.jpeg?alt=media)
3. Select the **Metafield** that you created.
4. You can now preview your store to confirm the correct product list appears when viewing different products.
5. Click **Save**.

</details>

\\

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/lorenza/product-pages/product-template)\
> [Recommended products section](https://help.fluorescent.co/lorenza/product-pages/product-page-sections/recommended-products)
