Complementary products

Add a hand-picked "Pairs well with" block to Avante product pages using Shopify Search & Discovery — cross-sell related items and lift your average order value.

Show a hand-picked block of related products on your product pages to cross-sell and lift average order value. Unlike automatic recommendations, you choose exactly which products appear — perfect for "complete the look" or "add the matching case".

---

How it works

Complementary products live in Shopify's native complementary-products metafield. You use the free Search & Discovery app to choose which products to pair — but the block itself reads straight from the metafield, so once links are set, Avante keeps showing them even if the app is later removed. Avante renders the block on the product page with product image, price, and optional vendor and rating.

This is different from automatic Product Recommendations ("You might also like"), which Shopify generates algorithmically. Complementary products are fully controlled by you.

Note: if you haven't linked any complementary products to a product, Avante hides the block on that product's page — so you never get an empty section.

---

1

Step 1: Install Shopify Search & Discovery

1. Open the Shopify Search & Discovery app in the App Store and install it
2. Confirm it's active in Shopify Admin → Apps

2

Step 2: Link complementary products

1. Go to Shopify Admin → Apps → Search & Discovery → Recommendations
2. Click Add recommendations (top right) and choose the product you're cross-selling from. Products with nothing set yet show "No products" in the Complementary products column

1. Under Complementary products, select the items to pair with it (up to 10)
2. Save

Tip: this is the only place to choose complementary products — they're set in the Search & Discovery app, not on the product page in Shopify Admin and not in the theme. The theme block just displays whatever you link here.

3

Step 3: Add the block in the Theme Editor

1. Go to Online Store → Themes → Edit theme
2. In the top page selector, open Products → Default product
3. Select the Product overview section, click Add block, and choose Complementary products
4. Drag the block where you want it — e.g. right below the buy buttons
5. Save

4

Step 4: Style the block

Click the block to open its settings. Most are self-explanatory — heading, heading size, image ratio and focal point, price position, vendor, hover image, color pills, pickup availability. Two have dependencies worth knowing:

• Heading — set your text (e.g. "Pairs well with" or "Best fits with"). Wrap a word in {curly brackets} to apply the Secondary heading font from Theme settings → Typography
• Show product rating — only shows if you have a product-rating app installed
• Show short description — pulls from the product's Subtitle metafield. Learn more

Result

The product page shows your hand-picked "Pairs well with" block. If no complementary products are linked, the block stays hidden.

---

Troubleshooting

The block doesn't show on the product page

First, check that complementary products are linked to that specific product in Search & Discovery — an empty list makes Avante hide the block. A linked product also won't appear unless it's in stock (quantity above 0), set to Active, published to the Online Store, priced above $0, not a gift card, and not already in the customer's cart.

What's the difference between Complementary and Recommended products?

Complementary ("Pairs well with") is manual cross-sell you control. Recommended ("You might also like") is Shopify's automatic, algorithm-driven block.

---

Related

• Filters & search — also powered by Search & Discovery