How to add an upsell Popup to your Squarespace store
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 -->
