Add complementary products

Using the Shopify Search & Discovery app, you can choose specific products to display as complementary products in the product information section on your website's product pages. Learn how to customize complementary products with the app.

Displaying complementary products to customers makes it easier for them to discover new products, and can help to 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 only in Online Store 2.0 themes. You can customize the appearance of your complementary products from your product pages. You can have only one complementary product block on a product page at a time.

Steps:

  1. Do one of the following:
    • 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.
  2. Click Save.

You can hide the complementary products block by clicking the eye symbol. 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
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. You can select a minimum of 1, and a maximum of 10.

Number of products per page

The number of complementary products that you want to display per slider page. Select a value between 1-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)
Display 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.

Ready to start selling with Shopify?

Try it free