Complementary Products
Display complementary products (cross-sells) in a responsive carousel on product pages. Uses Shopify’s complementary product relationships to suggest items that go well together.
Configure the Section
This section is designed for the Product template. To add it:
- Navigate to a product page in the theme editor.
- Click Add section and select Complementary products.
- Set up complementary product relationships in the Shopify admin under Products > Search & Discovery.
Section Settings
Product Display
| Setting | Description |
|---|---|
| Max products | Maximum number of complementary products to show. Range: 1-10. Default: 4. |
| Columns | Number of columns on desktop. Range: 1–8. Default: 4. |
| Mobile card size | Size of product cards on mobile. Large (60%) or Compact (44%). Default: Large. |
| Column gap | Spacing between product cards. Range: 0–100px. Default: 8px. |
Carousel Navigation
| Setting | Description |
|---|---|
| Arrow style | Chevron or None. Default: Chevron. |
| Icon size | Arrow icon size. Range: 12–48px. Default: 20px. |
| Icon shape | None or Circle background. Default: Circle. |
| Icon color | Arrow color. Default: #666666. |
| Background color | Arrow background color. Default: #BFBFBF. |
| Background opacity | Arrow background transparency. Range: 0–100%. Default: 20%. |
| Arrow placement | Overlay (on top of cards) or Bottom (below cards). Default: Overlay. |
| Hide nav on mobile | Hide navigation arrows on mobile. Default: Off. |
Layout
| Setting | Description |
|---|---|
| Section width | Page width or Full width. Default: Page width. |
| Content gap | Spacing between heading and product grid. Range: 0–100px. Default: 12px. |
| Color scheme | Select a color scheme for the section. |
| Padding | Top and bottom padding with unified or separate controls. Range: 0–100px. Default: 32px. |
Blocks
Add text blocks for section headings, product item blocks for product-card presentation, container blocks for layout composition, and app blocks for third-party integrations.
Product item blocks can include media, title, price, swatches, and quick-add controls depending on the product-card block settings.
Empty Complementary Products
Complementary products appear only after relationships are configured in Shopify Search & Discovery and Shopify returns products for the current product. If no complementary products are available, the section stays out of the way until products are assigned.