How to add an upsell Popup to your Squarespace store

1. Use the Lightbox Anything plugin

Step 2. Create an upsell page

Step 3. Use the code below

This code will redirect to Upsell Page after clicking on Add To Cart Button. All you need to do is change upsellPageUrl to your upsell page URL and make sure express checkout is disabled.

If Ajax Loading is enabled on a site, then this code must be added to the global Code Injection. If not, then it can be added to the shop header code injection or for a specific product you can insert it to the additional info section.

<!-- Redirect to Upsell Page after clicking on Add To Cart Button -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->
<script>
// /upsell-page is the default URL. To change it, replace /upsell-page with the required URL.
var upsellPageUrl = '/upsell-page';
////////////////////////////////
function redirectToUpsellPageHandler(wrapper){var addToCartButton=wrapper.querySelector(".sqs-add-to-cart-button"),productVariants=wrapper.parentNode.parentNode.querySelector(".product-variants");addToCartButton&&addToCartButton.addEventListener("click",onClick);var shopifyBuyFrame=document.querySelector(".shopify-buy-frame iframe");if(shopifyBuyFrame){var shopifyAddToCartButton=shopifyBuyFrame.contentWindow.document.querySelector(".shopify-buy__btn");shopifyAddToCartButton&&shopifyAddToCartButton.addEventListener("click",onClick)}function isVariantInStock(){return productVariants.getAttribute("data-variant-in-stock")}function onClick(){(productVariants&&isVariantInStock()||!productVariants)&&setTimeout((function(){document.location.href=upsellPageUrl}),1200)}}function redirectToUpsellPage(){setTimeout((function(){[].slice.call(document.querySelectorAll(".sqs-add-to-cart-button-wrapper")).forEach(redirectToUpsellPageHandler)}),1500)}document.addEventListener("DOMContentLoaded",redirectToUpsellPage),window.addEventListener("mercury:load",redirectToUpsellPage);
</script>
<!-- end Redirect to Upsell Page after clicking on Add To Cart Button -->