Success
Complementary products
Surface relevant add-ons with responsive layouts and flexible product card styling.
- Shopify documentation on sections and blocks
- Company XYZ documentation on layout settings
- Company XYZ documentation on slideshow controls settings
- Company XYZ documentation on headers settings
- Company XYZ documentation on product cards settings
- Company XYZ documentation on cards settings
- Company XYZ documentation on section padding settings
- Company XYZ documentation on section backgrounds settings
- Company XYZ documentation on separators settings
- Company XYZ documentation on visibility settings
- Company XYZ documentation on layout widths settings
Use this section to show products that pair well with the current product, such as accessories, bundles, or replenishment items. It works best when you want to increase add-on purchases without interrupting the main buying flow. For a broader overview of how theme sections work, see Shopify documentation on sections and blocks
This section only shows products that have been set up as complementary recommendations in the Search & Discovery app.
Products that are out of stock, or already in the cart, are automatically excluded from the list.
Core settings
Section titled “Core settings”Use Number of items to control how many recommendations appear. If you want the section to return the full available set, use 0 to allow all matching items up to the section limit.
A smaller product count keeps the area compact near the purchase form. A larger count makes more sense when you want a fuller browsing experience in a wider grid or slideshow.
Layout settings
Section titled “Layout settings”These settings control how recommendations are arranged on desktop, tablet, and mobile. For shared layout behavior, see the layout settings reference.
You can choose a separate layout per device, which is useful when you want a comparison-friendly grid on larger screens and a swipe-friendly slideshow on smaller ones. Column settings help balance card size against how many products customers can see at once.
If you do not need a separate tablet layout, let tablet follow the desktop setup to keep the section easier to manage.
Slideshow settings
Section titled “Slideshow settings”When any device uses a slideshow layout, these settings control how customers move through the recommendations. For shared interaction options, see the slideshow controls reference.
The default animation is the most flexible choice for multi-card browsing. Fade creates a simpler, one-at-a-time presentation that feels calmer but reduces how much content can be shown at once.
Autoplay can add motion, but it is usually best used carefully in product recommendations. If you enable it, choose a delay that gives enough time to read product names and pricing.
Navigation, pagination, and next-slide previews help signal that more products are available. Previewing the next slide is especially helpful on touch devices, but it does not apply when fade animation is used.
Fade animation forces a single-slide presentation. It also disables pagination and next-slide previews.
Standard section settings
Section titled “Standard section settings”Header settings
Section titled “Header settings”The Header settings reference covers the shared header controls used here. In this section, the header introduces the recommendation area with a title, optional caption, supporting text, and an optional button.
Keep the heading short so the products remain the focus. Add a button only when it offers a clear next step, such as browsing a broader related collection.
Card settings
Section titled “Card settings”The product card settings reference and card settings reference explain the shared controls used here. These settings let you override the usual product card presentation for this section only.
Use them to make complementary products feel simpler, more compact, or more promotional than cards elsewhere. Consistent image ratios usually give the cleanest result, especially when several products appear side by side.
CTA and variant selector choices change how much action happens directly in the section. If you enable variant selection, make sure the options are easy to understand at a glance.
Banner overlay colors only matter when the card style is set to Banner. For any card color changes, check contrast carefully so titles, prices, and actions stay readable.
Padding settings
Section titled “Padding settings”The Padding settings reference covers the shared spacing controls used in this section. Use padding to control how closely the recommendations sit to surrounding product content.
Tighter spacing helps the section feel connected to the main product area. Larger spacing works better when you want it to read as a separate content block.
Section background settings
Section titled “Section background settings”The Section background settings reference explains the shared background options used here. You can add a color, gradient, image, or video to make the recommendation area stand out.
This works best when you want a stronger visual break from the rest of the product page. If you add a background image or video, keep the cards easy to read and avoid backgrounds that compete with product imagery.
Separator settings
Section titled “Separator settings”The Separator settings reference covers the shared line controls used here. Top and bottom separators give the section more structure without adding a full background treatment.
This is a good option when the page already has enough visual contrast and only needs a light boundary around the recommendations.
Visibility settings
Section titled “Visibility settings”The Visibility settings reference explains the shared responsive display controls. In this section, they are most useful when you want different recommendation strategies on desktop and mobile.
Use this carefully so customers do not lose access to useful add-on suggestions on the devices that matter most to your store.
Width settings
Section titled “Width settings”The Width settings reference covers the shared width controls used here. Content width affects how many cards fit comfortably in a row, while section width matters most when you use a background or want a broader visual treatment.
Wider layouts usually suit larger product sets and multi-column grids. Narrower widths can help keep attention on a smaller number of recommendations.
Usage notes
Section titled “Usage notes”- Set up recommendations first. If the section appears empty, confirm that complementary products have been assigned in the Search & Discovery app. If no eligible recommendations are available, the section will not force a full empty-state experience.
- Choose layout by device. Review both desktop and mobile layouts, since grid and slideshow controls can change alignment, visibility, navigation, and how much content is shown at once.
- Keep defaults when you want fallback styling. Leave background colors, gradients, and media unset if you want the section to inherit a simpler look. Explicit overrides make the area more self-contained.
- Review media carefully. If you use different media for desktop and mobile, check cropping, readability, and loading so the product cards still feel clear on both viewports.
- Preview with real products. Test the section on products that have several recommendations to confirm spacing, counts, and slideshow behavior.