How do I show checkout upsells with a headless Shopify Plus setup?

Headless Shopify Plus stores have a store and checkout that are separate. This means that when a customer goes from cart to checkout, the store URL usually changes.

‍

This can be tough for checkout upsells to work. If you’re using checkout.liquid, the checkout upsell is added to cart using Shopify’s Cart API. The app renders the offer with Javascript in checkout. When ‘Add to cart’ is clicked, the app communicates with the Cart API to add the upsell product to the cart. This product will then display in the order summary.

‍

With a headless setup, the cart and the checkout are separated and run a different URL. This prevents the app from adding a product to the cart when ‘add to cart’ is clicked.

‍

You can fix this by upgrading to the new Shopify Checkout Extensibility. You’ll be able to add your upsells using the Checkout Editor in your admin settings. The add to cart is native to this checkout.

‍

Want help setting this up? Reach out in the chat here or in the app!