How to Change the "Read More” blog link

The default “Read More” blog link in Squarespace 7.1 summary blocks is a simple but vital call-to-action for driving visitors to full blog posts. However, the wording “Read More” may not always fit your brand voice or design preference. In this tutorial, we’ll walk you through how to change the “Read More” text, and show you alternative styling options to make it more engaging and in tune with your website's aesthetic.

Table of Contents

• Why Changes the ‘Read More‘ Link

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Change the “Read More” Link?

• Match your brand voice (e.g., “Keep Reading,” “View Post,” or “Explore More”)..

• Enhance user experience with more specific or creative copy.

• Customize styling and better align with your site's design.

Complexity: Easy

---

Step-by-Step Instructions

Step 1

From your Squarespace account, go to the Pages > Custom Code > Code Injection > Footer and then save your changes.

<!--- Change Read More - Blog Link on Squarespace 7.1 --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
  (function () {
    window.addEventListener('DOMContentLoaded', pcBlogLink);

    function pcBlogLink() {
      const linkText = "Read Full Post"; // ← Change this to your desired link text
      const pcBLinks = document.querySelectorAll('.blog-more-link');

      if (pcBLinks.length === 0) {
        console.warn("No .blog-more-link elements found.");
        return;
      }

      pcBLinks.forEach(link => {
        link.textContent = linkText;
      });
    }
  })();
</script>

<!--- End Change Read More - Blog Link on Squarespace 7.1 --->

---

Step 2

Note: You need to change the “YOUR TEXT HERE“ with your own text.

Optional: Add the CSS below to style the link. Paste the code in via Pages > Custom Code > Custom CSS.

.blog-more-link {
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  border-bottom: 2px solid #000;
  padding-bottom: 2px;
  transition: 0.3s ease;
}

.blog-more-link:hover {
  color: #ff6600;
  border-color: #ff6600;
}

---

Key Takeaways

• Squarespace 7.1 doesn’t allow direct renaming of “Read More” links — but you can override them with JavaScript.

• You can customize the text globally or per post for more creative control.

• CSS styling enhances appearance, making your CTA stand out more effectively.

FAQs

Will this change affect all summary blocks?
Yes, this JavaScript targets all ..blog-more-link elements site-wide.

Can I use emojis or icons in the custom text?
Absolutely! For example: "Continue 🚀" or "Read More →".

Does this affect SEO?
No, since this is only visual/UI text change. The actual blog structure remains intact.

Can I remove the “Read More” link completely?
Yes. You can hide it with CSS: .blog-more-link { display: none; }

---

---

Conclusion

Customizing the “Read More” link in Squarespace 7.1 is a subtle yet powerful way to personalize your site. Whether you're looking to align with your branding or just want a more creative touch, changing the text and styling can elevate the user experience and engagement.

---

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