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

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 you're in the right place. This blog post aims to cover all the information related to translating Squarespace templates (I'll update this blog post when progress is made – either by Squarespace or by Vox Pop)


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 at the moment I'm writing this Localize.js costs $49/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 completetely different code to translate the same parts. There are tons of translation snippets around, but often they only work for a specific template. We're hoping to solve this one way or another, but we're still in the process of doing so.

When super simple

Squarespace has purposfully 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?

Transltaion plugins coming up

We're currently in the process of writing translation snippets that translate all parts of all Squarespace templates. These will become available for sale one-by-one in our products page under the category Squarespace translations.

Tailored translations as a service

We also offer translations as a service, where you'll add Vox Pop 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 once and not every month) we're the ones that can make that happen.

Get in touch by emailing or by filling the form below and we'll get back to you with a price.

Please list parts to be translated, including the pages they're on. Links to screenshots are helpful.