Cart 0

How do we create truly multilingual sites natively in Squarespace?

No plugins | 1 squarespace Account | 2+ Languages   

 
erik-witsoe-618924-unsplash.jpg
 
Created with Sketch.
 

Multimultilingual

Sqaurespace websites

 

Some benefits of our solution:

  • as many languages you want to

  • add and delete pages in configured languages with automatically adapted menus

  • works automatically for primary and secondary navigation

  • easy configuration of new languages

  • while translating into a new language or translating a new page, these pages do not appear on your site

  • you can create a fully style-able and customizable language menu

  • no extra cost for external services

  • SEO works: Google uses natural language detection and pages do physically exist under unique urls

 

Some examples

 
 
 
 

Let’s dive in

 
 
 
eirik-skarstein-1058115-unsplash.jpg

Overview

This guide will be broken up into three main sections. There will be a huge chunk of code to paste in but don’t get too scared as you only have to mess with a small portion of it. I will do my best to make sure that all the technical stuff is as easy as possible to follow.

  1. Setting up the page structure

  2. Configuring your code

  3. Styling the language switcher

 

Important note

This solution only works for the Pacific Template Family. If you want to use another template

 

Setting Up Your Pages 

 
yiran-ding-723911-unsplash.jpg

In a nutshell the code from this solution works by looking for a small addition we are going to put on the front of our page URLs. It then will hide all the pages that are not for our currently selected language. This is important because it means there is an actual page for the content in each language allowing Google and other search engines (Bing 😂) to index it properly.

To make this happen, we are going to need to create a version of each page for each language we want to create. I’ve found the best way is to make your content in one language (in my case English) and then once it’s finished use Squarespace’s handy copy tool to make a version for your additional languages.

A note for this section, the template, Pacific we are using supports Indexes and I suggest using them to create all your content as opposed to simple pages. It just gives you more flexibility in my experience. If your new to Squarespace, take a minute to check out the official Squarespace documentation on indexes here.

 

Creating Your English Index

The first thing we are going to do is create the English version of our pages. To do this we are going to click the little gear icon to open up settings. At the bottom of the settings page is a place to change the URL slug.

For this contact page we are going to simply add /en/ in front of the existing slug.

/contact → /en/contact

*** If you are working with index as I suggested above, you only need to change the URL for the index page itself. The individual pages contained within can remain unchanged.

 

Creating Your Second Language Index

Now we are going to create a second index for our Spanish version. The process is the same for any language and you just repeat for your third, fourth, fifth, ….. language.

For this index we want to make sure to add /es/ to the front of the URL slug.

/contacto → /eS/contacto

 

Copying Your Pages

Now that we have the index for our second language set up, we can go ahead and copy our content.

In the English index, we are going to select the “contact content” page and in the settings menu scroll all the way to the bottom where a duplicate page button can be found.

When we click this, it will create a copy of the page down in the Not linked section of the pages menu.

From here we simply drag the page up to the index for the Spanish contact page. Once here, you can edit the page to translate it to it new language.

 

If you’re dealing with translating an index that contains a lot of pages, be prepared for a bit of monotonous work. You will need to copy each individual page and drag it to the new index for your second language.

 
 
 
 
 

Configuring Your Code

 
 
 
 
michal-kubalczyk-505207-unsplash.jpg

Inserting into the footer.

The first step is injecting your code into the overall footer of the site. Squarespace has an easy way to do this through the advanced menu.

Settings  Advanced   Code Inject  Footer

ScreenFlow.gif
 

The code to paste

Just paste the code below into the footer section. I know it looks a little daunting but bear with me, I will explain what this all means in the section below.

 
<script>

 YUI().use('node', function (Y) {
 
   // output a menu
   var output = true;
 
   // here is where you set your default language
   var language = "en";
 
   // define the allowed languages
   var allowedLanguages = new Array();
   allowedLanguages['es'] = {
         label:'Español',
         short:'ES',
         url:'/es/home',
         lang:'es-ES'
   };
   allowedLanguages['en'] = {
         label:'English',
         short:'EN',
         url:'/en/home',
         lang:'en-EN'
   };
 
   var urlparts = document.location.pathname;
   if(urlparts.startsWith("/")){
     urlparts = urlparts.substr(1);
   }
   if(urlparts.endsWith("/")){
     urlparts = urlparts.substr(0,urlparts.length-1);
   }
   if(urlparts.length) {
     urlparts = urlparts.split("/");
     if(urlparts[0] in allowedLanguages){
       language = urlparts[0];
     }
   }
   var selector = [
     '#mainNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#mainNavigation > div > a:not([href*=\"/' + language + '/\"])', 
     '#mobileNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#mobileNavigation > div > a:not([href*=\"/' + language + '/\"])',
     '#secondaryNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#secondaryNavigation > div > a:not([href*=\"/' + language + '/\"])'
   ]; 
   
   Y.all(selector.join()).get('parentNode').remove();
 
   if(output){    
     Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top'));
   }
   
   Y.one('html').setAttribute('lang', allowedLanguages[language].lang);
 });
 
 function buildLanguageMenuHTML(strCurrentLang, arrAllowedLangs, strClass){
     var htmlTemplate = '<nav id="langNavigation" class="' + strClass + '"><div class="folder"><input type="checkbox" name="folder-toggle-lang-navigation" id="folder-toggle-lang-navigation" class="folder-toggle-box hidden"><label for="folder-toggle-lang-navigation" class="folder-toggle-label" onclick="" data-href="' + arrAllowedLangs[strCurrentLang].url + '">' + arrAllowedLangs[strCurrentLang].short + '</label><div class="subnav">###languages###</div></div></nav>';
     var htmlTemplateInner = '<div class="collection"><a href="###url###">###label###</a></div>';
     var htmlInner='';
     var htmlOutput='';
     for(language in arrAllowedLangs){
         if(arrAllowedLangs.hasOwnProperty(language)){
             htmlInner += htmlTemplateInner.replace('###label###',  arrAllowedLangs[language].label).replace('###url###',arrAllowedLangs[language].url);
         }
     }    htmlOutput = htmlTemplate.replace('###languages###',htmlInner);
     return htmlOutput;
 }
 </script>
 

Turning on the Language menu

Activate the menu

 
// output a menu
   var output = false;

// output a menu
   var output = true;
 
 

Configuring your languages

Setting the default

 // set default language
   var language = "en";

This should be the URL bit in front of your main languages pages. For our example we will be making English the example so en is our default value

 

Define your languages

 // define languages
   var allowedLanguages = new Array();
   allowedLanguages['es'] = {
         label:'Español',
         short:'ES',
         url:'/es/home',
         lang:'es-ES'
   };
   allowedLanguages['en'] = {
         label:'English',
         short:'EN',
         url:'/en/home'
         lang:'en-EN'
   };
 

This section it where you tell the code what languages you want to use.

Here is an explanation of the different section of the code

allowedLanguages this section is where you define the URL part of your language.

label This is where you define what will appear in the language switcher menu

short this is the short version that will appear in the compressed mobile version of the language switcher

url this the the URL of this languages home page

lang is used for the manipulation of the HTML lang attribute

 

(Bonus) adding a third language

   allowedLanguages['FR'] = {
         label:'Français',
         short:'FR',
         url:'/fr/home',
         lang:'fr-FR'
   };
 

Just copy and paste another bit of code below the one for the second language and change the variables. To the left is an example if we wanted to do it in French

 
 
 
 

Styling Your Language Switcher

 
 
 
jose-aljovin-331066-unsplash.jpg

The CSS Code 

To style your language switcher, you are going to need to add a little bit of CSS. You probably wont want to tinker with this too much other than changing the shape and color.

Design Custom CSS

 
#headerNav #langNavigation .folder-toggle-label{
     background: #ec3224;
     border-radius: 50px;
     padding: 0;
     line-height: 3em;
     width: 3em;
 }
 #headerNav #langNavigation.top{
   top:-3px;
 }
 #showOnScrollWrapper #langNavigation  .folder-toggle-label{
     background: #ec3224;
       border:5px solid #292525;
 }
 
 #langNavigation{
     position: absolute;
     z-index: 10050;
 }
 #langNavigation.right{
     right: 0;
 }
 #langNavigation.left{
     left: 0;
 }
 #langNavigation.top{
     top: 0;
 }
 #langNavigation.bottom{
     bottom: 0;
 }
 html:not(.touch-styles) body:not(.always-use-overlay-nav) .nav-wrapper #langNavigation.right .folder .subnav {
       left: auto;
     right: 0;
 }

Changing the Color

This part is pretty easy, just change the background: in #headerNav #langNavigation

Some examples:

background: white;

background: #ffffff;

 

Changing the Shape

Again, pretty easy. We are just changing the number for border-radius:

For a circle

border-radius: 50px;

For a square

border-radius: 0px;

Other

You can play with the numbers more to make different variations. The close to 50px you get, the more rounded it becomes

 

Other Templates

The above solution only works for the Pacific Template family. Each template is structured slightly differently and it makes a general solution difficult. I am currently building new code and a course that walks through how to install it .

 
 
 
julentto-photography-364077-unsplash.jpg