🛒 Add To Cart - Always On The Bottom After Scroll
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
With this code, the add to cart button will be displayed at the bottom of the product page once the user has scrolled past the fold (100vh).
How to use this code
This code is designed to work on individual product pages in a Squarespace store. This code has two parts: custom CSS to style the button and Javascript to place it.
Part 1/2: Custom CSS
Add the following code to your site wide CSS. I’d recommended that you adjust the width of the button on screens larger than 768px, currently displayed at 40% in the code below.
.product-detail .sqs-add-to-cart-button-wrapper.sticky-active {
position: fixed !important;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
background: white;
padding: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
}
@media only screen and(min-width:768px){
.sqs-add-to-cart-button-wrapper.sticky-active .sqs-add-to-cart-button{
width:40%!important;
margin:auto
}
}
Part 2/2: Javascript
Add the following code to your site wide footer code injection. You’ll find this under Pages → Custom Code → Code Injection → Footer
<script>
document.addEventListener("DOMContentLoaded", function () {
const buttonWrapper = document.querySelector(".sqs-add-to-cart-button-wrapper");
if (!buttonWrapper) return;
window.addEventListener("scroll", () => {
const scrollY = window.scrollY;
const trigger = window.innerHeight;
if (scrollY > trigger) {
buttonWrapper.classList.add("sticky-active");
} else {
buttonWrapper.classList.remove("sticky-active");
}
});
});
</script>