Creating a Multilingual Website on Squarespace

This tutorial will demonstrate how to create a new navigation section in your squarespace website which can be used for adding pages in a different language. When navigating pages in a specific language, the user will only see the pages from that language in his or her navigation. Note: This method requires that the developer mode be turned on. All the files mentioned in this tutorial are found on the SquareSpace FTP. Details on how to connect to FTP can be found towards the bottom of this page.

Step One: Define a New Navigation

Open the template.conf file and navigate to the section where the navigation is defined.

"navigations" : [ { "title" : "Main Navigation", "name" : "mainNav" } ]

Add the following piece of code to create a new navigation,

{ "title" : "New Navigation", "name" : "newNav" }

The final result would look something like this,

"navigations" : [ { "title" : "Main Navigation", "name" : "mainNav" }, { "title" : "New Navigation", "name" : "newNav" } ]

A new navigation section will show up in the backend. It will derive its heading from whatever you set the value for "title" in the code above.

Step Two: Create a New Navigation Block

Navigate to the blocks folder in your FTP and make a copy of the navigation.block file in the same folder. Rename the copied file to new-navigation.block.

Step Three: Create Templates For the New Language

Go back to the root of the FTP and make a copy of the site.region file. Rename it to new-language.region. Go to the template.conf file again and navigate to the layouts section.

"layouts" : { "default" : { "name" : "default", "regions" : [ "site"] } }

Define a new template by adding the following piece of code,

"new-language" : { "name" : "New Language Template", "regions" : [ "new-language"] }

Final result would look something like this,

"layouts" : { "default" : { "name" : "default", "regions" : [ "site"] }, "new-language" : { "name" : "New Language Template", "regions" : [ "new-language"] } }

Note: If there is more than one .region file in your theme, you will have to repeat this process for all of them.

Step Four: Point the Navigation Tag to the New Menu

In the newly created .region file, locate the squarespace navigation tag. It looks something like this,

<squarespace:navigation navigationId="mainNav" template="navigation" />

dit it so that the value for 'navigationId' is the same as the value of 'name' of the new navigation we created in the first step. In this case, it is 'newNav'. Set the value for 'template' to the name of the newly created file in the blocks folder. For this instance, it is 'new-navigation'. Final result would look something like this,

<squarespace:navigation navigationId="newNav" template="new-navigation" />

Step Five: Adding Pages

Step Five: Adding PagesWe are all ready to go now! Add pages in the "New Navigation" section that we created in the first step. Once you have added the pages, change their page layout to the "New Language Template", We created this template in the third step. The page layout option can be brought up clicking on the settings tab on each individual page in the admin area.

Step Six: Add a Language Switching Button

Add a button or link to the header or sidebar of your website which will allow your visitors to switch between the two sections of the website.

Bonus Step: Automatically redirect visitors to the relevant section

The tutorial found here can be used to automatically to redirect visitors to the relevant section of the website based on their browser language.

For any squarespace related queries, ping us here