How to redirect to another page on clicking on the ‘Add to Cart’ button
In Squarespace 7.1, clicking the "Add to Cart" button by default simply adds the product to the cart without any page redirection. But what if you want to redirect visitors to a different page—like a custom checkout experience, upsell page, or thank-you page—right after they click Add to Cart?
In this tutorial, you'll learn how to set up a redirect so that clicking the Add to Cart button automatically takes the customer to another page on your website.
Table of Contents
Why Redirect After Adding to Cart?
Redirecting the "Add to Cart" button can help:
Streamline Checkout Flow: Send customers directly to the cart or checkout page.
Upsell: Redirect to a related product or a limited-time offer page.
Personalize UX: Redirect to a thank-you message or custom next steps.
Complexity: Easy
Step-by-Step Instructions
Step 1
From your Squarespace account, simply add the following JavaScript below to Pages > Custom Code > Code Injection > Footer and then save your changes.
<script>
function pcRedirectedPage() {
let pcPageUrl = '/[Page URL]'; // The redirect page URL
let pcAddToCartButton = document.querySelector('.sqs-add-to-cart-button');
let pcProductVariants = document.querySelector('.product-variants');
function pcVariantInStock() {
return pcProductVariants.getAttribute('data-variant-in-stock');
}
function pcAddButtonClick() {
if (pcProductVariants && pcVariantInStock() || !pcProductVariants) {
setTimeout(function() {
document.location.href = pcPageUrl;
}, 1000);
}
}
if (pcAddToCartButton) {
pcAddToCartButton.addEventListener('click', pcAddButtonClick);
}
}
document.addEventListener('DOMContentLoaded', pcRedirectedPage);
window.addEventListener('mercury:load', pcRedirectedPage);
</script>Please note:
The '/[Page URL]' should reflect the page the user will be redirected to once the ‘‘ button is clicked, like '/view-more-product'.
Key Takeaways
You can customize the behavior of the Add to Cart button using JavaScript.
Redirects are helpful for upselling, guiding user flow, or showing next-step content.
Always test the redirect on desktop and mobile to ensure a smooth experience.
Add a small delay (e.g., 500ms) to make sure the product is added to the cart before the redirect fires.
FAQs
Will this work on all product pages?
Yes, as long as the product uses the default product block and the add-to-cart button isn't deeply customized.
Can I redirect to an external URL?
Absolutely. Just replace the URL in the code with a full link (e.g., https://yourdomain.com/checkout).
Does this interfere with the cart functionality?
No. The product is still added to the cart before the redirect occurs.
Conclusion
Redirecting users after clicking the Add to Cart button can help create a more guided and customized shopping experience on your Squarespace 7.1 website. Whether you're leading them to a special offer, a checkout page, or simply confirming their action, this small change can significantly improve user flow and conversions.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
