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](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F6uh16tjz%2Fproduction%2Fdd84470a386ef3f0847d77f22a3160247a59a829-1942x1318.png%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
- 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](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F6uh16tjz%2Fproduction%2Feb1958966a65dbbdd90eb51cf97b6d21d1d4b28d-964x708.png%3Ffit%3Dmax%26auto%3Dformat&w=2048&q=75)
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 products setup and have hundreds or thousands of products, we recommend using a 3rd party app to bulk import the configuration:
- https://support.ablestar.com/article/165-bulk-editing-shopifys-search-discovery-fields
- https://apps.shopify.com/metafields-editor-2
- https://apps.shopify.com/excel-export-import.
The metafield structure is as follows:
"namespace": "shopify--discovery--product_recommendation",
"key": "complementary_products",
"value": "[\"gid://shopify/Product/8705265336599\"]",