Complementary products

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on slideshow controls settings
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on icons
6. Company XYZ documentation on product variants
7. Company XYZ documentation on product cards settings
8. Company XYZ documentation on cards settings
9. Company XYZ documentation on colors settings
10. Company XYZ documentation on section padding settings
11. Company XYZ documentation on section backgrounds settings
12. Company XYZ documentation on using video
13. Company XYZ documentation on separators settings
14. Company XYZ documentation on visibility settings

Helpful videos

Shopify video: 9 tips to optimize your product pages for more sales

Shopify video: 9 tips to optimize your product pages for more sales

Show related add-on products alongside the current product to encourage larger orders. This block uses your complementary product setup to surface relevant items while automatically hiding unavailable products and products already in the cart. For how blocks are arranged in themes, see Shopify documentation on sections and blocks

This block depends on complementary product data being set up in the Search & Discovery app. If nothing appears, check that related products have been assigned for the product you are viewing.

Core settings

Use the item count to control how much choice you show at once. Setting the count to 0 returns all available matches, up to 50, which can work well for broad catalogs but can feel crowded if your product cards show lots of detail.

If you want this block to act as a quick add-on prompt, keep the list tighter. A smaller set is usually easier to scan and feels more intentional.

Note

The final number shown can be lower than your chosen count because this block hides out-of-stock items and products already in the cart.

Layout settings

These settings control how recommendations are arranged on desktop, tablet, and mobile. Use a grid when you want more products visible at once, or a slideshow when you want a more compact, focused presentation.

Column choices matter most in grids and multi-card slideshows. On tablet, setting the column count to 0 reuses the desktop value, which is helpful when you want fewer device-specific adjustments.

Higher column counts work best with simpler cards. If cards include extra text, buttons, or variant selectors, fewer columns usually keep the block easier to browse.

Slideshow settings

When you use slideshow layouts, these settings shape how the block moves and how shoppers interact with it. You can control animation style and speed, autoplay, looping, navigation position, pagination, and slide previews. For more on these controls, see slideshow controls.

Fade is best when you want to spotlight one recommendation at a time. It forces a single-slide layout and disables preview-style behavior and pagination styles that rely on multiple visible slides.

If you enable autoplay, keep the motion calm and easy to interrupt. Pause on hover can make autoplay feel less intrusive on desktop.

Tip

Use a sliding layout when customers should compare several products quickly. Use fade when you want a cleaner, one-product-at-a-time presentation.

Header settings

The optional header helps explain why these products belong together and gives the block more structure on the page. A short heading, caption, or subheading can make the recommendations feel curated instead of automatic.

You can also add an icon and a button to lead shoppers to a broader collection, bundle page, or buying guide. Keep button text specific so it supports the recommendations instead of competing with them.

Choose the heading type to fit the rest of the page hierarchy. If the page already has a strong main heading, a lower heading level will usually fit better. For more guidance, see headers and icons.

Standard block settings

Card settings

These shared settings let you override the usual product card presentation for this block. You can adjust card style, image ratios, text density, CTA treatment, text alignment, and variant selector behavior to better suit add-on recommendations.

Simpler card styles usually work best when you show several products at once. If you enable variant selectors, make sure they genuinely help the buying decision instead of making the block feel too busy. For variant selector setup, see product variants and for broader card behavior see product cards.

Card color settings

These settings override the card appearance inside this block only. They are useful when you want complementary products to stand out from other product lists without changing the broader theme.

Banner overlay controls only apply when you use the Banner card style. Otherwise, focus on background, border, heading, and text colors that keep prices, titles, and actions easy to read. For more, see cards.

Color settings

These settings control the block-level icon and text colors around the header content. They are most useful when you want the heading area to coordinate with a custom background or campaign style.

Check contrast carefully if the block sits on a colored, image, or video background so headings and supporting text stay readable. See colors.

Padding settings

Padding controls the space above and below the block content. Increase it when the recommendations need more breathing room, or reduce it when the block should feel closely tied to nearby product details.

Padding changes are more noticeable when you also use backgrounds or separators. See section padding.

Block background settings

These settings add a color, gradient, image, or video behind the entire block. They can help feature the recommendation area, but bold backgrounds can also make the layout feel heavier if the product cards already contain a lot of detail.

Overlay controls help maintain text readability on image or video backgrounds. Mobile-specific background media is useful when desktop artwork crops poorly on smaller screens. See section backgrounds and using video.

Caution

Strong backgrounds combined with dense card layouts can make the recommendations harder to scan. If the block starts to feel crowded, simplify either the background or the card styling.

Separator settings

Separators add a top or bottom line to visually divide this block from nearby content. They work well when the page has several stacked content areas and needs a little more structure.

If spacing or background contrast already separates the block clearly, you may not need them. See separators.

Visibility settings

Visibility controls let you hide this block on desktop or mobile. This is useful when you want a different recommendation strategy or layout on smaller screens.

If you hide the block on one device range, make sure related products are still easy to discover elsewhere on the page. See visibility.

Editor settings

The editor title only changes how this block is labeled in the editor sidebar. Rename it when you use multiple recommendation-style blocks so they are easier to distinguish while editing. For related customization options, see Shopify documentation on customizing sections

Usage notes

1. Set up relationships first. If the block appears empty, confirm that complementary products have been assigned for the current product.
2. Keep the list focused. Fewer items usually create a stronger recommendation area and make decisions easier.
3. Match layout to card density. Use fewer columns or simpler card styles when cards include extra text, buttons, or variant selectors.
4. Use motion carefully. Autoplay, fade, and preview settings should support browsing rather than distract from the product page.
5. Test both viewport sizes. Review desktop and mobile to make sure controls, spacing, and media choices still feel clear in each layout.
6. Expect different product states. Check the block with eligible products, unavailable items, and products already in the cart so you can judge the real output.