Complementary products

In your theme editor (Customize):

1. Under Product overview, click (+) Add block and select Complementary Products.

2. Click on the new Complementary products block to open the settings.

3. Change the Heading to a short title of a few words.

4. Select which Column to display the Text block: Either the Right (in the product form) or the Left (beneath the product media).

5. Change the Maximum products to show using the slider.

6. Under Products to show, choose to use a Custom product list or Search & Discovery app recommendations.

7. (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.

8. (For Search & Discovery recommendations) Download Shopify's Search & Discovery app to use and customize automated recommendations. Learn more here ↗.

9. Choose whether to Enable swipe on mobile.

10. Choose to display the complementary products as a Collapsible row.

    As a collapsible row, the products Expand by default. You can choose to disable this option.

11. Click Save.

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.

   Alternatively, go to Settings > Custom data in your Shopify admin.

3. Click the Products tab.

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".
6. Click (+) Select type button and select List of products.

7. Click Save.

In your Shopify Admin:

1. In the Shopify admin, open one of your Products.

2. Scroll down to the Metafields section and find your product list metafield, then click on the field to Select products.
3. Click Save.

4. Repeat steps 1 - 3 to populate the product list metafield for each of your products.

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
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.