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
%}