Multi-Language Squarespace Site with URL Mapping

This article is a companion to How to Setup Multi-language content on any Squarespace Template and will show you how to take this one step further, and detect that a user is on the About page, then clicks on the "Español" link in the header, this will take you to the "Acerca" page, rather than the homepage.

Easy To Follow Code

If you haven’t added any code to your website before, don’t be alarmed. Below are easy to follow steps on how to implement this code on your website.

Step 1.

I imagine you have already added the code from How to Setup Multi-language content on any Squarespace Template, if not go to the article, and setup your site and verify the site is working as expected.

Step 2.

Open the Advanced Code Injection window.

1. Click on Settings

2. Click on Advanced

3. Click on Code Injection

4. Scroll down a bit to the Footer section

Step 3. 

The following code is a switch statement and checks the current URL and updates the language switcher link value. This is designed to work with the other tutorial. If you have more than 2 languages, simply add another statement and follow the pattern.

Footer Code Injection

<script>
  $(function() {
  /* SETUP URL REROUTE FOR MATCHING LANGUAGE PAGE */
  switch (window.location.pathname) {
    case '/en/about':
      $(".language a.lang-en").attr("href", "/en/about");
      $(".language a.lang-es").attr("href", "/es/acerca");
      break;
    case '/es/acerca':
      $(".language a.lang-en").attr("href", "/en/about");
      $(".language a.lang-es").attr("href", "/es/acerca");
      break;
                                  }
});
</script>

Step 4. 

Above is all the code put together in the Footer Injection.

That is about it. You should now have a Language Switch that will redirect to the same page in the other language. This code can be applied to any Squarespace template.