How to change ‘Read more’ link within a Summary Block - Squarespace 7.1

If you want to use the Summary Block for a different purpose, you can override the link using the following code.

Change on ALL pages?

Add the following code to Website Tools > Code Injection > Footer

Change the Summary Block on INDIVIDUAL pages?

Add the following code to Page > Advanced > Code Injection

---

Change “Read More” text on all Summary Blocks - using CSS

Add this code into Custom CSS

.summary-read-more-link{
  font-size:0!important
}

.summary-read-more-link:after{
  font-size: 0.88rem!important;
  content: "Learn more →";
}

---

Change “Read More” text on an specific Summary Block - Using CSS

Add this code into Custom CSS - and if you need to find the block ID then make sure you have the Chrome Extension

//Summary Block - Replace "Read More" text globally
#block-yui_3_17_2_1_1765013648182_4308
.summary-read-more-link{
  font-size:0!important
}

.summary-read-more-link:after{
  font-size: 0.88rem!important;
  content: "Learn more →";
}

---

Change “Read More” text on all Summary Blocks - using JavaScript

Change on ALL pages?

Add the following code to Website Tools > Code Injection > Footer

Change the Summary Block on INDIVIDUAL pages?

Add the following code to Page > Settings (Cog) > Advanced > Code Injection

<!-- Read More Blog Link -->
<script>
(function () {
  var readMore = document.querySelectorAll("a.blog-more-link");
  for (let i = 0; i < readMore.length; i++) {
    readMore[i].innerHTML = "Learn more →";
  }
})();
</script>