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!
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.)
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.
PROBLEM with SEARCH and SHOPPING CART
Both navigations (primary & secondary) surface in Squarespace's native search page and shopping cart - meaning both languages are visible.
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
For all pages in the secondary navigation
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.
Squarespace Tips & Hacks
Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!