Everything you need to set up and customize the Complimentary Products block — from connecting Shopify's Search & Discovery app to configuring card layout, quick view, and child blocks.
Complimentary products are items that pair well with whatever a customer is currently viewing — think of them as "goes great with" suggestions. Showing these recommendations on your product pages helps customers discover related items and can increase your average order value.
In the Boardwalk theme, the Complimentary Products block displays recommended products in a horizontal card layout: the product image sits on the left, with title, price, and other details on the right. Products stack vertically so customers can easily browse through all recommendations. Hovering over a card darkens the image and reveals a magnifying glass icon, and clicking anywhere on the card opens a quick view pop-up where customers can see full product details and add items to their cart — all without leaving the page.
Note: This block pulls its product recommendations directly from Shopify's Search & Discovery app. You do not manually choose which products appear — they are determined by the complementary product relationships you set up in the app.
Follow these steps to add complimentary product recommendations to your product pages using the Boardwalk theme.
The Complimentary Products block requires Shopify's free Search & Discovery app. If you haven't already installed it, go to the Shopify App Store and add it to your store.
Note: The Search & Discovery app is free and built by Shopify. Without it, the Complimentary Products block will have no products to display.
Open the Search & Discovery app from your Shopify
admin. Navigate to
Product recommendations and select a product.
Under the Complementary products section,
add the products you want to recommend alongside it.
Repeat this for each product where you want complimentary
suggestions to appear.
Tip: Complementary relationships work in one direction. If you add Product B as complementary to Product A, it does not automatically add Product A as complementary to Product B. You'll need to set up each relationship individually.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor to
navigate to a Product page.
In the Theme Editor sidebar, locate the product page content area. Click Add block and choose Complimentary products from the list. The block will appear with product cards pulled from your Search & Discovery recommendations.
Click the Complimentary products block in the sidebar. Adjust the maximum number of products to show, image width, content gap, card corner radius, text alignment, and color scheme to match your store's design.
Inside the Complimentary Products block, you can add, remove, and reorder child blocks to control what information appears for each product card. By default, the block includes a product title and price, but you can also add swatches, sale information, text, dividers, and spacers.
Click Save in the Theme Editor. Preview a product page that has complementary products configured in the Search & Discovery app to verify the block displays as expected.
These settings are accessible by clicking the Complimentary Products block in the Theme Editor sidebar. They control the overall layout, card style, and appearance of the block.
Controls how many complementary products are displayed. Range: 1 to 8. If fewer complementary products are configured in the Search & Discovery app than this value, only the available products will show.
Sets the spacing between child blocks in the content area of each card (the right side with the title, price, etc.). Range: 0px to 24px.
Controls how much horizontal space the product image takes up within each card. Range: 20% to 50%. A higher value makes the image larger relative to the content area.
Rounds the corners of the product image and card. Range: 0px to 24px. Set to 0 for sharp corners.
Controls the horizontal alignment of the content area
text. Options: Left, Center,
or Right.
Select a color scheme for the product cards. When the card color scheme differs from the parent section's color scheme, extra padding is automatically added around each card so the background color is visible.
Each complimentary product card contains a content area on the right side of the image. You control what appears in this area by adding, removing, and reordering child blocks inside the Complimentary Products block. The product image is always present on the left and cannot be removed.
Displays the product image on the left side of the card. This is a static block that is always present and cannot be removed. You can configure the image aspect ratio and whether a second image appears on hover.
Shows the product name. You can customize the font family, weight, size, line height, and letter spacing to match your store's typography.
Displays the product price. When a product is on sale, both the original and discounted prices are shown. You can adjust the font size, line height, and alignment.
Shows color swatches when a product has a Color option configured. Swatches let customers see available color variants at a glance.
Note: Swatches only appear for products that have a Color option set up in your Shopify admin under Products → Variants. Products without color variants will not display swatches.
Displays sale or discount details for the product. You can customize the typography settings including font family, weight, size, line height, and letter spacing.
A general-purpose text block for adding custom content to the product card, such as a short description or promotional message.
Adds a horizontal line between other child blocks for visual separation.
Adds empty vertical space between other child blocks. Use this for fine-tuning the spacing within each card's content area.
When a visitor interacts with a complimentary product card, a quick view pop-up opens so they can explore the product without leaving the current page.
Hovering over any card darkens the product image and reveals a magnifying glass icon, signaling that the product can be previewed. Clicking anywhere on the card — the image or the content area — opens the Quick View modal, a pop-up overlay that displays detailed product information.
Browse all product images using arrow navigation buttons. The gallery also shows an image counter so customers know how many photos are available.
Displays the product name, vendor (optional), and current price. If the product is on sale, both the original and discounted prices are shown.
If the product has multiple options (such as size or color), swatches or selection buttons appear so the customer can choose their preferred variant before adding to cart.
Shows the current inventory status with a color-coded dot — green for in stock, red for low stock or out of stock, and yellow for backorder items.
Customers can adjust the quantity and add the product directly to their cart. The button shows a loading animation followed by a checkmark confirmation when the item is successfully added.
A link at the bottom of the modal takes the customer to the full product page if they want to see the complete description, additional images, or other information.
Tip: The Quick View modal loads product data in the background without a page reload, so it opens quickly and keeps visitors engaged on the product page.
The Complimentary Products block comes with features that work automatically — no apps or custom code needed beyond the initial Search & Discovery setup.
Complimentary products load as part of the page itself, so they appear instantly when the page opens — there's no delay or loading spinner while data is fetched in the background.
Hovering over a card darkens the product image, reveals a magnifying glass icon, gently zooms the image, and fades the content area. These effects provide a clear visual cue that the card is interactive.
Every card is clickable and opens a quick view pop-up where customers can browse images, select variants, and add the product to their cart — all without leaving the current page.
When the card color scheme is different from the parent section's color scheme, extra padding is automatically added around each card so the card background is visible. When both schemes match, the padding is removed for a cleaner, flush look.
You have full control over what information appears on each card. Add, remove, and reorder child blocks like product title, price, swatches, discount info, text, dividers, and spacers to create your ideal layout.
On mobile, the image width adjusts automatically and the card gap tightens for a compact layout that works well on smaller screens.
While product images are loading, a subtle placeholder animation appears in place of the image to provide a smooth visual experience.
Each product card is keyboard-focusable and can be activated with the Enter or Space key, ensuring customers who navigate with a keyboard can access the quick view just like mouse users.
Some features require action in the Shopify admin before they'll work as expected in your theme.
This block depends on Shopify's free Search & Discovery app to provide complementary product data. Install the app from the Shopify App Store if you haven't already.
The block only shows products that have been set up as complementary in the Search & Discovery app. Open the app, go to Product recommendations, select a product, and add complementary products under the Complementary products section.
Complementary products must have a status of Active in your Shopify admin. Products in draft or archived status won't display on your storefront. Go to Products in your admin and make sure each product's status is set to Active.
Each card displays the product's first image. For the best appearance, make sure your complementary products have at least one image uploaded in the Shopify admin under Products → Media.
The Complimentary Products block is designed for product pages only. It reads recommendation data tied to the specific product being viewed, so it won't work on collection pages, the homepage, or other page types.