Add complementary products

You can add the complementary products block to your product pages in the theme editor. Learn how to use the Shopify Search & Discovery app to choose complementary products for your website’s product pages.

Displaying complementary products to customers makes it easier for them to discover new products, and can help increase online store sales.

The heading and layout of the complementary products block are determined by your theme.

Customizing the appearance of complementary products

Complementary products is a block on the product information section of your product pages, and is only available in Online Store 2.0 themes. You can customize the appearance of your complementary products block from your product pages. You can have only one complementary product block on a product page at a time.

Steps:

Desktop
  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Products.

  4. Select Default product, or the product template that you want to edit.

  5. Take one of the following steps:

    • If your product information section has a complementary products block, then click Complementary products.
    • If your product information section doesn't have a complementary products block, then click + Add block, and then select Complementary products.
  6. Click Save.

iPhone
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme that you want to edit, and then tap Customize.
  5. Tap Templates.
  6. Click Products.
  7. Select Default product, or the product template that you want to edit.
  8. Take one of the following steps:
    • If your product information section has a complementary products block, then click Complementary products.
    • If your product information section doesn't have a complementary products block, then click + Add block, and then select Complementary products.
  9. Click Save.
Android
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme that you want to edit, and then tap Customize.
  5. Tap Templates.
  6. Tap Products.
  7. Select Default product, or the product template that you want to edit.
  8. Take one of the following steps:
    • If your product information section has a complementary products block, then tap Complementary products.
    • If your product information section doesn't have a complementary products block, then tap + Add block, and then select Complementary products.
  9. Tap Save.

You can hide the complementary products block by clicking the eye icon. If you want to remove the block from your theme completely, then you can delete the block.

Complementary products block settings

You can customize how your complementary products display to your customers.

Basic display setting

Basic display settings for complementary products block settings in Shopify.
SettingDescription
HeadingThe title of the block.
Show as collapsible rowWhen selected, the content displays as collapsed under a row tab. When a customer clicks a title, the tab expands to display additional content.
IconSelect an icon to pair with your heading when complementary products are displayed as a collapsible row.

Product display configuration

Configuration for displaying products in the complementary products block.
SettingDescription
Maximum products to showSelect the maximum number of complementary products to display. Select a value between 1 and 10.
Number of products per pageThe number of complementary products that you want to display per slider page. Select a value between 1 and 4.
Pagination style

The style of the slider navigation that displays below the images.

  • Dots
  • Counter (default)
  • Numbers
Image ratio

Determines the aspect ratio of the product card images.

  • Portrait
  • Square (default)

Additional functionalities

Settings for additional functionalities in the complementary products block.
SettingDescription
Enable quick add button

The "quick add" button allows customers to add a product to their cart from the product card. If the product has variants, then the button reads Choose options and displays the product details in a pop-up. The customers can then select their desired variants, add to cart, check out immediately with the Buy it now option, or else click to view a product's full details. The Buy it now option needs to be set up separately from the product page to appear in the quick add options. When the Buy it now option isn't set up, customers can still add the product to their cart.

Can’t find the answers you’re looking for? We’re here to help.