Multiple Languages in Squarespace 7.1 (Dropdown Design)

What does this code do?

This code snippet will allow you to switch between multiple languages on your Squarespace 7.1 Site using language options displayed in the main navigation. To switch between multiple languages using this design on your Squarespace 7.0 (Brine Family) Site click here (COMING SOON).

Note: This code snippet uses a folder in the main navigation on your site to switch between languages. To switch between languages using a popup bubble, click here.

Note 2: This strategy uses code to hide specific pages based on the language chosen by the visitor. This is not a language translator. You will need to re-create all your pages in the various languages.

Note 3: In order for the language options in the header to take your visitors to the chosen language of the page they are currently on, you will need to make the URLs of the pages the same except for their prefix.

View fullsize

View fullsize

Video Tutorial

Create Your Pages

The first step is to build all your pages. You will need to duplicate each page and translate it into the language(s) of your choice.

In order for the code to know which pages are in which languages you will need to add a prefix between “/” to your page URLS. You can use whatever prefix you like as long as you follow this through in the below code.

Make sure all duplicate pages use the same URL except for the prefix. That way if someone is on your About Page and they select a language option, it will take them to the About Page of their chosen language. If you do not have an About Page in that language, it will take them to your 404 Error page.

For example, I could use the prefix “en” for my English pages. So my English Services Page would have the URL www.example.com/en/services

I could then use the prefix “fr” for my French pages. So my French Services Page would have the URL www.example.com/fr/services

I could then use the prefix “es” for my Spanish pages. So my Spanish Services Page would have the URL www.example.com/es/services

As long as all my services pages have their language prefix and then “/services”, if someone is on my English Services Page and chooses French it will take them to the French Services Page.

Important Notes

1. I recommend setting your default languages homepage as the official Home Page in Squarespace.

2. Your homepages must use “/home” as it’s URL. For example, my English Homepage is www.example.com/en/home. If you do not want it to be “/home” you will have to change this in the Footer Code Injection as well.

3. The code will not be able to hide any links you add manually on your site. So, make sure that you only manually link to pages in the same language. For example, if someone is on your English Home Page but you have provided a link to your French Service page, they will then be taken to the French side of your site.

4. If you want to put links in the footer. I recommend not using the footer and recreating a footer like section within the page. That way the “footer” will only contain links to pages in the same language.

Code Snippets

This code can be modified to accommodate as many languages as you would like. To add more languages just add the prefixes into the Language Prefix Array at the start of the Footer Code Injection.

Header Code Injection

This code snippet uses Font Awesome for the arrow. To use Font Awesome, you will need to copy and paste your personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.

To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.

<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Footer Code Injection

Copy and paste this code into Settings > Advanced > Code Injection > Footer.

<!--Multi Language Site -->
<script>
  (function () {
    var languagePrefix = ["/en/", "/fr/", "/es/"];  // ADD YOUR PREFIXES HERE

    document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
    document.querySelector("[data-folder='/languages']").classList.add("language-switcher");

    document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
    document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));

    var languageOptions = document.querySelectorAll(".languages"); //dropdown language options

    document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
    document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
    document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));

    var navLanguage = document.querySelectorAll(".language"); // languages set in navigation links

    var windowURL = window.location.href;
    var pageLang = "/" + windowURL.split("/")[3] + "/";
    var pageURL = windowURL.split("/")[4];

    var languageOptionsLinks = document.querySelectorAll(".language-switcher .languages a");

    // Language Switcher Links and Active Status
     for (let i = 0; i < languageOptions.length; i++) {
      languageOptions.forEach((el) => el.classList.remove("active"));
      languagePrefix.forEach(function (item, index) {
        if (pageURL == undefined) {
          languageOptions[0].classList.add("active");
          languageOptionsLinks[index].onclick = function () {
            var path = item + "home";  //CHANGE THIS IF YOUR HOMEPAGE IS NOT /HOME
            this.href = path;
          };
        } else {
          if (pageLang.indexOf(item) != -1) {
          languageOptions[index].classList.add("active");
          }
          else {
          languageOptions[index].classList.remove("active");
          }
          languageOptionsLinks[index].onclick = function () {
            var path = item + pageURL;
            this.href = path;
          };
        }
      });
    }


     // Pages of the Same Language are Shown in Navigation 
    for (let j = 0; j < navLanguage.length; j++) {
      var navURL = navLanguage[j].href;
      if (pageLang.indexOf("//") != -1) {
        if (navURL.indexOf(languagePrefix[0]) != -1) {
          navLanguage[j].closest("div").style.display = "block";
        } else {
          navLanguage[j].closest("div").style.display = "none";
        }
      } else {
        if (navURL.indexOf(pageLang) != -1) {
          navLanguage[j].closest("div").style.display = "block";
        } else {
          navLanguage[j].closest("div").style.display = "none";
        }
      }
    }

    document.querySelector(".header").style.visibility = "visible";
    var active = document.querySelector(".language-switcher .active");
    active.closest(".language-switcher").prepend(active);
  })();
</script>

Then change the prefixes to match the prefixes you used.

CSS

Copy and paste this code into Design > Custom CSS

/* Multi Language Site */
.header {
  visibility: hidden;
}
.language-switcher .header-nav-folder-title {
 display: none !important;
}

.language-switcher .active a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content:"\f0d7"; /* Down arrow */
  padding-left: 10px;
}

Then change the down arrow to whichever Font Awesome Icon you would like. However, it must be one of the “Solid Style” Icons (linked here) with a font-weight of 900 in order to use it for free inside CSS (otherwise you will need to purchase a Pro Font Awesome Account).

Bonus: Minimize Your Code

Once you have installed the Multiple Language Plugin and all is working, you may want to minimize the code to help with page speed.

Copy the code you used in the Footer Code Injection between the <script></script> tags and paste it into https://www.toptal.com/developers/javascript-minifier .

Click MINIFY and then replace your Footer Code with the minified code.

How To Use It

1. Duplicate your pages and translate them into your desired languages using a prefix in the url.

2. Copy and paste the code as indicated above.

3. Customize the prefix and down arrow.

4. Minify your code to help with page speed.