Easily create a multilingual site in Squarespace (7.0 & 7.1)

Feb 14

While redesigning my website at the end of 2021, I came across a little translation widget called GTranslate that has proven to be pretty darn helpful. Especially, considering that the lowest plan is free!

Now, of course, the translation you get isn’t perfect but it does get the job done, at least while you test things out before committing to a paid plan.

And, because I got a few questions about it after the new site launch, today I want to share with you the easiest way you can set it up to create a multilingual site in Squarespace for your clients.

So, without further ado, let’s jump into the tutorial!

Tutorial

Overview & timestamps

00:00 - Intro
First, let’s take a quick look at what the final result is going to look like, once we have implemented the translation widget into Squarespace 7.1 and 7.0.
00:17 - Setting up the GTranslate widget in 7.1
Knowing what we’re going for, we’ll head over to the GTranslate.io website to select how we want the widget to show up on our site. You can follow along with the exact options I use or play around with the different settings.
After we’re happy with the look, it’s time to bring the code into the Header Code Injection section of the site.
03:45 - Styling the flags bar in 7.1
With the flags in place, it’s time to add some styles to create a nice-looking language bar. Keep in mind that IF YOU DON’T SEE THE FLAGS at this point, you may want to temporarily disable the background color of your header so you can follow along. You can add it back after you’re done with the customization!
04:38 - Fixing overlap issue in 7.1
Because of how 7.1’s header is built and styled, we’ll run into a little overlapping issue that won’t let us interact with the translation widget right away. So, we’ll need to do something about it here.
10:00 - Making changes if a fixed header is being used in 7.1
Last but not least, we’ll take a look at the tweaks you can make to your language bar if you happen to use the Basic Fixed position for Squarespace’s header.
12:45 - Setting up the widget in 7.0
With 7.1 out of the way, it’s time to apply the same widget to 7.0!
13:05 - Styling the flags bar in 7.0
Style-wise, things are actually simpler here, because we won’t have the header issue we had to tackle before.
14:29 - Making changes if a fixed mobile header is being used in 7.0
However, if we want to have a fixed mobile header, it will be necessary to make a couple of changes to the translation widget code, to make sure everything sits where it should.

I hope you found this helpful for your next multilingual site in Squarespace!
Until next time,

Full code

Widget modification for both versions

<div class="lang-flags">
  //the translation widget HTML goes here
</div>

Squarespace 7.1

/*EASILY CREATE A MULTILINGUAL SITE IN SQUARESPACE (7.1)*/
//If Squarespace header is NOT set to fixed or set to fixed Scrollback
.lang-flags {
  background-color: black;
  padding: 10px 20px;
  text-align: right;
}
.header {
  top: 40px;
}

//If header is set to fixed Basic
.lang-flags {
  background-color: black;
  box-sizing: border-box;
  padding: 10px 20px;
  position: fixed;
  text-align: right;
  width: 100%;
  z-index: 10;
}
.header {
  top: 40px;
}

Squarespace 7.0

/*EASILY CREATE A MULTILINGUAL SITE IN SQUARESPACE (7.0)*/
//If Squarespace mobile header is NOT set to fixed
.lang-flags {
  background-color: black;
  padding: 10px 20px;
  text-align: right;
}

//If Squarespace mobile header is set to fixed
body.is-mobile .lang-flags {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 90;
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
  top: 51.98px;
}

Header and menuTutorial