Multiple Languages in Squarespace 7.0 (PopUp Design)

What does this code do?

This code snippet will allow you to switch between multiple languages on your Squarespace 7.0 Brine Family Site. To switch between multiple languages on your Squarespace 7.1 Site click here.

Note: This code is designed for the Brine Family templates in Squarespace 7.0. Parts of the code may have to be altered to work on other Squarespace 7.0 Templates.

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 button 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 as well as in the PopUp Bubble Link List.

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>

Copy and paste this code at the top of Settings > Advanced > Code Injection > Header.

<!--Multi Language Site -->
<div style = "display: none;" id = "language-switcher">
  <div class = "active"><a href="#">English</a></div>
  <div><a href="#">French</a></div>
  <div><a href="#">Spanish</a></div>
</div>

Then change the language names. You can leave the links as they are. If you want less than three languages, you can delete a language link out. If you want more than three languages, you can add a language link in.

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
    var languageSwitcher = document.getElementById("language-switcher");
    var languageOptions = document.querySelectorAll("#language-switcher div"); //dropdown language options
    
     document.querySelectorAll(".Header-nav-inner a").forEach((el) => el.classList.add("language"));
  document.querySelectorAll(".Mobile-overlay-nav a").forEach((el) => el.classList.add("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 div 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].style.display = "inline-block";
        } else {
          navLanguage[j].style.display = "none";
        }
      } else {
        if (navURL.indexOf(pageLang) != -1) {
          navLanguage[j].style.display = "inline-block";
        } else {
          navLanguage[j].style.display = "none";
        }
      }
    }

  var active = document.querySelector("#language-switcher .active");
  languageSwitcher.append(active);
  languageSwitcher.style.display = "flex";
  document.querySelectorAll(".Header").forEach((el) => (el.style.visibility = "visible"));
  })();
</script>

Then change the default language and second language to match the prefixes you used.

CSS

Copy and paste this code into Design > Custom CSS

/* Multi Language Site Button */
.Header {
  visibility: hidden;
}
#language-switcher  {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  bottom: 3vw;
  right: 3vw;
  border-radius: 10px; /* rounded edges */
  padding: 5px 10px; /* spacing between languages and edge of button */
  background: black; /*background of button */
  color: white; /* color of button text */
}
#language-switcher div {
  margin: 10px 20px; /* spacing between language options in button */
}

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

#language-switcher div:not(.active) {
  display: none;
}

#language-switcher:hover div:not(.active) {
   display: block;
}
#language-switcher div.active {
    display: block;
}

Then change the color and spacing of language button. You can also change the up arrow to another Font Awesome Icon. 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 prefixes, language names, and Popup button style.