How to add 2 languages to Squarespace site

To add 2 languages to Squarespace site, we can use these approaches.

  • Use Bradgood guide: create pages in 2 languages, then use script code to show corresponding pages on corresonding languages.

  • Use WeGlot: SS has an extension for WeGlot, you can check it here

  • Use Google Translate

  • …and some other approaches.

In my guide, we will use Website Translator Widget (free) to do this.

  • I find it works similar to Google Translate but is easier to set up, and it doesn’t create those extra elements at the top of the website.

Follow these steps.

#1. First access Website Translator page and click Create widget for free.

#2. Add your desired language & preview it on right side.

You can also click Design to choose your desired style.

#3. Next, click Publish on top right then choose Free version.

#4. Next, copy Embed Code.

#5. Paste embed code to Footer Injection

#6. Next, use this code to Custom CSS.

div[class*="eapps-website-translator"] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    align-items: flex-end;
}

Result

#7. Customize

If you want to move it under header, you can adjust top value in the code.

If you want to hide languages on burger menu is open, use this extra code to Custom CSS.

body.header--menu-open div[class*="eapps-website-translator"] {
    display: none !important;
}

1 Like