How to Create a Bilingual Squarespace Website with 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).

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

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

(BTW, as soon as her site is ready to relaunch, I'll share the link in this post.)

Do YOU want to create a bilingual Squarespace website?

If yes, then, watch this video on how to set it up using the Rally template.

Below the video, I will add:

  • the necessary code that you can copy and paste (if you're using the Rally template.)
  • links to blog posts from other Squarespace designers who have written how to create bilingual websites for other templates.

The Essential Code

Copy and paste the code in the appropriate page's Page Configuration --> Advanced --> Page Header Code Injection section.

Do not display the Main (Primary) Navigation Code

<style> nav.Header-nav--primary {
   display: none;
 }
  .Mobile-overlay-nav--primary {
   display: none;
  }
</style>

 

Do not Display the Secondary Navigation Code

<style> nav.Header-nav--secondary {
 display: none;
 }
 .Mobile-overlay-nav--secondary { 
display: none;
 }
</style>

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: Brine Family of Templates (includes Rally)

Samantha Black's Build a Bilingual Website on Squarespace blog post includes a step by step tutorial. Her site is on the Hunter template which is in the same family as the Brine template. She also shares the CSS code to style your navigation menu. Very cool.

 

Questions

If you have any Qs or want to share your own bilingual Squarespace website - pop on over to my Facebook page - that's where I like to chat. 


mini-bio-kath-omalley-copywriter-squarespace.jpg

Hi, I’m Kath - author of this blog post (and others like it) and copywriter, editor, keyword researcher and website content wrangler and production person for Squarespace web designers and service-based entrepreneurs and freelancers. Team up with me to get your web design projects done, like yesterday. Click the button below to get in touch.


Kath O'Malley

Hi, I’m Kath - author of this blog post (and others like it) and copywriter, editor, keyword researcher and website setter upper for Squarespace web designers and service-based entrepreneurs and freelancers. Team up with me to get your web design projects done, like yesterday.