How to Create a Bilingual Squarespace Website with the Rally Template

Squarespace Tips & Hacks. Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!

How to Build a Bilingual Squarespace Website using the Rally Template.

Well, I lucked out. The other day, my friend (and client) asked me to help her add pages translated in Japanese for her language teaching website. She uses the Rally template.

Now, let me admit here - the Rally template is my new BFF so I jumped at the chance to figure out how to do this and now I'm convinced it's the perfect template for creating a simple bilingual website.

You do need some code, but bear with me. It's not that bad! Keep scrolling past this big ole picture (although you can pin it, if you want).

What my client wanted was 2 separate navigations - one in Japanese and one in English.

If a visitor is reading the English pages, she wants the navigation to show the English pages (plus a link to the Japanese section of the site) and if the visitor is checking out the Japanese pages, she wants the navigation to show only the Japanese pages (with a link to the English section.)

Like this

Bilingual Squarespace Website with English Navigation
Bilingual Squarespace Website with Japanese Navigation

Do YOU want to create a bilingual Squarespace website?

If yes, then, watch the video on how to set it up using the Rally template. **You need subscribe to a Squarespace Business Plan and above.

Scroll down more to review:

  • the necessary code that you can copy and paste (if you're using the Rally template or a template in the Brine Family.)

  • links to blog posts from other Squarespace designers who have written how to create bilingual websites for other templates.


Both navigations (primary & secondary) surface in Squarespace's native search page and shopping cart - meaning both languages are visible.

I’ve chatted with Squarespace expert developer Heather Tovey about this issue - and she recommends a Javascript solution which is fancy pants (for me). If you have a bilingual Squarespace shop, get in touch with Heather and check out her Developer on Demand service to help you set this up.

For search: a workaround for this issue is to hide the search icon (in the design section). Create a regular page to be your search page, then add the search block. Make sure that page is the final page in the main navigation. Duplicate the search page and put the duplicate in the secondary navigation (the 2nd language). Now each language navigation will have a search link (but not an icon).

TROUBLESHOOTING: I often get emails asking why the code doesn’t work when you refresh your site. Double check that you’ve disabled ajax loading in the Design —> Site Styles and see if that works for you.

The Essential Code


UPDATE as of January 24, 2019

For All Pages in Primary / Main Navigation

<style>nav.Header-nav--secondary {

  display: none;


 .Mobile-overlay-nav--secondary {

  display: none;



For all pages in the secondary navigation

<style>nav.Header-nav--primary {

  display: none;


 .Mobile-overlay-nav--primary {

  display: none;



(Previous Updates)

Code for Bilingual Navigation on Squarespace

Update as of Sept 12, 2018 - Have added an image of the code. You’ll have to type out the code as for some reason, it’s disappearing from this page when I add - style - tags to the page. Weird. (I can’t even add the pointy brackets to the style word above otherwise the whole sentence disappears!!)

Here’s what you can do: Type this code into a google doc or Notes or whereever - then copy and paste the code in the appropriate page's Page Configuration --> Advanced --> Page Header Code Injection section.

Bilingual Website Tutorials from other Squarespace web designers

Bedford Family of Templates

Kerstin Martin's Squarespace Case Study: CSS Solution for a bilingual website will really help if you use the Bedford family of templates. Her post also guided me on how to organize the site structure. 

All Squarespace Templates

If you're a more codey type person, you'll like Brad Good's solution for multilanguage websites. The code should work on all Squarespace templates. I have yet to test it out as I was in a rush for a quick solution just for Rally but it's on my To Try list.

The No Code Solution

Squarespace also has a helpful tutorial and video on building multilingual websites without the need for code. It's not quite the solution my friend needed for her Rally template website, but if you're creating a bilingual site from scratch and don't want to use code, it's worth a watch. There are formulas for one-page websites (such as the Pacific template) or on using nested folders to separate out languages.

UDPATE as of Sept 12, 2018:

Here’s a post from Collaborada on Understanding Hreflang and Multilingual Websites and other best practices around building and designing a multilingual Squarespace website. 

Mail Boxes | Sign Up for Squarespace Tips & Timesaving Hacks

Squarespace Tips & Hacks

Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!

Nope to spam. Unsubscribe anytime. Read the Privacy Policy.


Hi, I’m Kath - author of this blog post (and others like it), copywriter, Squarespace Authorized trainer and web designer for service-based entrepreneurs and professionals. Team up with me to get your web design projects done, like yesterday.

Click the button below to get in touch.