Complementary products

Complementary products

Start your free trial
Start your free trial

General

Online store speed
Online store speed
Accessibility
Accessibility
Theme updates
Theme updates

Theme styles

Style presets
Style presets
Colors
Colors
Fonts
Fonts
Animation
Animation
Social media
Social media

Header

Announcement bar
Announcement bar
Mobile menu
Mobile menu
Search bar
Search bar

Sections

Products

Product listings
Product listings
Product badges
Product badges
Quick view
Quick view
Quick add
Quick add

Product page

Product template
Product template
Variant chips
Variant chips
Sticky add-to-cart bar
Sticky add-to-cart bar
Sibling product swatches
Sibling product swatches
Product recommendations
Product recommendations

Collection page

Collections template
Collections template
Banner
Banner
Product grid
Product grid
Filters and sorting
Filters and sorting

Cart

Quick cart
Quick cart
Cart page
Cart page
Added-to-cart popup
Added-to-cart popup
Cross sells
Cross sells
Free shipping bar
Free shipping bar
Low inventory warning
Low inventory warning

Pages

Templates
Templates
Home page
Home page
About page
About page
Blogs page
Blogs page
Blog post
Blog post
Collections list
Collections list
Contact page
Contact page
Password page
Password page
Search page
Search page
404 page
404 page

Support

Support policy
Support policy
Shopify vs Theme issues
Shopify vs Theme issues
Store access requests
Store access requests

Complementary products

Tip | Want to make your product pages even more powerful? Check out our new Flash Bundles app to create high-converting product bundles that will increase your average order value! Try it for free

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.

This guide shows you how to set up the Complementary products block. For similar features, see guides for Product recommendations section and Cross sells in the cart.

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.

Note | Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or use metafields and dynamic sources.
icon
STEPS

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. Select which Column to display the Text block: Either the Right (in the product form) or the Left (beneath the product media).
  4. Change the Heading to a short title of a few words.
  5. Chose whether to Enable slider on desktop or mobile.
  6. If disable, the recommendations will appear in a grid.

  7. Change the Maximum products to show using the slider.
  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.
  10. 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.

  11. (For Search & Discovery recommendations) Download Shopify's Search & Discovery app to use and customize automated recommendations. Learn more here.
  12. Click Save.

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.

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.

icon
STEPS

In your theme editor (Customize):

  1. Click the Complementary products blockto open the settings.
  2. Next to Custom product list, click the Insert dynamic source button and select (+) Add Metafield.
  3. image
    Alternatively, go to Settings > Custom data in your Shopify admin.
  4. Click the Products tab.
  5. image
  6. Click the Add definition button in the top-right.
  7. Enter a Name that describes what information the metafield will contain. For example: "Related products".
  8. image
  9. Click (+) Select type button and select List of products.
  10. Click Save.

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.

icon
STEPS

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.
  3. image
  4. Scroll down to the Metafields section and find your product list metafield, then click on the field to Select products.
  5. image
  6. Click Save.
  7. Repeat steps 1 - 3 to populate the product list metafield for each of your products.

3. Insert metafields as dynamic sources

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

icon
STEPS

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. image
  4. Select the Metafield that you created.
  5. You can now preview your store to confirm the correct product list appears when viewing different products.
  6. Click Save.