How to make two Squarespace List items move together

Our technical lead, Will Hammond, provides a little Squarespace custom code that can make a big difference to your website design.
Need Squarespace custom code? Why not arrange a tune-up session with Will…

It's a common scenario: a client comes to us with a vision for their website that Squarespace's default functionalities can't quite realize.

That's where we come in, bringing the vision to life with some coding magic. In this blog post, I’ll guide you through adding a bit of code that can extend the capabilities of Squarespace to meet your unique needs.

For example, consider our recent project. The client wanted a visually-driven website, which we chose to execute using a Squarespace List to pair text with corresponding imagery. This created a cohesive and aesthetically pleasing effect across the website. However, we encountered a small hiccup with the user experience. When navigating through the List using the left/right arrows, only the currently selected list item would move. This meant that our carefully matched text and images could become misaligned, disrupting the visual story we aimed to tell.

To address this, we needed a solution that would ensure both list items moved synchronously, maintaining the intended pairings of text and image. With some collaborative brainstorming, we crafted a simple yet effective piece of code.

Here's the code we used:
Please remember that this code requires the Business plan to use as it is JavaScript.
Please bear in mind that this code will affect all Squarespace Lists - if you want to target one specific list, you will need to find the data-section-id attribute of the section. We have a guide for that here.
Alternatively, you can install the Squarespace ID Finder Chrome extension, which can be found here.

Place this code in the Footer section under Settings > Advanced > Code Injection.

<script>
let doubleClickList = document.querySelectorAll(".user-items-list-carousel__arrow-button");
function doubleClick() {
    doubleClickList.forEach(button => {
        button.addEventListener("click", e => 
            
        )
    })
}
doubleClick();
</script>

Now, before you copy and paste this code into your site, let's break down what this script is intended to do. The document.querySelectorAll method is targeting elements with the class .user-items-list-carousel__arrow-button, which are the arrows used to navigate the Squarespace List.

The doubleClick function then adds an event listener to each button that will trigger additional code (that you will provide) when the button is clicked. This is where you would insert the logic to make both the text and image list items move together.

As it stands, the above script is a template. You'll need to fill in the commented-out section with the specifics of how you want the items to move together. This could involve changing the style properties of the next list item, triggering a click event on another element, or perhaps using a Squarespace API call, depending on your exact setup.

Keep in mind that this code is just the start—it's a foundation that you'll build upon to create the specific interaction your site requires. Every Squarespace site can be slightly different, so you may need to adjust the class names or logic to fit your particular use case.

I hope this explanation has shed some light on the process and purpose of the code snippet provided. Remember, the joy of web design is in creating functional, beautiful sites that cater to your and your client's needs. With a little bit of code, even the sky isn't the limit!

I hope you found this helpful :)

Will

---

Need Squarespace custom code for your website? Why not arrange a tune-up session with Will…