Product Page Upsell (Search & Discovery app) - Free Tutorial

In this tutorial, we'll look at how to add upsell products to the product page. These upsell products can be quickly added to the cart directly from the primary product page.

To do this we are using the complementary products feature of the Shopify Search & Discovery app.

Watch the video

Additional Step if using our collection swatches solution

Edit main-product.liquid

Add disable_card_swatches: true to the card-product render under the complementary block (ie. in the <product-recommendations> element)

  {% render 'card-product',
    card_product: product,
    media_aspect_ratio: block.settings.image_ratio,
    show_secondary_image: false,
    lazy_load: false,
    skip_styles: skip_card_product_styles,
    quick_add: quick_add,
    section_id: section.id,
    horizontal_class: true,
    horizontal_quick_add: true,
    

    disable_card_swatches: true

%}