Creating a Dual Language Website in Squarespace
When Lynne Burney asked me whether I could create a dual language French/English website for her Paris-based professional coaching school in Squarespace, I said, “Of course.” Then I went and figured out how, since I had no absolutely no idea…
None of the solutions I found online had quite the functionality I was looking for. In the end, the solution I created was a lot simpler than I thought, requiring use of a 7.0 Brine template (or any template family that offers Primary and Secondary Navigation), the announcement bar, and some custom CSS.
Here’s an example of what we ended up with for LKB Associates:
Requirements:
Squarespace 7.0 Brine Template (may also work with other 7.0 templates with Primary and Secondary Navigation options). Does not work with 7.1; the navigation options are too limited.
Business Plan or higher (you’ll need both the Announcement Bar and Advanced Code Injection features)
Chrome Browser (to inspect page ids)
For purposes of this tutorial, I am going to call one language “French” and one language “English,” but of course you can swap in any languages!
Step 1: Create pages in each language
In the Pages panel, the navigation for one language will be housed under “Primary Navigation,” and the other language under “Secondary Navigation.” To get started, create at least one page in French (primary language in this example) and place it in the Primary Navigation section. Create at least one page in English (secondary language in this example) and place it in the Secondary Navigation section. You don’t have to create all your pages right away. I suggest creating the home page for each language to start.
Note that in this solution, all pages need to be created twice, once in French and once in English. In the screenshot shown here, pages with the same navigation title, such as “Bio,” “Coaching,” “Blog,” or “Contact,” are two different pages with unique url slugs. For example, the Bio page in French is /bio-fr and the Bio page in English is /bio.
The home page in your primary language should be designated the home page for the site.
step 2: enable the announcement bar as the language switcher
Go to Marketing—>Announcement Bar. In the body of the announcement bar, create two text links separated by a vertical dash, one for each language. The link for each language should be the home page url slug for the corresponding language. For example, /home-fr and /home-en.
Step 3: Arrange elements in the Style Editor
Next, go to Design—>Style Editor. Style your navigation by putting the Primary Navigation and the Secondary Navigation in the same place. It will look dumb right now, but later it will work, trust me!
On the example site above, I put the Branding and Tagline on the Top Left, and the Primary and Secondary Navigation on the Top Right. You may need to do something different, but the important thing is to make sure the Primary Nav Position and Secondary Nav Position are the same.
While you’re at it, now would be a great time to style the Announcement Bar and Navigation so they look nice together, trying to pretend that only one of your language menus is showing up at a time. :)
Step 4: fixing the navigation for each language
Ok, here’s where it all comes together! To start, navigate to the homepage in your primary language. Then, in the side panel, go to Design—>Custom CSS. Paste the following into the CSS Editor:
/*Primary Language Nav Bar*/
#collection-id {
.Header-nav.Header-nav--secondary, .Mobile-overlay-nav--secondary {display:none;}
} /*Secondary Language Nav Bar*/
#collection-id {
.Header-nav.Header-nav--primary, .Mobile-overlay-nav--primary {display:none;}
}Next comes the tricky part. You will need to find the unique ID for each page in French and each page in English. I will explain how to do this on Chrome. The easiest way is to open your site in user mode (NOT admin mode) in a separate Chrome tab or window. You may need to use an incognito window to prevent Squarespace from logging you in. If your site is not yet published, you’ll have to make it accessible with a password.
In this separate window, right click near the top of the homepage in French (aka your primary language) and choose “Inspect” from the menu. A panel full of code will appear on the right side of the screen. Scroll up near the top of the code until you find the phrase “body id=” right under the words “<head>…</head>”. Copy everything in quotation marks after body id= starting with the word “collection” including the dash and the string of numbers. Do not copy the quotation marks.
Then, go back into your admin window where you have pasted the Custom CSS above. In the top section called Primary Language Nav Bar, replace the text #collection-id with your actual page ID. You must include the hashtag at the beginning. If you have done this correctly, your English navigation menu should disappear on your French homepage!
Next, go to your English homepage in the separate window. Repeat the same “Inspect” process to find the unique page ID. Paste this ID back in Custom CSS under Secondary Language Nav Bar. Your French menu should disappear on your English homepage.
Repeat this step for each page in each language, separating the IDs with commas as in the screenshot posted here.
If you don’t have a blog or events page, you’re done! Just continue to build out your site in the same way. If you do have a blog or events page, continue to the next step.
Step 5: Styling the navigation for blog posts, events, and other collection items
Each time you create a new blog or event post, that post has its own unique id, just like the regular pages. It would be a terrible pain to copy and paste this item id each time you created a new post! Here is a better solution. Before you can implement it, you will need to create one blog in each language. Create a sample post for each blog.
In the French (primary language) blog, click the Settings wheel. Then click “Advanced.” Click “Page Header Code Injection,” and paste the following code:
<style>
.Header-nav.Header-nav--secondary {display:none;}
}
</style>In the English (secondary language) blog, follow the same steps to “Page Header Code Injection.” Paste the following code:
<style>
.Header-nav.Header-nav--primary {display:none;}
}
</style>You should now look at the sample post for each language and see that the navigation only appears in its respective language.
Did I help you out? Want to say thanks?
Send me a little donation that reflects the value you found in this solution. I really appreciate it!
Note: This post doesn’t address basic skills such as setting the language, region, time zone, etc. for your site as a whole. Those are standard steps which can be learned by going to support.squarespace.com and reading tutorials pertaining to the specific topic. Though these are important steps of setting up your site, this post only explains the steps I created with custom code. The only thing I want to explain about these overall settings is that it is not possible to set two languages for integrated text such as form fields, blog post dates, etc. You either have to live with it in your primary language or use more custom code to fix all these elements for your secondary language. But if I explained all that, this post would get way too complicated. Which it probably already is!
