Home Blog How to make Squarespace list items clickable

How to make Squarespace list items clickable

This tutorial will show you how to make your Squarespace list item clickable. This tutorial is specifically designed for Squarespace 7.1. Currently, you can only click on the 'Call To Action' button to access the page, you cannot click on the image, title or text to reach the page.

If you're using Squarespace 7.1, you may have noticed that list items only allow users to click on the "Call to Action" button to access the linked page. Unfortunately, the image, title, and text remain non-clickable by default. This can be frustrating, as users often expect to click on these elements to navigate. In this tutorial, we'll show you how to make your entire list item clickable, improving user experience and engagement.

Benefits of Clickable List Items

Enhanced User Experience: Users naturally expect to click on images and titles to navigate to a page. Making these elements clickable aligns with their expectations, reducing frustration.
Increased Engagement: A larger clickable area makes it easier for users to interact with your content, potentially leading to higher click-through rates.
Better Accessibility: Providing multiple ways to access the linked page improves accessibility, ensuring users with different browsing habits can navigate your site smoothly.
Improved Aesthetics: A fully clickable list item allows for a cleaner design, eliminating the need for redundant buttons.

Complexity: Easy

Step 1

Create your List Item, with the button links.

Step 2

Then, simply add the following JavaScript below to Settings > Advanced > Code Injection > Footer and then save your changes..

<!--- Make Squarespace list items clickable on Squarespace 7.1 --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Get all elements with the class 'list-item'
  const listItems = document.querySelectorAll(".list-item");

  listItems.forEach((listItem) => {
    // Find the button container within the current list-item
    const buttonContainer = listItem.querySelector(".list-item-content__button-container");
    if (!buttonContainer) return; // Skip if no button container is found

    // Extract the href from the anchor tag inside the button container
    const linkElement = buttonContainer.querySelector("a");
    if (!linkElement) return; // Skip if no anchor tag is found

    let link = linkElement.getAttribute("href");
    // If href is empty, replace it with "#"
    if (link === "") {
      link = "#";
    }

    // Wrap the list-item-media-inner content in an <a> tag
    const mediaInner = listItem.querySelector(".list-item-media-inner");
    if (mediaInner) {
      const mediaInnerContent = mediaInner.innerHTML;
      mediaInner.innerHTML = `<a href="${link}" style="text-decoration: none; display: block;">${mediaInnerContent}</a>`;
    }

    // Wrap the <h2> inside list-item-content__text-wrapper in an <a> tag
    const textWrapper = listItem.querySelector(".list-item-content__text-wrapper");
    if (textWrapper) {
      const title = textWrapper.querySelector("h2");
      if (title) {
        const titleContent = title.innerHTML;
        title.innerHTML = `<a href="${link}" style="text-decoration: none;">${titleContent}</a>`;
      }
    }

    // Wrap the <p> inside list-item-content__description in an <a> tag
    const description = listItem.querySelector(".list-item-content__description");
    if (description) {
      const paragraph = description.querySelector("p");
      if (paragraph) {
        const paragraphContent = paragraph.innerHTML;
        paragraph.innerHTML = `<a href="${link}" style="text-decoration: none;">${paragraphContent}</a>`;
      }
    }
  });
});
</script>

Step 3

Note the code is designed to work with 'Auto Layout' sections when set to “Simple List”.

Step 4

Use the code below if you want the button links not to be visible.

<!--- Make Squarespace list items clickable on Squarespace 7.1 --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Get all elements with the class 'list-item'
  const listItems = document.querySelectorAll(".list-item");

  listItems.forEach((listItem) => {
    // Find the button container within the current list-item
    const buttonContainer = listItem.querySelector(".list-item-content__button-container");
    if (!buttonContainer) return; // Skip if no button container is found

    // Extract the href from the anchor tag inside the button container
    const linkElement = buttonContainer.querySelector("a");
    if (!linkElement) return; // Skip if no anchor tag is found

    let link = linkElement.getAttribute("href");
    // If href is empty, replace it with "#"
    if (link === "") {
      link = "#";
    }

    // Wrap the list-item-media-inner content in an <a> tag
    const mediaInner = listItem.querySelector(".list-item-media-inner");
    if (mediaInner) {
      const mediaInnerContent = mediaInner.innerHTML;
      mediaInner.innerHTML = `<a href="${link}" style="text-decoration: none; display: block;">${mediaInnerContent}</a>`;
    }

    // Wrap the <h2> inside list-item-content__text-wrapper in an <a> tag
    const textWrapper = listItem.querySelector(".list-item-content__text-wrapper");
    if (textWrapper) {
      const title = textWrapper.querySelector("h2");
      if (title) {
        const titleContent = title.innerHTML;
        title.innerHTML = `<a href="${link}" style="text-decoration: none;">${titleContent}</a>`;
      }
    }

    // Wrap the <p> inside list-item-content__description in an <a> tag
    const description = listItem.querySelector(".list-item-content__description");
    if (description) {
      const paragraph = description.querySelector("p");
      if (paragraph) {
        const paragraphContent = paragraph.innerHTML;
        paragraph.innerHTML = `<a href="${link}" style="text-decoration: none;">${paragraphContent}</a>`;
      }
    }

    // Hide the button container
    buttonContainer.style.display = "none";
  });
});
</script>

Conclusion

By implementing these simple CSS or JavaScript solutions, you can make your entire Squarespace list item clickable, ensuring a smoother and more intuitive browsing experience for your visitors. This small tweak can significantly improve user engagement and make navigation more seamless.

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

Book Your Quick Help Virtual Call