Jump to content

Switching between languages – Multilingual

Recommended Posts

I want my website to be bilingual, in French and English. I am currently using the Devlin template.

What are my options to make make this bilingual? I am aware that there is a Google translator option but I cannot see what the end result will be like. I can’t find examples.

I can translate all my pages on my own but I need a button in the navigation bar that allows me to switch between both English and French on every page. Is this possible to add within a template?

Thanks in advance for your help.

Link to comment
  • Replies 40
  • Views 66.4k
  • Created
  • Last Reply

There is currently no easy solution from what I could see David. I ended up going with a template from Nick Scola (Round2) that I modified to suit my needs. You will need to use the devleoper platform. It's still a work in progress but you can have a look at it here:


I was given all the text in both languages and I had to recreate the pages in the second language as there is no "duplicate page" option (yet?) and the client will need to maintain the blogs in both languages but they want to adapt the blog content depending on the target audience so not all content will have to be duplicated.

This is Nick's site where you can contact him:


Hope this helps,


Link to comment
  • 3 months later...


I had to make 2 multilingual websites, so I decided to go with the developer tool and created different site.region files one for FR and one for EN. Those files connect to 2 navigation files which hold the different navigation.block structure for FR and EN. And I defined these files in the template.conf file.

The system in not entirely optimal but it works, especially if you are using a home splash screen directing to the language. (this site is still being developed http://caperia.sqsp.com)

alt text

Link to comment
  • 4 weeks later...

I wish there was a way to manage multiple navigation menus in SP.

All my customers here in Quebec want the ability to switch from French to English on their website. It would be so nice if I could just put pages in folders, one folder for each language, and a language picker in the page header.

I know I can do stuff using the Developer feature, but I don't want to code a brand new theme. I want my customer the freedom of choosing a theme, and then I can help them set-up the language switching logic.

Link to comment

Awesome. At least 2 templates to choose from. I'll give this a try, but I hope SS will eventually support some localization features. For the site that I custom build, I use the browser supplied languages to determine the current language, the user can than switch to another one. Keep doing a good job!

Link to comment
  • 2 months later...

Do you guys think this method could work:

1) Create a site in your primary language of choice (X)

2) Duplicate each page, modify its language (to Y) and move them to the unlinked pages section

3) Using CSS hide/remove navigation of the hidden Y language pages

4) Create a new custom navigation bar for each of the Y unlinked pages using a html block (?) and make it look identical to the X language original nav bar in CSS.

Any opinions?

Link to comment

What worked in squarespace five (on an english/german site) was: Put the german pages in the navigation, the english in the hidden section. Then create css code for every german page to hide all the english pages, and css on every english page to hide the german pages- then one selector in the sidebar which jumps to the english or german homepage.... the css then hides all the german pages if you land on an english page and vice versa... I couldn´t get that to work in SS6, though... since I couldn´t figure out the css to hide a single page... any ideas?

Link to comment

hey harry, could you tell me how you managed to create this css code? I'm currently trying to implement a bilingual site in ss5. I've managed to do so with the side navigation changing from english to german and vice versa, however I would like to use a top navigation on the page. Is there a possibility for that? Thanks beforehands. regards:)

Link to comment

This tutorial for the consumer platform is long overdue by me and I do apologize.

Please note: http://multilingual-help.squarespace.com/ there are 2 templates which tech. work without my tutorial. My tutorial is simply for all templates.

Here is the tutorial (brand new site design check it out!): http://www.nickscola.com/journal/2013/7/12/multi-lang-tutorial-on-consumer-platform


Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment

answers is not a forum and this is not an answer... it's hardly an usefull comment. I'm puzzled this gets more votes than actual useful answers below.

If you need support building your website, talk to me! <-- Check the link on the side.

Link to comment
  • 2 months later...
  • 2 weeks later...
  • 2 months later...
  • 2 weeks later...
  • 1 month later...
  • 2 weeks later...

Hello Nick,It's regarding your tutorial, that does not seem to work with aviator or anymore... with firebug, the nav bar links id looks like this:

So no data-class...

How should I adapt this in HTML ?:

var getLink = $(this).attr('href'); $(this).parent('li').attr('data-class', getLink);

AND in CSS ?

.main-nav li {

& [data-class="/"],
& [data-class="a-propos"],

etc etc

Thanks a lot !!!

Link to comment
  • 1 month later...
  • 4 months later...

I am building a tri-lingual website EN ES IT.

I am using custom css like below to hide lingual elements in main and secondary navigations:

.collection-53f88d8fe4b0271e3bcc1123 #mainNavigation>:nth-child(n+3) {display: none; }

That's working for normal pages, but I can't figure out how can I do that with search page.

I have 3 different search blocks for 3 specific product pages in EN, ES and IT, I want to be able to style results pages to keep website trilingual.

I would like to set the banner thumbnail as well, which seems not possible for search results page.

Any help is appreciated.

Link to comment
  • 1 month later...

Hey guys - I've written a nice script that will enable bilingual capabilities on your Squarespace site.

Simply paste the script into the code injection 'footer' area, then separate the two languages with // (double slash).

e..g Here/Ici

The script takes care of the rest. It works for ANY language. It can actually handle more than two languages with a bit of tweaking (let me know if you need this). It's incredibly easy to use, very quick to set up, SEO friendly and user-friendly.

It'll display the first language by default but if your user clicks the second language then that's all they'll see from that point onwards.

Find out more here - Hey guys - a client of mine asked me to make her a script to make her Shopify website bilingual. Turns out, it works perfectly on Squarespace too. It can actually support more than one language, but straight out the box handles two languages very easily, very smoothly, easy to setup.

Simply install, then enter text as languageone//languagetwo - e.g. for all your product titles, page content - the doubleslash separator is used to identify language one and language two.

By default, language one is displayed but if the user selects language two, that selection is remembered for all subsequent pages.

It's SEO friendly too - you can find out more here - http://www.affiliatewebdesigners.com/product/bilingual-javascript/

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.