Written by Hanseo

Table of Contents

Problem

Squarespace doesn’t have a native component for language change. It does however, have a weglot plugin integration that is not free.

Solution

  1. Create all sites in all languages, in this case (EN, ES, PT).
  2. Add all pages on main navigation
  3. Hide navigation elements that are in a different language through display hidden
    1. I’ve set the display hidden based on the order of the elements on css
      • The issue with that is that every time you add/remove a page you would have to make adjustments on each page code injection…
      • On mobile, the order of elements is different because squarespace counts the language dropdown selector differently. So that also needs custom code
      • There must be a better way to do this, like a script that displays/hides based on the url “/es, /en, /pt” ?
  4. Add Logo url to change depending on which language site the page is in
    1. ie. for Portuguese site logo url should take to cajeropay.com/pt
  5. Apply same system for footer links

Pros:

Cons: