🎠 Related Item Carousel
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
This plugin transforms the Related Products section into a smooth, responsive horizontal carousel. It displays 3 items at a time on desktop and 2 on mobile, with left/right arrow buttons for manual scrolling. The carousel works with any number of products and keeps all items in a single scrollable row — no animation glitches or overflow issues.
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.
/* related product carousel */
.related-carousel-wrapper {
position: relative;
overflow: hidden;
}
.product-detail .product-list-container {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-behavior: smooth;
gap: 2vw;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.product-detail .product-list-container::-webkit-scrollbar {
display: none;
}
.product-detail .product-list-item {
flex: 0 0 33.33%;
max-width: 33.33%;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.product-detail .product-list-item {
flex: 0 0 50%;
max-width: 50%;
}
}
.carousel-btn {
position: absolute;
top: 40%;
transform: translateY(-50%);
background: rgba(255,255,255,0.9);
border: none;
font-size: 2rem;
padding: 0 10px;
z-index: 2;
cursor: pointer;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
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 container = document.querySelector('.product-details .product-list-container');
if (!container) return;
const wrapper = container.parentElement;
wrapper.classList.add("related-carousel-wrapper");
const prevBtn = document.createElement("button");
prevBtn.innerHTML = "‹";
prevBtn.className = "carousel-btn prev";
const nextBtn = document.createElement("button");
nextBtn.innerHTML = "›";
nextBtn.className = "carousel-btn next";
wrapper.appendChild(prevBtn);
wrapper.appendChild(nextBtn);
const scrollStep = () => {
const item = container.querySelector('.product-list-item');
return item.offsetWidth + parseFloat(getComputedStyle(container).gap || 0);
};
nextBtn.addEventListener("click", () => {
container.scrollBy({ left: scrollStep(), behavior: 'smooth' });
});
prevBtn.addEventListener("click", () => {
container.scrollBy({ left: -scrollStep(), behavior: 'smooth' });
});
});
</script>