Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 25

Switching between languages – Multilingual



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
  • Answers 40
  • Created
  • Last Reply

Recommended Posts

If your website is used for your business, I would suggest you NEVER use Google translate or any other machine translation. Hire a professional translator and have your content translated properly. Clients who access your website in the translated language would be turned off to shoddy grammar and mistranslations. Think of those funny English translations seen in foreign countries and making the rounds on the net. Machine translation is great for a chuckle but not when it's about your business. Machine translation is a good tool in order to understand the gist of a text when a professional translation isn't needed, but should never be used for a commercial website.

Link to comment

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


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

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

Hey guys,

The standard Squarespace solution left a lot to be desired in my opinion . After a super long time digging around the interwebs, I finally found the solution in some custom code.

I used it on one of my sites http://redmedellin.com/

It is a bit of a complicated process so I spend some time creating a walkthrough to make it easy for even non-coders to implement.

Check it out here: https://www.pareto-design.com/squarespace-multilingual

Hi, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

Link to comment

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


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

This topic is now closed to further replies.

  • Create New...