Squarespace Multilingual Site: 02 Languages

In this post, I will share step by step guide to create Multilingual site with 2 languages on Squarespace Personal Plan (you can also use on any plans, but if Business Plan, below guide will be better).

If you use Business Plan or higher, follow this guide, It will be better.

1. Create Pages

Suppose we need to create 2 languages: English and Vietnamese, with the following pages

  • Home – Trang chu
  • About – Gioi thieu
  • Service – Dich vu
  • Contact – Lien he

and language switch button

Remember:

+ Create pages in alternating order

+ Note the order of the language switch buttons (as opposed to the order of the pages)

+ Page Slug: use whatever you like! Does not require the use of prefix /vi, /en …

You will have navigation like this

2. Different Navigation

In this step, we will use the code to hide English Navigation Items on Vietnamese Pages, and Vietnamese Navigation Items on English Pages.

First, edit All English Pages > Insert Code Block > Paste below code hide Vietnamese Navigation Items on English Pages.

<style>
.header-nav-list>.header-nav-item:nth-child(even) {
    display: none;
}
.header-menu-nav-folder[data-folder="root"]>.header-menu-nav-folder-content>div:nth-child(even) {
    display: none;
}
</style>

You will have this

Second, add this code to Code Block on All Vietnamese Pages to hide English Items

<style>
.header-nav-list>.header-nav-item:nth-child(odd) {
    display: none;
}
.header-menu-nav-folder[data-folder="root"]>.header-menu-nav-folder-content>div:nth-child(odd) {
    display: none;
}
</style>

You will have

Each template will need a different code. Above is the code for Squarespace 7.1

Squarespace 7.1 includes: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

Here are all popular templates.

Just replace these

.Header-nav-inner>.Header-nav-item

.Mobile-overlay-nav>.Mobile-overlay-nav-item

with below code

Avenue

#topNav ul>li

.mobileNav ul>li

Aviator

nav#main-navigation ul>li

nav#mobile-navigation ul>li

Bedford Template Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

nav#mainNavigation>div

nav#mobileNavigation>div

Brine Template Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

.Header-nav-inner>.Header-nav-item

.Mobile-overlay-nav>.Mobile-overlay-nav-item

Farro

Include: Farro, Haute

.Header-nav-inner>.Header-nav-item

.Mobile-overlay-nav>.Mobile-overlay-nav-item

Five

nav#main-navigation ul>li

nav#mobile-navigation ul>li

Flatiron

ul#nav>li

nav#mobile-navigation ul>li

Galapagos

.nav-list>li

.nav-list>li

Ishimoto

ul#nav>li

ul#nav>li

Momentum

.main-nav ul>li

nav#mobile-navigation ul>li

Montauk Template Family

Include: Julia, Kent, Montauk, OM

div#topNav ul>li

nav.main-nav.mobileNav ul>li

Native

.main-nav ul>li

.main-nav ul>li

Pacific Template Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

nav#mainNavigation>div

nav#mobileNavigation>div

Skye Template Family

Include: Foundry, Indigo, Ready, Skye, Tudor

nav#mainNavigation>div

nav#mainNavigation>div

Supply

.navigation-secondary ul>li

.navigation-secondary ul>li

Tremont Template Family

Include: Camino, Carson, Henson, Tremont

nav#mainNavigation>div

nav#mainNavigation>div

Wells

nav#secondaryNavigation ul>li

nav.main-nav.mobile-nav ul>li

Wexley

div#topNav ul>li

nav.main-nav.mobile-nav ul>li

3. FAQ

Code only works when refreshing the website?

Disable Ajax Loading. If you don’t know how to, Google: “disable ajax squarespace” or contact Squarespace Custom Care.

How to change Logo Link?

I will update soon. or you can send me a message with your site url. I will give you the code.

If you have any problems, please

Share this post:

4 thoughts on “Squarespace Multilingual Site: 02 Languages”

  1. Hello! Your code works great on a desktop view, but it removes half of the sites from the folders you want to keep when you use the dropdown menu in mobile view. Can you adapt the code to just alternate between headers (headlines and folders) and not the headlines under specific folders? Thanks!

    Reply

Leave a Comment