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.
On this page
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
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Products.
Select Default product, or the product template that you want to edit.
-
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.
Click Save.
iPhone
- From the Shopify app, tap the … button.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- Find the theme that you want to edit, and then tap Customize.
- Tap Templates.
- Click Products.
- Select Default product, or the product template that you want to edit.
- 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.
- Click Save.
Android
- From the Shopify app, tap the … button.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- Find the theme that you want to edit, and then tap Customize.
- Tap Templates.
- Tap Products.
- Select Default product, or the product template that you want to edit.
- 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.
- 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
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 displayed as a collapsible row. |
Product display configuration
Setting | Description |
---|---|
Maximum products to show | Select the maximum number of complementary products to display. 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 displays below the images.
|
Image ratio |
Determines the aspect ratio of the product card images.
|
Additional functionalities
Setting | Description |
---|---|
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. |