How to customize “Read More” blog text in Squarespace

Whether you're using the Squarespace Blog pages to organize Podcasts, show off a Portfolio, or Photo Gallery, you will want to change the text link that says, Read More into something more custom. Thankfully it is super simple, and I'll add a few more codes too.

A few notes: 

• You must be on a business or higher Squarespace plan. 

• Place these codes into your Footer Code Injection. Settings > Advanced > Code Injection > Footer

Squarespace 7.1 - Read More Blog Link

<script> // Read More Text document.querySelectorAll('.blog-more-link').forEach(function(summary) { summary.textContent = "Listen Now"; // Customize text here }) </script>

Squarespace 7.0 - Read More Blog Link

<script> // Read More Text document.querySelectorAll('.BlogList-item-readmore span').forEach(function(summary) { summary.textContent = "View Portfolio"; // Customize text here }) </script>

---

Extras

Squarespace 7.0 & 7.1 - Sold Out Label

<script>
  // Sold Out Text
  document.querySelectorAll('.product-mark.sold-out').forEach(function(product) {
      product.textContent = "Class Full"; // Customize text here
  });
</script>

Squarespace 7.0 & 7.1 - Sale Label

<script>
  // Sale Text
  document.querySelectorAll('.product-mark.sale').forEach(function(product) {
      product.textContent = "Clearance"; // Customize text here
  });
</script>

Squarespace 7.1 - Newer & Older Blog Footer

<script>
  // Blog Pagination Links
  document.querySelectorAll('.item-pagination-link--prev .item-pagination-prev-next').forEach(function(prevLink) {
    prevLink.textContent = "Back"; // Customize "Previous" text here
  })
  document.querySelectorAll('.item-pagination-link--next .item-pagination-prev-next').forEach(function(nextLink) {
    nextLink.textContent = "Forward"; // Customize "Next" text here
  })
</script>

Squarespace 7.0 - Newer & Older Blog Footer

<script>
  // Blog Pagination Links
  document.querySelectorAll('.BlogList-pagination-link-label').forEach(function(paginationLink) {
      if (paginationLink.textContent == "Newer") {
          paginationLink.textContent = "Forward"; // Customize "Newer" text here
      } else {
          paginationLink.textContent = "Back"; // Customize "Older" text here
      }
  })
</script>

Please let me know if you have any questions or comments below!