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

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

Question

There are several approaches to realize a multilingual site in Squarespace.All of the existing solutions have drawbacks. In the answer, you will find a solution for localization of squarespace sites without drawbacks.

1) Official Squarespace Solution

  • Does not work on all templates.
  • Structural limitation - you only have one navigation level left perlanguage.
  • Language selector menu not very nice.

2) Using multiple squarespace sites with language subdomains

  • You have to pay the Squarespace fee per language

3) Using external localization services like localize.js oder bablic.com

  • You have to pay for external services.

  • There are additional resources that have to be downloaded

  • Does SEO work well on these solutions? Did not investigate this.

4) Javascript based on CSS Selectors and page IDs

  • Unflexible when adding pages, JS has to be adapted and grows
Edited by edokken

I am a freelance developer situated in southern germany. I offer full service websites, ecommerce. Everything from concept, design, programming, ui, marketing & seo, analytics, hosting up to business consulting. I prefer using open source software like typo3 or magento but i also admire the easiness of saas software and services like squarespace. I spend most of my spare time up in the Alpes.

Share this post


Link to post

Recommended Posts

  • 0

Dear @softworks,Look this simple test site ....that I have create to try .... with MARQUE template.

Enter in squarespace and ...:Login: info@tonylanzillo.itPassword : antonio

I have cover page...to link in italian site or english site...The english site is: index "welcome" and folder "service" with page "reservation" The Italian site is: index "benvenuto" and folder "servizi" with page " prenotazioni"

I would when in cover page click eng ...go in english site with only menù english (welcome ,service/reservation) while i click ita go in italian site with only menù italian (benvenuto, servizi/prenotazioni)

I know that with simple css code .....italian site hide in english version and english site hide in italian version.

Please help me :)ThanksAntonio

Share this post


Link to post
  • 0

Dear @softworks, I have built a website in Squarespace, using Five template and it needs to be in English and Spanish. I like your solution and would like to implement it, however I am not a developer. How much would you charge to do this for me? I can create the English and Spanish pages as per your tutorial, step 1. Thanksstuart@setthescreen.com

Share this post


Link to post
  • 0

@softworks or anyone else - I'm having the same issue with the Bedford Template. I think it's determining horizontal vs vertical appearance of the main nav based on the width of the menu items for both languages. If I only have 3 items for each language, the nav is horizontal like I want it (all 6 items would fit horizontally too which I think is why it works). As soon as the items for both languages won't fit horizontally, the menu appears vertical even though the items for one language will fit horizontally without a problem. Can I fix this through CSS or insert the code somewhere else?

Edited by egt

Share this post


Link to post
  • 0

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!

Edited by egt
Initial Revision

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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.

Edited by jrocha
tip

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Edited by sssuperguy

"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

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.

alt text

folder-link-not-allowed.png.e81cd2a78e65dadf754cf768acc6bec2.png


"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post
  • 0

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.

Edited by danad
Initial Revision

Share this post


Link to post
  • 0
Guest

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

Edited by Guest

Share this post


Link to post
  • 0

@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/

Share this post


Link to post
  • 0

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.

Edited by softworks
Initial Revision

I am a freelance developer situated in southern germany. I offer full service websites, ecommerce. Everything from concept, design, programming, ui, marketing & seo, analytics, hosting up to business consulting. I prefer using open source software like typo3 or magento but i also admire the easiness of saas software and services like squarespace. I spend most of my spare time up in the Alpes.

Share this post


Link to post
  • 0

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


I am a freelance developer situated in southern germany. I offer full service websites, ecommerce. Everything from concept, design, programming, ui, marketing & seo, analytics, hosting up to business consulting. I prefer using open source software like typo3 or magento but i also admire the easiness of saas software and services like squarespace. I spend most of my spare time up in the Alpes.

Share this post


Link to post
  • 0

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!

Edited by kristjan

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

@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.

Edited by softworks
Initial Revision

I am a freelance developer situated in southern germany. I offer full service websites, ecommerce. Everything from concept, design, programming, ui, marketing & seo, analytics, hosting up to business consulting. I prefer using open source software like typo3 or magento but i also admire the easiness of saas software and services like squarespace. I spend most of my spare time up in the Alpes.

Share this post


Link to post
  • 0

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!

navigation.png.cdd8ffec6f567074e49e65c72d96e9f3.png

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...