Update: This script has been updated on May 7th, 2023 for easier implementation and better support for Squarespace 7.1 and Squarespace 7.0 templates. 

In this example, I am going to setup English and Spanish pages on the same site, by using simple techniques that are available in any Squarespace site. Here is a real example of this process put to use. https://helenasholisticdetox.com/

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.

Create a new page, and name it "Home". In the page properties, edit the URL from "/home" to "/en/home". Continue to follow this pattern for all English pages, adding an "en/" to the beginning of each page URL.

Step 2.

Create a new page, and name it "Inicio". In the page properties, edit the URL from "/inicio" to "/es/inicio". Continue to follow this pattern for all Spanish pages, adding an "es/" to the beginning of each page URL.

Step 3. 

By this time you should have a series of English and Spanish navigation links. Next we are going to add a little CSS and jQuery.

Step 4.

Open the Advanced Code Injection window (Settings/Advanced/Code Injection/Footer) and we will start with a recent version of jQuery in the "Footer" injection section.

Next we are going to add a few scripts. Basically, this is setting up a variable based on the URL we setup for each page, and automatically removing the links that do not contain that language variable.

Exclude Items: I have added an exclusion option for items you always want visible. This is a little more advanced option. I have a generic statement, then another specific to the social icons.

New Feature: The script will now automatically exclude pages that do not have a language prefix in the URL slug. This will allow a "Blog" to be visible in both languages.

Note: The default language will be visible for pages that are shared across languages.

New Feature: There is now a section to update "Homepage/Logo" links to the respective language homepage. Simply add the language prefix to the "if statement" and update the URL.

Step 5. 

At this point, we should see the English menu items only. So, lets inject a little code to add a English/Spanish switcher links. These can really be added anywhere. With the following code, we are prepending a <div> with two links at the top of the page. Using CSS you can style this in many ways.

Note: A great option for a language switcher is to use a Cover Page, set this page as Home, and a buttons for each languages 'home page'. The remainder of this tutorial is not necessary.

A little CSS is needed to make this look appropriate, this is very minimal. Place the following in the Custom CSS. (Design/Custom CSS)

Step 5a.

Here is another option to render flags and the language switcher. There is a CSS reference to to a great library that makes this super easy... flag-icon-css Please review the site for the proper code to add to the <span> class, it is probably different than the language codes.

Step 6. 

That is about it. You should now have a functioning multi-language site that can be applied to any Squarespace template.

Related Articles.

1. Some Squarespace template use Ajax Loading, disable this feature in the Style Editor if you are having an issue with the navigation not refreshing.

2. Multi-Language Squarespace Site with URL Mapping

All the Code put together.