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.
Set up a Complementary Products section
- Go to Customize theme
- In Theme editor, select a product template page
- Select "Add section" → "Complementary Products"
Search & Discovery Required
This section is only available on product template pages and requires the Search & Discovery app for full functionality.
Configuration 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 |
Best Practices
- Use Search & Discovery app to curate complementary products
- Limit to 4-6 products for best mobile experience
- Choose products that genuinely complement the main product
- Test on mobile to ensure carousel navigation works smoothly
Upsell Strategy
Choose complementary products with similar or slightly lower price points. High-priced additions can overwhelm customers and reduce conversion.
Placeholder Products
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.