Complementary Products Section
This guide describes setting up the Complementary Products section.
Use this section to display complementary product recommendations that work well together with the current product. This section requires the Search & Discovery app to select complementary products and is specifically designed for product template pages.
For general guidance with modifying sections, refer to [Sections overview], and [Shopify help: Sections and blocks].
Set up a Complementary Products section
To set up a Complementary Products section:
- Go to Customize theme
- In Theme editor, select a product template page
- Select "Add section" > "Complementary Products"
Note: This section is only available on product template pages and requires the Search &Discovery app for full functionality.
From the side menu, select Complementary Products to configure the following settings:
| Setting name | Description |
|---|---|
| Title | Enter heading text for the section. Default is "Pair it with" |
| Title Alignment | Position the title left or right. Default is left |
| Title Size | Choose text size from S to 7XL, with responsive options. Default is "text-base" |
| Product Display | Choose between "Grid" or "Carousel" layout. Default is grid |
| Number of products | Set how many complementary products to show (2-10). Default is 10 |
| Products per row | For grid layout, choose 2-5 products per row. Default is 5 |
| Products Per Row (Mobile) | Choose 1 or 2 products per row on mobile. Default is 2 |
| Vertical spacing | Set space between product rows (0-100px). Default is 20px |
| Horizontal spacing | Set space between products (0-100px). Default is 20px |
| Navigation Style | For carousel layout, choose between "Arrows" or "Text Labels". Default is arrows |
| Horizontal Spacing Size | Choose "None" or "Small" padding between products. Default is none |
| Add outer Gap | Enable to add padding around the entire section. Default is false |
Note: When no complementary products are found, placeholder products will be shown while customizing your theme. The section will not display on the live site if no complementary products exist.