The Ultimate Guide to Creating a Multilingual Squarespace Website

The Ultimate Guide to Creating a Multilingual Squarespace Website

Squarespace is not designed to have a multilingual site.

It sounds unbelievable, but it’s true.

Squarespace is a CMS for creating websites that has been a huge success since 2014, thanks to the variety and quality of available graphic templates and how easy it is to customize without programming.

How is it that this system, which has received $78 million in venture capital, forces web designers to resort to gimmicks to design a site in multiple languages?

I guess it’s simply a matter of numbers: most Squarespace users don’t need a site in multiple languages and so Squarespace doesn't pay it much attention.

My impartial advice is to not use Squarespace if you're planning to expand abroad and need a robust, flexible and easy-to-update multilingual solution. There are other CMS that are already designed to be multilingual and won't have you jumping through hoops like Squarespace.

However, if you already have a site in Squarespace and need to add one or more translated versions, there are currently 4 options:

  1. have a home page (cover page) linked to the different sections of the site in each language, with a drop-down menu for each language
  2. create a different site for each language and link them together
  3. use an external plugin
  4. add custom JavaScript code

Ideally, you should choose the method that suits you before you start creating the site, because the site page structure depends on the method you choose.

Method 1: main menu as language menu

The first method is the one described in the official Squarespace help. It’s not the best, and in fact, even Squarespace doesn't use this method on its own site, squarespace.com.

It consists of setting up a homepage with two or more buttons or links from which users can access the translated versions. Once there, the user finds the language menu as the main menu, instead of having the language selector on one side and the main menu on the other.

The difference is between this

Multilingual site language switcher

this

Multilingual site language switcher with language codes

and this

Multilingual Squarespace site menu

It’s very nineties, but it’s the only option if you don’t want to spend extra money on additional systems and don’t want to go crazy with inputting code.

From a user experience point of view, this solution adds a step (one click) before the user can access the content in the desired language. But it’s also true that you can simply share the language page URL with your contacts, as each Squarespace page has a unique URL.

The real downside is that the site header, menu and footer will be the same in all languages.

For example, in a site in three languages, Italian, English and German, the user will see the menu repeated in all three languages on each page. Other buttons or calls to action inserted in the header cannot be translated.

On the Daeverso.com site, which we helped create, the problem was solved by using a telephone icon instead of the “Call me” wording, which would appear in only one language in all three versions of the site.

Screenshot of the home page in Italian for Daeverso.com

The cover page method is recommended only if:

  • the site to be translated only has a few pages, because a translated page must be created for each original page
  • the site is only to be translated into a limited number of languages; as each language appears as a top-level item in the menu, there is no room for more than 4-5 languages

In the previous example from Daeverso.com, the site is a single page and having the same menu repeated doesn't affect navigating that much, which is a simple jump to the different sections of the page.

Note: Aside from not being designed for multilingual sites, Squarespace doesn’t have any features for automatically translating pages, nor does it have a translation editor.

To build a multilingual site with Squarespace’s suggested method:

  1. First of all, create a homepage and move it to the Not Linked section of the Pages panel.
  2. Add a folder called “English” in the main navigation to contain the original texts (if you write your site in English).

    Animation of folder creation in Squarespace

  3. Still in the main menu section, add as many folders as there are languages in your site. Give each folder the name of the language in that language, e.g. “Italiano” for Italian, “Español” for Spanish, “Français” for French, etc.

  4. In the English folder, click + Add Page to add the pages of your site. Please note: the first page is the one that opens when the user clicks a button or link on the cover page.
  5. After creating the pages and contents in the original language, duplicate them into the folders of the other languages.

    Animation of page duplication in Squarespace

  6. Once you have created the translated pages, go back to the homepage in the Not Linked section and click Edit.

  7. Add a text or a button for each language.
  8. Link each text or button with the first page in each language folder.

Note: If you update a page in English, remember to change the corresponding translations as well. Since there’s no way to export texts beyond copy-and-paste, you’ll need to make changes directly from the Squarespace admin interface.

With this system you can translate the user-generated content, but all system messages, for example the dates in the blog pages, will be displayed in a single language despite the rest of the page.

There's also another major limitation when it comes to e-commerce sites. While Squarespace lets you sell products by providing shopping cart and checkout features, only one currency at a time is allowed on a Squarespace site.

What’s even worse is that all messages related to the shopping experience, like those on the checkout page, will only appear in one language, regardless of the languages the site is translated into.

Method 2: different sites linked together

The second method, also suggested (somewhat superficially, it must be said) by Squarespace, is to create separate sites and then link them together.

The advantage of this solution is that you can have different menus and content for different languages, but it also means that the sites are disconnected from each other.

Squarespace suggests “linking sites together with external links” and creating a landing page with access to the different languages, solutions that many users would find not very practical.

Not to mention that having separate sites means paying a license fee for each site.

Method 3: use of an external plugin

You can also use external plugins to translate a Squarespace site, most of which are based on translation proxy systems. Some of these are:

  • WeGlot
  • Bablic
  • Easyling

These systems have many advantages. Applied to a Squarespace website, these systems let you access and translate content in spite of the Squarespace interface. Often this is done by adding a special JavaScript fragment in the page code, through the code injection feature, in the advanced settings of Squarespace, which requires a Business subscription or higher.

All translation proxies give users their own administration panel from which they can examine the texts, translate them automatically or by hand and, in the best cases, export them for convenient offline translation or send them to your trusted translation provider.

However, using a translation proxy entails a penalty from the SEO point of view, as the pages are dynamically translated by the proxy, but do not exist per se.

Providers offer a range of solutions to this problem, some more complex than others. Almost all of them go through DNS configuration, a process that may not be within everyone’s reach.

The process usually involves creating a DNS record for each translated language, plus another record to link the site to the translation technology provider.

Basically, if your domain is managed by Squarespace, i.e. if you bought the domain name from them, you should:

  1. Go to the Settings > Domains section. You will find the indication “Managed by Squarespace”
  2. Click on Advanced Settings
  3. Enter the DNS records that you will find in the administration panel of the translation proxy

If, on the other hand, you’ve connected your Squarespace site to a third-party purchased domain (domain reseller prices are often cheaper than Squarespace’s), then you’ll need to go to the domain reseller’s DNS section and configure the DNS records there.

Method 4: embedding custom JavaScript and CSS

The fourth method involves inserting personalized code. This is the one that gives the best results, both in terms of user experience and in terms of SEO.

Since content is displayed in just one language at a time, users don’t have to navigate the multilingual menus, and instead find what they’re looking for immediately.

Also, unlike the other methods, there is a page in each language for each original content, so Google can correctly index all pages.

However, to use this method you need to:

  • be familiar with the JavaScript language
  • be familiar with the CSS language
  • have a Squarespace Business subscription

The first step is to insert the language code into the URL of each page. Then a snippet of JavaScript is added (usually in the footer) that programmatically hides all pages in languages other than the one selected.

A language switcher is used to select languages, and is also added through the above-mentioned JavaScript.

The pages should be created in the usual way. Here, too, you need to create one version of each page per language. Here, you can simply duplicate or copy the page, as seen already.

The code to insert and detailed instructions for inserting can be found on Pareto Design.

The code by Pareto Design is just an example. Other vendors have bundled the code into a fixed-price plugin that you can purchase and install on your Squarespace site, such as Ervinas from Squarecamp Web Design and Multilingualizer.

Others also suggest adding custom CSS to hide sections of the site or menu items from users. I don’t recommend this solution because it is cumbersome to apply and counterproductive for SEO, as the page content remains in several languages at the same time, a feature that is Google doesn't exactly love. The search engine, like people, prefers sites in a single language.

In conclusion: having a Squarespace site in multiple languages is not exactly a walk in the park. The advantages and disadvantages of each method need to be considered:

Method Advantages Disadvantages Recommended for ...
Cover page and language menu = main menu + Relatively easy to create
+ No additional licenses needed
- User experience not optimal
- Same header and menu for all languages
- Complex to keep up to date
Not very large sites
Sites with few languages
Different sites linked together + Contents independent of each other - 1 license required for each site
- User experience not optimal
Large sites, with different contents
Embedded JavaScript + Better user experience - Technical skills required Those with JavaScript and CSS knowledge

Above all, as I was saying, if you still have time, evaluate other CMSs that simplify multilingual management. But if you really need to translate your Squarespace site, contact us and we’ll be happy to help.