Create A Dual Language Squarespace Website for FREE
Squarespace recently introduced a WeGlot integration making dual and multi-language sites easier to get up and running. I think it’s a great tool, but, like most things in a matrixy society, it comes with a cost. And frankly, I’m here to help you bootstrap your website. That’s why in this post I want to offer a workaround that will allow you to have a dual language site without having to pay for the WeGlot subscription (you’ll still have to pay for your Squarespace subscription though, there is no such thing as a Free Lunch, remember? :) With some slight restructuring of your pages and dropping in some code, you’ll be off and running. Let’s get started.
1/ First, you have to organize the site like this →
So, in the Not Linked section of your dashboard, you will create a page in your primary language, and underneath each Primary Language page you will create the exact same page but in your Secondary Language. In this above example, the primary language is German, and the secondary is English.
2/ Second, you have to make sure that the URL slug looks like this…
http://www.yourdomainname.com/de/blog. In this case, DE stands for German and EN stands for English. If you are using Spanish you can use SP. ALL of the URL slugs must be formatted like that.
So, the German version would be: www.yourdomain.com/de/blog or www.yourdomain.com/de/startseite
The English version would be: www.yourdomain.com/en/blog or www.yourdomain.com/en/home
Once you’ve got the structure of your website set up, you’ll have to drop in some code. To do that, you'll have to go to Pages from the dashboard and scroll all the way down to Utilities. Next, click Website Tools, and then Code Injection.
**Please note that this is the code for the German and American flag toggle. if you need different languages you'll have to edit that yourself.
3/ Drop in the following code...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
/* SETUP MULTI-LANGUAGE */
var defaultLanguage = 'de';
var lang = location.pathname.split("/")[1];
var defaultClass = 'lang-'+defaultLanguage+'';
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
if (lang == "" || lang.length > 2 ){
var lang = defaultLanguage;
}
/* ADD LANGUAGE CLASSES */
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (undefined !== langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (undefined !== langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
if (lang == "en") {
$('a[href="/"]').attr("href", "/en/home/");
}
/* ADD EXCLUSION NAV ITEMS */
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
/* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
$('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
/* SETUP LANGUAGE SWITCHER */
$('body').prepend('<div class="language"><a href="/de/startseite" class="lang-de"><span class="flag-icon flag-icon-de"></span></a> <a href="/en/home/" class="lang-es"><span class="flag-icon flag-icon-gb"></span></a></div>');
});
</script>
4/ Lastly, you’ll have to go back to the Website Tools, and click Custom CSS. Then drop in this code
/*setup language switcher*/
.language {
color: #000;
position: absolute;
top: 10px;
right: 10px;
z-index: 99999;
a {
color: #000;
&:hover {
opacity: 0.8;
}
}
}
***Two final caveats…
1/ You’ll have to keep your footer general for now, meaning I would recommend just including the opening times and social media icons. The reason is that the included code in this post won’t account for dual languages.
2/ Every time you update your website you’ll have to edit each version of the page, so you’ll have to manually edit the Primary Language page AND the Secondary Language page.
