Dual language websites

Building a dual language Squarespace website using the Weglot integration

Squarespace provide official dual language support via an integration with Weglot. For anything but the smallest of sites this requires an additional subscription with Weglot.

It is worth noting that setting up a Weglot site requires the DNS for your site points to Weglot instead of Squarespace. This means that if you cancel your Weglot subscription you will need to edit your DNS to point back to Squarespace. It also means that if your site is down you should check the status of both Squarespace and Weglot.

Claire and I used Weglot for the Spanish pages on rebelveganlife.com.

Building a dual language Squarespace website using JavaScript and CSS

It is possible to create a dual language Squarespace website using JavaScript and CSS. This method requires a lot more work than using Weglot, has some limitations, and can be fragile.

Pros

  • No subscription to Weglot required.

  • Each language can have its own unique set of pages and page designs.

Cons

  • System pages (404, lock, checkout) and system-driven features such as Blogs and Membership areas are all single-instance components. They can only exist once in a site and therefore cannot be duplicated for multiple languages.

  • Much more work than using Weglot.

Mobile menu – ensuring all second level pages are displayed

The CSS used to hide pages in the main navigation also applies to the second-level menu items in the mobile menu. This can result in pages being hidden when they should remain visible. To ensure all second-level pages are shown, add the following CSS in Custom Code > Custom CSS.

Displaying the correct menu items for each language

In the screenshot below there are ten menu items, numbered 1 to 10. Items 5-8 link to Arabic pages, and the others link to English pages. When a visitor is on an Arabic page, items 1-4 and 9-10 need to be hidden. When a visitor is on an English page, items 5-8 need to be hidden.

JavaScript (added via Code Injection) detects the page language and applies the appropriate CSS. The :nth-child() CSS pseudo-class, combined with the CSS display property, is used to control which menu items are hidden.

The page language is determined by the URL structure:

  • domain.com/en/page-name → English

  • domain.com/ar/page-name → Arabic

This is an example of a page with no language specific CSS applied.

If the number or order of menu items changes, the CSS will need to be updated.

Menu items

Language toggle

On this site, the home page is in English. Dual-language sites need a way for visitors to switch between languages, so a language toggle has been added using the words “English” and “Arabic” along with their corresponding flags.

JavaScript controls which flag is shown, based on whether the URL begins with /en or /ar.

Switching between different footers

One of our clients needed the footer content on Arabic pages to differ from the footer on English pages. To support this, the footer was built with two separate sections. Squarespace assigns a unique ID to each section, and JavaScript is used to apply CSS that hides the appropriate section based on the page language (/en or /ar).

This JavaScript is disabled when editing pages, so both footer sections will be visible in the editor. On the live site, only the correct footer will be displayed.

System pages

System pages (404, lock, checkout) and system-driven features such as Blogs and Membership areas are all single-instance components. They can only exist once in a site and therefore cannot be duplicated for multiple languages. However, it is possible to place text in more than one language on these pages.

404 page

On this site, the 404 page contains both English and Arabic text, although the menu items and footer are English only. To achieve LTR text for English and RTL text for Arabic, the Arabic content is placed in a Code Block so that RTL styling can be applied to that block alone, as shown in the code sample below.