Complementary products
Products you pair with the current one, chosen in the Shopify Search & Discovery app, as cards or a compact list.
What it does
A section header and the products you have marked as complementary to the current one, loaded when the section scrolls into view. Product cards in a grid, a carousel, or a compact list with one product per row. Cards follow the Product cards settings.
When to use it
On the product page under the buy box or above the related products, where the pairing is part of the argument: the magnesium with the multivitamin, the case with the device.
Setting it up
- Install the Shopify Search & Discovery app and set complementary products for your products.
- Add the section to the product template, choose Layout and Products to show.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Product cards shows full cards in a grid. Carousel puts them in a scrollable row. Compact list shows one product per row with a small image, name, price and add button.Options: Product cards, Carousel, Compact list · Default: Product cards |
| Swipe on mobile | Checkbox | On a phone, lays the items out in one row that the visitor swipes through, instead of stacking them.Default: off |
| Header | ||
| Heading | Text | The heading of the section. Italicize a word to set it in the accent font.Default: Pairs well with |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Medium |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Left |
| Link label | Text | Text of the link at the end of the section header, such as View all. Leave empty for no link. |
| Link | Link | Where the header link leads. |
| Grid | ||
| Products to show | Range | How many complementary products to show, at most.2 to 8 · Default: 3 |
| Columns on desktop | Select | How many items sit in one row on a desktop screen.Options: 2, 3, 4 · Default: 3 |
| Columns on mobile | Select | How many items sit in one row on a phone.Options: 1, 2 · Default: 2 |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
Tips
- The pairings are set in the free Shopify Search & Discovery app, under Product recommendations, Complementary. Without the app or without pairings for a product the section shows nothing.
- Compact list is the layout for a spot near the buy box: small image, name, price, add button in one row per product.
- For a single add-on with a check box in the buy box, use the Add-on block in Product information instead. This section is for a set of pairings per product.