How to translate basic words that are part of a Squarespace template?

So you've built a site with Squarespace and you'd like to translate the built-in words from English to your site's language. For that purpose you're in the right place. This blog post aims to cover all the information related to translating Squarespace templates (we'll update this blog post when updates are made – either by Squarespace or by us.)

THE METHOD

Currently the only method for translating Squarespace sites is using Javascript. This can be done by a third-party service like Localize.js or by inserting javascript code snippets to your Squarespace site's code injection fields. Because Localize.js costs around $50/month, most Squarespace users prefer the code injection method.

The challenge with translations is that each template often has different code. Thus each template might need completely different code to translate the same parts. There are tons of translation snippets around internet, but they often only work on a specific template. We're hoping to solve this one way or another, but we're still in the process of doing so.

WHEN IT’S SUPER SIMPLE

Squarespace has purposedly made translating some parts very easy by using the CSS :after -property instead of HTML. The following code translates blog feed read more button in most templates. This code goes to Design -> Custom CSS

When it's pretty simple

 This example code translates the Share button. Code goes to Settings -> Advanced -> Code injection.

The code above uses the YUI library used by Squarespace. It waits until the page has loaded all content, and then changes the text inside the Share button. Try it out by pasting the code to SETTINGS -> ADVANDED -> CODE INJECTION.

When it gets tricky

The example above was super simple. Translations get more tricky when the elements we want to translate change dynamically, like blog or event date stamps.  The following example translates the blog post date stamps (the month names are what's translated).

This function looks for <time> -tags on your site, then hides them (to avoid flash of the tag showing without translation), then translates them using the datetime attribute of the dates. After translating it fades them in smoothly.

 Following example (blog post date stamp) is still relatively easy to translate because we can use the datetime datetime="2016-05-28" -part.

When it gets trickier

Unfortunately some parts of Squarespace templates that show dates do not use the <time> tag, or if they do they're missing the datetime attribute needed to translate. Example of this would be the next and previous event links in most templates.

This is much harder to translate than the previous example.

As you can see, the translation function gets more complex.

When it gets very tricky

Dates are dynamic in the way that they can contain any value. But an element like calendar block month names that actually change when visitors clicks on the arrows gets very tricky. The following function is still a bit in progress.

I want my site translated. What should I do?

Translation plugin coming up

We're currently in the process of writing translation snippets that translate all parts of all Squarespace templates. These will most likely become available for sale one-by-one on our product page.

Tailored translations as a service

We also offer translations as a service, where you'll add Code and Tonic as an admin to your site and we'll write all the translation functions for you. If you want your Squarespace site translated (and want to pay for it only once and not every month) we're the ones that can make that happen.

Send us a message through the form below and we’ll send you a quote!