How to make Squarespace list items clickable

This tutorial will show you how to make your Squarespace list item clickable. 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.

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>

(function() {
    window.addEventListener('DOMContentLoaded', pcLinkItems);

    function pcLinkItems() {

      let pcLink = document.querySelectorAll('.list-item-content__button'); 
      let pcAddLinkItem = document.querySelectorAll('.list-item'); 
      let i;

      for (i=0; i<pcLink.length; i++) {
          let pcLinkAttr = pcLink[i].getAttribute("href");
          if (pcLink[i].textContent !== "") {
             pcAddLinkItem[i].innerHTML = "<a href=" + pcLinkAttr + ">" + pcAddLinkItem[i].innerHTML + "</a>"; 
          }
      }
    }
  }());

</script>

---

Step 3

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

---

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, express 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.