How to Add Complementary Products

Checkout Blocks supports showing complementary products within automatic recommendations and as line item upsells. For example, show a different flavor chocolate bar as an upsell (technically a cross sell) for any given chocolate bar.

Setup instructions

  • First populate the complementary products for any given product. You can setup complementary products across your catalog using Shopify's official Search & Discovery app.
  • Enable "Complementary upsells" under Actions on any given Line Item Block within Checkout Blocks.
Complementary upsells
  • You'll then see the complementary upsell button appear on eligible line items in checkout. Add "Display Rules" to the Line Item Block to limit which line items display complementary products:
add complementary

Video guide

Learn more about complementary products

https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-complementary-products


Bulk import recommendations

If you don't currently have complementary prioducts setup and have hundreds or thousands of products, we recommend using a 3rd party app to bulk import the configuration:

The metafield structure is as follows:

"namespace": "shopify--discovery--product_recommendation",
"key": "complementary_products",
"value": "[\"gid://shopify/Product/8705265336599\"]",