Free Alternative to Weglot: How to make Squarespace website multilingual in 15 minutes
Introduction
Squarespace by default uses Weglot to provide multilingual functionality to their website, however, it has a limit of only 2000 words for the free version and requires you to pay to increase the limit which starts from 15$ a month for 10K words.
This may not be an option for many websites as the modification to content is not as frequent or they don't want to enter into a recurring payment plan for something they will use only once a few months.
In this article, I will provide a simple solution to make your website multilingual without paying any additional fees. I will require you to add some Javascript and CSS code to the website and HTML to fix the SEO. Don't worry if this may be a lot for nontechnical readers I tried to simplify the code as much as possible to increase the readability.
Have a look here for an example of how it may look in practice
https://tradokk.com
Create pages in all the languages
Create a duplicate for each page for every language, for example, if you are creating a website in English and German language create a home page in English and use /en/home as URL SLUG, while for German home page use /de/home as URL SLUG.
Here are a few examples of endpoints:
/de/home
/en/home
/de/services
/en/services
/de/about-us
/en/about-us
NOTE: Make sure to use the same prefix after the language code so the switching between languages from a specific page such as /en/services will redirect to /de/services
Add language switcher widget for desktop and mobile version
Once you have all the pages available in all the languages it's time to add the switch widget on the website.
To do so navigate to Settings>Developer Tools>Code Injection and add the following code in the footer section.
Add dependencies for flag icons and jquery
<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>Setup the multilingual widget and redirect setting
Modify the constant in the first lines to change the behavior of the website including adding more languages:
<script>
/* CONSTANTS */
var defaultLanguage = 'de';
var defaultClass = 'lang-' + defaultLanguage;
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
var languageData = {
en: {
code: 'en',
path: '/en/home',
flag: 'flag-icon-us',
homepagePath: '/en/home',
homepageLink: '/en/home'
},
de: {
code: 'de',
path: '/de/home',
flag: 'flag-icon-de',
homepagePath: '/de/home',
homepageLink: '/de/home'
}
// Add more languages here as needed
};
/* SETUP MULTI-LANGUAGE */
$(function() {
var lang = location.pathname.split("/")[1];
if (!(lang in languageData)) {
lang = defaultLanguage;
}
/* ADD LANGUAGE CLASSES */
$('a[href="/"]').addClass(defaultClass).parents(itemParent).addClass(defaultClass);
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function() {
var langType = $(this).attr('href').split("/")[1];
var language = languageData[langType];
if (language && langType.length <= 2) {
var multiLanguageClass = 'multilanguage lang-' + langType;
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
}
});
$('nav button').each(function() {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var language = languageData[langTypeFolder];
if (language && langTypeFolder.length <= 2) {
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder;
$(this).addClass(multiLanguageClass);
}
});
/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
var language = languageData[lang];
if (language) {
$('a[href="/"]').attr("href", language.homepagePath);
}
/* ADD EXCLUSION NAV ITEMS */
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');
/* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
$('.multilanguage:not(".lang-' + lang + ',.exclude")').remove();
/* SETUP LANGUAGE SWITCHER */
var languageSwitcherHtml = '<div class="language-picker">';
for (var languageCode in languageData) {
if (languageData.hasOwnProperty(languageCode)) {
var language = languageData[languageCode];
languageSwitcherHtml += '<a href="' + language.homepageLink + '" class="lang-' + language.code + '"><span class="flag-icon ' + language.flag + '"></span></a> ';
}
}
languageSwitcherHtml += '</div>';
/* append for desktop version */
$('.header-menu-nav-folder-content').prepend(languageSwitcherHtml);
/* append for mobile version */
$('.header-actions').prepend(languageSwitcherHtml);
/* LANGUAGE SELECTION REDIRECT */
$('.language-picker a').on('click', function(e) {
e.preventDefault();
var selectedLang = $(this).attr('class').split(' ')[0].replace('lang-', '');
var currentPath = location.pathname;
var redirectUrl;
if (currentPath.startsWith('/' + lang + '/')) {
redirectUrl = currentPath.replace('/' + lang + '/', '/' + selectedLang + '/');
} else {
redirectUrl = languageData[selectedLang].homepagePath;
}
window.location.href = redirectUrl;
});
});
</script>Extend the CSS to improve the language switch widget
Navigate to Design>Custom CSS to add the CSS
/*setup language switcher*/
.flag-icon {
border-radius: 50%;
height: 1.3em;
background-size: cover!important;
&.flag-icon-squared {
height: 1em;
}
}Fix the SEO to avoid duplicate results in search engines
One of the limitations of this approach is that search engines such as Google Search may show the same page in both languages.
It can be fixed using the HTML Tags, have a look here at google guide on how to configure localized versions of the pages
In the advanced section of each page add the following code to provide all its alternatives,
for example, the /de/contact header will look as follows
<link rel="alternate" hreflang="de" href="https://tradokk.com/de/services/all" />
<link rel="alternate" hreflang="en" href="https://tradokk.com/en/services/all" />
<link rel="alternate" hreflang="x-default" href="https://tradokk.com/de/services/all" />similarly /en/contact will look as follows
<link rel="alternate" hreflang="en" href="https://tradokk.com/en/contact" />
<link rel="alternate" hreflang="de" href="https://tradokk.com/de/contact" />
<link rel="alternate" hreflang="x-default" href="https://tradokk.com/de/contact" />NOTE: make sure the order of the link in the harder is correct, the current page comes first the alternate page, and then the default page, you can test the result using this tool: https://technicalseo.com/tools/hreflang/
Conclusion
If you need complete control over how you manage the multilingual Squarespace website with no additional cost, this is the best solution out there. However, if the frequency of updating the content is very high with more than 3 languages, the high recurring cost for Weglot may be justified.
