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 (22)

Leave a Comment

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

          1. Try this:

            document.querySelectorAll('.ProductList-filter-dropdownToggle-label-title').forEach(function(product) {
                  product.textContent = "Sort"; // Customize text here
            });
          2. Let me know if it ends up changing the text from Category to Sort in more places than you wanted. I didn’t see anything when I checked out the site, but it’s hard to say without testing the code and actually peeking around the website. 🙂

          3. Yeah, dealing with AJAX is separate code entirely. Most designers seem to turn off AJAX just because so much of the Squarespace code out there doesn’t handle it, so the code in this blog post also doesn’t get into AJAX issues. I’ll write up another article about how to watch for page changes when you have AJAX running. 🙂

  1. Hello ! I’ve tried to do it for “Five” template and it didn’t work. I have “Syntax Error On Line 1” 🙁 Could you please help me with ? Have a nice day, Polina

    1. It sounds like you’re trying to place the code snippet in Custom CSS instead of Code Injection. These are 2 completely different areas of your site, and this won’t work in Custom CSS.

      Additionally, these were made for Brine, not Five. But I’d be happy to rewrite it for you. Just make sure you place them in Settings > Advanced > Code Injection > Footer.

  2. Hi, I would like to do something similar, but for products we tag as new, can I add a label to the product with New, so that on the products page, they can easily see which are new products? So it would look like a sale badge, but say new. Not sure if this is possible? Thank you.

    1. It’s not something that’s built in, but it’s something I could potentially make. Would you want it to look just like the sale mark or everything except a different color?

  3. I am using the Fulton template. On the blog list page, I’d like “Read More” to change to another text. I tried to use what you’ve shown, it didn’t work. : ( Any suggestions?
    Thanks!

    1. Hey there! It looks like you got that working. These snippets were made with Brine in mind which is why it didn’t work for you. I’ll be going through all of my posts and updating for more templates and also for 7.1 soon. Thanks for writing in and I’m glad that you found a solution!

  4. 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?

  5. 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");
          });
      });
      
  6. 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