How to Change Default Text Labels in Squarespace

*Requires a Business or above account to add JavaScript code snippets.*

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”

7.0 and 7.1

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

“Sale”

7.0 and 7.1

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

“Read More”

7.0

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

7.1

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

“Newer” and “Older”

7.0

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

7.1

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

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

Leave a Comment

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

  1. Hi!
    Thank you for providing this resource. I am trying to completely remove the “Older Post” section at the bottom of my blog posts. Can I do that?
    Thanks!
    Alexis

  2. Hi Heather! Thanks for the guide! Unfortunately is not working on my 7.1 Squarespace site. Im using this template id, which im not sure which one is it: 5c5a519771c10ba3470d8101

    Any idea what it coulde be?

    1. All the 7.1 templates are the same, so there must be another reason why it isn’t working. Could you clarify what you’re specifically trying to do? If you provide a link, that’s even better! Thanks!

  3. Hi Heather! I used the ‘read more’ swaps for my website (7.1) and it worked perfectly. Many thanks!!! I was just wondering ig you have something for the newsletter block? Where it says ’email address’. Thanks again!

  4. Hi, there I am trying to utilize your read more code to change it to say “full recipe” I am using the Rally template on 7.0 and can’t seem to get it to work. Thanks in advanced!

  5. Hi! I’m on Squarespace 7.0 Brine template. I want to change the Add to Cart button sitewide to Add to Bag. I know you can change it on each products, but is there a way to do it in bulk? I tried:

    document.querySelectorAll(‘.sqs-add-to-cart-button-inner’).forEach(function(b){
    b.innerHTML = “Add to Bag”
    });

    but when clicked it changed to Adding… Added… then it goes back to Add to Cart.

    Any ideas on how to tackle this? Thanks you!

  6. Thank you so much for these snippets! I have a question about replacing the text for the results when filtering blog categories on Brine. So, if you have a post tagged with “flowers” and you click on the category, you get all the posts filtered by “flowers”. Rather than “Posts in Flowers”, I would like it to say “See More Flowers”. I figured part of this out, but now it only says “See More” and it won’t show “Flowers”. How would I get it to keep the category name, and only replace the words “Posts in”? Thank you in advance for any help you can give me.

    // Read More Text
    document.querySelectorAll(‘header.BlogList-filter’).forEach(function(summary) {
    summary.textContent = “See More”; // Customize text here
    })

  7. Thanks so much for providing the code for 7.1 too!

    Any pointers on how to replace the lofty “Written by ____” for blog posts? I just want to display my name only. Cheers!

  8. I used the back and forward script for the blog, Works great…. Thanks so much! Good karma to you!

    BUT ALSO in the blog it says ‘Posts in ‘category’ As i am using the blog to house a portfolio it would be good to amend this also to another word.

    1. I am also trying to change the “Posts in” default text that is shown when filtering a blog by categories. Any help you can offer would be wonderful!

  9. Hi! I am using Squarespace 7.1 and I am trying to change the display of the “SOLD OUT” text on the products pages. Right now it appears in bold text under the product price, but I’d like it to appear over the image in some capacity the way it did in 7.0 (either a rectangle, square, or circle icon). I noticed that in the summary blocks it still formats as a rectangular label, but I’d really rather not use summary blocks for my entire store. Any ideas? Thank you!

    1. You could do something like this and it should work.

      .products.collection-content-wrapper .product-mark.sold-out {
          position: absolute;
          top: 5px;
          right: 5px;
          border-radius: 50%; /* Change into a square by removing this line. */
          background: black; /* Change background color */
          height: 50px;
          width: 50px;
          color: white; /* Change text color */
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-size: 14px; /* Change font size */
          line-height: 1;
          font-weight: 400; /* Change font weight (bold or 600, for example)*/
      }
  10. site password – newworldvo

    I just used the Read More 7.1 code and it worked like a charm on my blog page. I’d also like to change the Read More on my summary block. Is there a way to do that?

    1. You could try something like this for the summary blocks “Read More” on 7.1.

      
        // Read More Text
        document.querySelectorAll('.summary-read-more-link').forEach(function(summary) {
          summary.textContent = "View Full Article"; // Customize text here
        })
  11. Hi Heather,
    first of all, thanks for your code. It works perfect.
    right now I am “renovating” my website and want the blog pages as project pages because the sort by categories is perfect here. Tried to find out a possibility to say “projects in website design” instead of “post in website design” or to hide only “posts in”…
    May be this would be helpful for other people as well – Your answer here would be really great and appreciated!!!! Thanks very much in advance from Germany Sabine

  12. Hi Heather,

    Would you happen to have code to modify the pagination titles on 7.1 portfolio pages like you offer above for blog pages? I am also trying to modify the arrow size. Thank you in advance for any insight you can offer!

  13. Hello Heather,
    I’m trying to change my ‘older’ and ‘newer’ text buttons using your code to ‘More’ for both as I’m using it more as a directory. It seems to work on and off, if I refresh it comes up, if I refresh again it goes back to the original setting. When I check on other devices it is the same.
    I have input the code into the footer section as mentioned Settings > Advanced > Code Injection > Footer

    // Blog Pagination Links
    document.querySelectorAll(‘.BlogList-pagination-link-label’).forEach(function(paginationLink) {
    if (paginationLink.textContent == “Newer”) {
    paginationLink.textContent = “More”; // Customize “Newer” text here
    } else {
    paginationLink.textContent = “More”; // Customize “Older” text here
    }
    })

    I’m sure it is something I’m not doing right! I’m using Version 7.0– Brine family (Clay. template)

    Any help would be great 🙂

    1. I bet you have Ajax enabled on your site. Unfortunately, there’s some extra code you need to make any code work if Ajax is enabled. Most developers recommend turning off Ajax, but if you want to keep it on, you’ll need to wrap your code in just a little bit of extra code so that it continues to work.

      Here’s a link to the new code: https://gist.github.com/hrtovey/f82e9f84f713b87af93f2bc054c865bf

      If you find that other code you apply to your site seems to have similar “only works on refresh” results, Ajax is usually the issue. 🙂

      1. Hello Heather, that seems to have solved the problem. Thank you very much for your time and expertise, you’re a star 🙂

      2. Hi Heather,

        You are indeed a star as this also helped me get this working in a default Brine template I just created for reference. However, when using the exact same code on the Hester template (which is basically the 7.1 equivalent of the Brine template) this just doesn’t seem to work. I added some code injection to change the ‘Shopping cart’ name.

        On the default Brine template https://chihuahua-tomato-t9b4.squarespace.com/cart (pw: covid19) this works

        On the Hester template (in 7.1) https://maisonblanchegeel.squarespace.com/cart (pw: covid19) it doesn’t work :-/

        Both templates hold the same HTML structure and css class names.

        How strange is this? Do you happen to have any explanation for this?

        Thanks in advance for your reply!

        1. It looks like the Shopping Cart text is added to the page after the DOMContent is fully loaded. 7.1 doesn’t use AJAX so you’ll need specific code to track this change in the DOM. In this case, we need to listen for when that shopping cart information is actually added to the page.

          
            var mutationObserver = new MutationObserver(function(mutations) {
              mutations.forEach(function(mutation) {
                if (mutation.target.id === 'sqs-cart-container') {
          
          
                  document.querySelectorAll('h2.cart-title').forEach(function(p) {
                    p.textContent = "Winkelmandjee"; // Customize text here
                  });
                  mutationObserver.disconnect();
                }
              });
            });
            mutationObserver.observe(document.documentElement, {
              childList: true,
              subtree: true,
            });
  14. Hi, thank you so much for this code. I am from Mongolia and I am trying to translate the customer labels on my Squarespace site. I managed to follow your instructions and translated the Read more links. However, I couldn’t translate the default labels for Written by as well as “Post comments” sections on my blogposts. Would love to get some pointers. here is a link to one of my blog posts: https://academy.ard.mn/personal-finance/how-to-start-saving

  15. I am trying to use the newer and older code in Bedford template. When I paste the above into Custom CSS I get syntax error on the script line.

    1. This is JavaScript, not CSS, so you’ll need to place it in Settings > Advanced > Code Injection > Footer to use it.

      Bedford is a 7.0 template and these coding snippets were created for Brine, so they may not work. If you let me know which of these you’re trying to use, I’d be happy to create one for Bedford, specifically.

  16. Hi Heather,

    Thank you what a great site.

    I am trying to target the Blog List Filter and customise the text that reads “Posts tagged….”

    If you have any thoughts that would be amazing!

    Jules : )

  17. Hi Heather,
    I tried your “Newer” and “Older” code for the Maple template (v7.0 I believe) blog page to change bottom nav to read “Next” and “Previous” rather than “Older” and “Newer”.

    Thanks!

    1. Hi, I’m also struggling to get this to work in 7.1 – I want to customise the default labels from “older posts” and “newer posts”… thanks so much!

      1. Hey Heather! I’m working with the Suffolk template, I copied your 7.1 code for changing the ‘older posts’ and ‘newer post’, and pasted it into the general website > settings > code injection > footer section.

        Unfortunately, it did not work. Is there a reason for this?

        1. And if you don’t have a Business plan, this won’t work. You are correct in that, for sure. JavaScript doesn’t work on newer Personal Plans (since December 2017). There are definitely other solutions out there for you that use just CSS though.

          The reason I don’t include them here is because they can cause some major issues with layout. For Previous and Next links, CSS should work just fine though!

  18. Hi there!

    I need two things to change:

    1. I want my Customer Accounts to link to say Orders instead of Sign-In and My Account.

    2. On my Summary Block on 986skin.com/testimonials, I want to change the text of the Read More link there. The Read More text change you have above seems to work for only the blog page.

    Thank you!

  19. Hey
    I’m currently working in the bedford template. I would like to change (or remove) the “read more button” in the blog pages. Do you have any idea how to do that?

  20. Hey.

    I’m currently working in the bedford template. I would like to change (or remove) the “read more button” in the blog pages. Do you have any idea how to do that?

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

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

      1. Hello, I would love help with this too! I’m in FIVE (not by choice).
        I have one normal blog and then one custom one… on the custom one I’m trying to hide the left hand side link to the home blog page while keeping the right side link to the “next blog”. Any ideas??? Thank you so much!

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

  23. 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!

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

  25. 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");
          });
      });
      
  26. 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

        1. Hi, thank you so much for this code. I am from Mongolia and I am trying to translate the customer labels on my Squarespace site. I managed to follow your instructions and translated the Read more links. However, I couldn’t translate the default labels for Written by as well as “Post comments” sections on my blogposts. Would love to get some pointers. here is a link to one of my blog posts: https://academy.ard.mn/personal-finance/how-to-start-saving