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.

Note

If your screen is wider than 1600 pixels, then your customization and editing options appear on the right side of your screen. If your screen is narrower than 1600 pixels, then they appear on the left side.

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.

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.

Note

Complementary products need to be In stock and set to Active or the Shopify Search and Discovery app will filter them out.

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

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