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:

  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.

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.

The settings for the complementary products block in the product information section
SettingDescription
Heading

The title of the block.

Show as collapsible row

When selected, the content displays as collapsed under a row tab. When a customer clicks a title, the tab expands to display additional content.

Icon

Select an icon to pair with your heading when complementary products are shown as a collapsible row.

Maximum products to show

Select the maximum number of complementary products to show. Select a value between 1 and 10.

Number of products per page

The 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 appears below the images.

  • Dots
  • Counter (default)
  • Numbers
Image ratio

Determines the aspect ratio of the product card images.

  • Portrait
  • Square (default)
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.