How to Change Default Text Labels in Squarespace

You’ve designed an amazing e-commerce website, and you’re really happy with how it looks overall. But there’s just something off about the “Sold Out” product marks on your inventory. You wish they said something like “Sold” or “Unavailable” or maybe even “Full”.

But you can’t change this text easily in Squarespace. Well, not without a little custom coding.

Today, I offer you a few JavaScript code snippets to help you customize the default text for:

  • store products that are “Sold Out” or on “Sale”

  • the “Read More” link on blog post excerpts

  • the “Newer” and “Older” pagination links on your Blog page

How to Change Default Text Labels in Squarespace

To use these coding snippets, copy/paste them into Settings > Advanced > Code Injection > Footer.


Note: These snippets were tested on the Brine template. If the code snippet doesn’t work for you, leave a comment and let me know what template you’re working with.


“Sold Out”

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

“Sale”

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

“Read More”

<script>
  // Read More Text

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

“Newer” and “Older”

<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>

Don’t Feel Limited By Default Text

While Squarespace is excellent for the typical website, sometimes the default settings don’t make sense with your design. Use these snippets to fully customize and design your Squarespace website exactly the way that you want.


What default text label would you like to change? Leave a comment and let me know.


Comments (6)

Leave a Comment

Your email address will not be published. Required fields are marked *

  1. I am trying to change the ‘older posts’ & ‘newer posts’ links on my blog section. I have used the above code you provided and I’ve tried pasting it in the code injection footer section and in the blogger advanced settings section where I put it in the ‘below body’ section. Neither have worked so I have no idea what I’m doing wrong. Any suggestions?

  2. Hi, I’m using Brine (Pedro) and trying to change the blog “read more >” link text on our home page. I have them in a summary block and would like them to read “read bio” instead. I’ve tried all kinds of codes, ensuring it uses “a.summary-read-more-link” with no luck. It seems the best place for the code would be in the advanced settings of that particular page/block. Any suggestions? I’m so lost!

    My current code:

    Y.on(“domready”, function () {
    Y.all(“.body a.summary-read-more-link”).each(function (link) {
    link.setContent(“Read bio”);
    });
    });

    1. Hey there. 2 things that are causing problems with this code. 1) There are curly quotes instead of straight quotes being used. Curly quotes break code. 2) .body should be body. If you copy/paste what I have below, it should work fine.

      
      Y.on("domready", function () {
          Y.all("body a.summary-read-more-link").each(function (link) {
              link.setContent("Read bio");
          });
      });
      
  3. Thanks for this! Do you have a solution for changing the default "read more" text for one blog only on a site with multiple blogs?

    1. Yes. You’ll need to get the collection-id for the particular blog that you want. You can use the Squarespace Collecting/Block Identifier Chrome plugin to help you with this. Once you find it, add the collection-id (should have a # sign at the beginning) in front of .BlogList-item-readmore span in the code. Make sure to add a space.

      .BlogList-item-readmore span

      will turn into

      #collection-id .BlogList-item-readmore span