Translate a Squarespace website

29 Jul

Squarespace makes it easy to reach potential customers around the world but, in practice, communicating with a global market can be challenging for small businesses. For example you may need to translate your website content for local markets, translating the page content and showing prices in another currency.

Tests have shown that consumers often don’t purchase from sites in another language or where the prices are shown in another currency. If you have an English-language Squarespace website where the prices are in US Dollars and you want to target your website or your products at other markets around the world, you may want to consider translating some of the page content or publishing your prices in other currencies.

Showing prices in other currencies

We built the first Currency Extension for Squarespace 7.0 and it is still the most reliable. A new version was recently released for Squarespace 7.1 called Currencies. Both extensions allow you to target specific markets such as Europe, Africa or Asia.

Currencies detects the correct currency for each visitor and, if supported, shows prices in this currency, in addition to the checkout currency. This avoids potential confusion when the customer reaches the Squarespace Checkout where their card will be charged in your store’s native checkout currency. Of course their bank bank will automatically convert the charge into the cardholder’s currency.

Translating Squarespace content into different languages

If you have an English-language website, there are a number of tools available to help you translate your content into other languages. The cheapest of these solutions are free! But as you’ll quickly discover, free solutions usually cost more in the long run because they usually involve a lot of manual effort. If time is money, you’ll be better using a paid solution.

Option 1 - Weglot

Weglot is probably the best automated solution available. There is a monthly subscription (from around €9.90 per month) but it’s a no code multilingual extension for Squarespace. Weglot automatically detects and translates all of your website content, including pages, blog posts, menus, and products in your online store. It even translates the checkout - something that other solutions cannot do.

Weglot follows Google SEO best practices too. Your translated website content is automatically indexed on Google and displayed under language subdomains (prefixes like “de.” for German pages and “.es” for Spanish pages). It also translates metadata and adds hreflang tags.

If you’re looking for a capable solution with minimal initial effort for a fixed monthly fee, Weglot is the best solution available, and it’s the only solution that works with online stores.

Option 2 - Manual translation

If you have an English-language website and you’re capable of translating page content into other languages (or happy to use Google Translate to do this for you) then you may prefer to create duplicate pages manually and translate the content yourself. This can work really well for websites with less than 100 pages and it’s a free solution! The downside is that every time you add content like a blog post, you’ll need to manually create the same blog post in the other language(s) which can be time-consuming. I don’t recommend it for selling online either, as you’ll need to create duplicate product content which doesn’t make it easy to manage inventory, and you won’t be able to translate the checkout.

If manual translation sounds right for you, take a look at Brad Good’s article on how to do this well.

Option 3 - Google Translate

Anyone can view your Squarespace website in their language using the free online service provided by Google. This is built in to the Chrome browser and can be used with any browser from translate.google.com.

Google used to provide a free Website Translator service that would add a language selector to your website’s header and then translate your site but they withdrew this service some time ago (they temporarily allowed it again in 2020, but only for public organisations dealing with the COVID-19 response). That said, it is still possible to use it on a Squarespace website with some “know how”.

As Google withdrew the officially-supported service, this method isn’t guaranteed but it has been working for the last three years and it will at least allow you to try automated translation to see if helps your website visitors. Note that Google Translate uses code, so you’ll need to be on a Squarespace Business or Commerce plan to use it (Squarespace Personal Plans don’t support code).

To add Google Translate, go to Settings > Advanced > Code Injection and add the following to the Header panel:

  
    <div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
  
  

Save the changes.

Next, navigate to Design > Custom CSS and add the following:

  
    /* Google Translate styling */
// Page position
#google_translate_element {
  z-index: 999999;
  right:17px;
  top: 17px;
  position: absolute;
}
// Text colour
#google_translate_element .goog-te-gadget, #google_translate_element .goog-te-gadget a{
  color:#fff;
}
  
  

The last but one line sets the colour of the ‘Provided by Google Translate’ message. You can change this from white (#fff) to your preferred colour.

Save your changes and test it out!

Translate