How to add an upsell page to your Squarespace store

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: Dmitry Kiselyov @_dmitrykiselyov -->
<script>
function redirectToUpsellPageHandler(wrapper) {
  var upsellPageUrl = '/upsell-page';
  var addToCartButton = wrapper.querySelector('.sqs-add-to-cart-button');
  var productVariants = wrapper.querySelector('.product-variants');

  if (addToCartButton) {
    addToCartButton.addEventListener('click', onClick);
  }

  function isVariantInStock() {
    return productVariants.getAttribute('data-variant-in-stock');
  }

  function onClick() {
    if (productVariants && isVariantInStock() || !productVariants) {
      setTimeout(function() {
        document.location.href = upsellPageUrl;
      }, 1000);
    }
  }
}

function redirectToUpsellPage() {
  // Product Page
  var productPage = document.querySelector('.collection-type-products.view-item');
  if (productPage) {
    redirectToUpsellPageHandler(productPage);
  }

  // Product Blocks
  var productBlocks = [].slice.call(document.querySelectorAll('.sqs-block-product'));
  productBlocks.forEach(redirectToUpsellPageHandler);
}

document.addEventListener('DOMContentLoaded', redirectToUpsellPage);
window.addEventListener('mercury:load', redirectToUpsellPage);
</script>
<!-- end Redirect to Upsell Page after clicking on Add To Cart Button -->

Want the upsell page to open in a lightbox?

Lightbox Version

Note: For this version you’ll need a Lightbox Plugin.

<!-- Lightbox Upsell Page -->
<!-- Open Upsell Page in Lightbox after clicking on Add To Cart Button -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script>
function redirectToUpsellPageHandler(wrapper) {
  var upsellPageUrl = '/upsell-page';
  var addToCartButton = wrapper.querySelector('.sqs-add-to-cart-button-wrapper');
  var productVariants = wrapper.querySelector('.product-variants');
  var lightboxLink = document.querySelector('a[href="' + upsellPageUrl + '"]');

  if (!lightboxLink) {
    lightboxLink = createLightboxLink(upsellPageUrl);
    document.body.appendChild(lightboxLink);
    window.pluginLightbox();
  }

  if (addToCartButton) {
    addToCartButton.addEventListener('click', onClick);
  }

  function createLightboxLink(href) {
    var link = document.createElement('a');
    link.setAttribute('href', '#lightbox>' + href);
    return link;
  }

  function isVariantInStock() {
    return productVariants.getAttribute('data-variant-in-stock');
  }

  function onClick() {
    if (productVariants && isVariantInStock() || !productVariants) {
      setTimeout(() => lightboxLink.click(), 1500);
    }
  }
}

function redirectToUpsellPage() {
  // Product Page
  var productPage = document.querySelector('.collection-type-products.view-item');
  if (productPage) {
    redirectToUpsellPageHandler(productPage);
  }

  // Product Blocks
  var productBlocks = [].slice.call(document.querySelectorAll('.sqs-block-product'));
  productBlocks.forEach(redirectToUpsellPageHandler);
}

document.addEventListener('DOMContentLoaded', redirectToUpsellPage);
window.addEventListener('mercury:load', redirectToUpsellPage);
</script>
<!-- end Lightbox Upsell Page -->