How to build a multilingual site in Squarespace 7 - without drawbacks & extra cost

As a followup. I tried removing the language switcher from the main nav and using the announcement bar. I thought maybe the styling of the switcher was the cause. And since I'm new to SquareSpace, do you have to turn on developer mode to access the template's CSS files? Is there a easy way to simply view the files. I can find links to them by viewing the page source, but there's a bunch of them and not sure which one I should look at first. Thanks for any guidance!

Hi @softworks

Thanks for your solution. Works pretty fine for me. Although i have a little problem, not sure if anyone else had this before:

After implementing the code, the navigation started to switch to responsive (Burger Icon / Hayden) around 1400px browser-width. I looked for the problem and it seems that Squarespace somehow reads the width of the navigation also including the pages of the language not displayed. Due to that, it decides to switch navigation although it wouldnt be necessary.

Someone has an idea how to solve that bug?

The problem is that somehow, squarespace calculates the width of the navigation including the pages of all languages which results in that the Navigations switches to responisve in my case around 1440px.

@Simonhuesler same here. (Hayden template)I force navigation max-size to avoid the .force-mobile-nav class to be applied, due other languages 'hidden' links:

#mainNavigation {
  float: right;
  max-width: 1000px!important;
}

Mind that this is a temp. 'workaround', any navigation change, add new links or template update might break it.

Hi everyoneLooking for the selectors for the Bryant theme. Not getting what can be changed in that part, so your help would be much appreciated !And thanks @softworks for the rest of the code.

I have the same issue. Help is very much appreciated.

Sadly I don't have any solution. However, I am using Hayen, too, and wonder what changes you made to the above mentioned CSS-Snipet to make the Language-Button appear. Would you mind to share your CSS-Code?

First of all, thank you very much @softworks ! Great Job!

I use Hayden template and injected the script with no problems whatsoever. The Nav-Items of the respecitve other language become invisible.

However, when I injected the CSS (which as far as I understood styles the choose-language-button) nothing happens. So there is no way for a visitor to change the language.

any Idea what I have done wrong?

Just to inform anybody who falls in love with the gorgeous language selector but wants to adopt this to another template: hands off from Om/Montauk, Brine/Wright & the Doncab family ( Lange, Artesia, York…).

The script requires a special ability to set a link along a folder which only Pacific and its clones do, as far as we've tested. Save your nerves if you want to use this outside Pacific – if Inspector tells you this, look elsewhere:

alt text

I found out that the script does not work with Om/Montauk // Brine/Wright and York/Doncab because it requires the ability to set a folder link which only members of the Pacific Family offer.

If you're not into Pacific and its clones, save your nerves and look elewhere.

Hi @svaeni, would you mind sharing how you adapted the Javascript selector variable for the Hayden template? I'm having a hard time figuring out what needs to change in the f) section of the code.

Anyone has a clue how it can be done with the Wells template?I have tried all the above but it does not work!Any clue?Wells does most have index.Any help appreciated1Cheers,Christian

@softworks Thank you for the details tutorial, I tested it out with my current site. Everything seems to be working correctly, but I found that by setting the Index page to homepage the navigation seems to only link to the default language sections. Whereas, the specific language url doesn't seem to be linked to. I'm not that familiar with JS and would love to know if this is a simple fix or probably workarounds?

Thank you in advance.

The following is a link to my site: https://jason-fu-3whx.squarespace.com/

As i wrote in the article - you have to adapt injections points per layout.I have a developped a version of the script for multiple layouts and it will be adapted for each derivative sub layout. Pls contact me for conditions.

And see post below - techically this cannot work for onepager designs, where section pages are used for main navigation.

@Jason_Fu as i wrote: This will not work for onepager designs with jump urls (sections urls) in main navigation. Technically you cannot set a sections url to something like /en/section as RFC for sections does not allow slashes in sections.

So: it does not work for all designs with index pages that use the subpages/sections inside the main navigation.

@Simonhuesler, basically this should work with css and media queries. if you did not find a solution yet, send url of your sqs page.

Hei!

Thank you @softworks for a great step by step guide! It helped me a lot :)! I ran into some difficulty tho in the language switching. When i switch from Estonian to English the URL changes in a way that it returns a 404 error since that page does not exist. ie when i change language the URL firstly is /ee/example-page. When I switch from ee to en then the URL changes to ee/en/example-page instead of the correct path witch would be /en/example-page. When i repeatedly switch to English then the URL gets modified with one /en/ addition per click ie /ee/en/en/en/our-service. So my question is: Where is that URL created and how can i make it so that it will work as intended?You can check it out here www.waremill.com and then try to switch languages on the right hand side.EDIT: Im using the Hayden template.EDIT2: It allso seems to me that the home page is missing from the navigation. Im not sure if it's because of the additional JS or is it squarespace specific that the selected home page is not displayed in the navigation. If i switch the homepage in the Pages menu it disapears from the navigation like it's ignored for a reason.

Thanks for everything, Cheers!

@kristjan you probably misconfigured your english URL.Please configure an abolute Url for each language starting with a slash. In your case: /en/our-service

@softworks Thank you for the reply to clear things up, thanks again for the detailed description of showing us how to make a multilingual site.

Oh man! Thank you @softworks - i was missing a / in the code injection <- rookie mistake :D! If i could pick your brain a little more then what do you think about the missing navigation item that is set as the homepage? It should appear in the navigation since it's a linked index in the main navigation but it doesn't appear for some reason. Is it because of the code injection or is it squarespace specific that the home page is not visible in the navigation?

@kristjan - probably your home resides in "not linked" section in Squarespace Backend? Or it has no language specific url?Make a home per language or use a cover page for a multilingual version.

Your home is the url defined in language configuration of the script.

One improvement i made in commercial version of my script - the logo url is changed to the configured home url per language, so that the logo always points to the home of the current language.

It's not in the "not linked" section. and they have language specific URL's.The blue underline has /en/our-service and the red one, which is not displayed in the navigation, has /ee/teenus as the URL slug. Those slugs are also present in the code injection or else the switch wouldn't work? When I change the home page to be "Our Service" then it disappears from the English menu navigation and the other item appears back again in the Estonian navigation. It's really weird.Regarding the logo home pointing that's fine - im after consistency and navigation clarity.

Cheers!

Hi,

I can't figure out why it doesn't work for me...I'm so desesparate, can you please help me doing it ?My website : http://fromthesky-photo.comTemplate Sonora

Thank you :)

This is THE best solution so far. It works with all templates. It requires switching to Developer Mode, and tampering with template files, but it works 100%, is fairly simple (easier than javascript methods) and most of all, it's completely free.

http://recurship.com/blog/creating-a-multilingual-website-on-squarespace

Hi @softworks @fromtheskyphoto I am trying to build a multi lingual menu in Squarespace 7 using your tutorial. I am using the Sonora template, but the script wont work. Can you please please help? Thanks so much!

Hi @Fabpax you need to adapt the script for each template. Basically it should work, i use it e.g. for Hunter and Brine - they are in same template family like Sonora. But I haven't tested this with Sonora yet.I have developed a multitemplate version of the script for my customers, please contact me directly per mail if you are interested - registrar(at)soft-works(dot).biz