Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Localize with Squarespace

Localize is a website translation service. If you have a Localize account, you can automatically translate your site into multiple languages by adding Localize's Javascript code to Code Injection. This is a great solution if you're interested in automated translations and want to avoid rebuilding pages for every language you offer.

By following this process, you'll use your site's Main Navigation for links to different languages.

The solution in this guide includes injecting code. Code Injection is a Premium feature available in the current Website Business plan and higher:

  • Available in: All Business and Commerce plans
  • Available in: Legacy Personal plan (no longer available for new subscriptions)
  • Not available in: Current Personal plan
  • Trial: You can use Code Injection during a trial.

To learn more, visit Premium features.

Step 1 - Open Code Injection

In the Home Menu, click Settings, click Advanced, and then click Code Injection.

Step 2 - Add the Localize code

Copy and paste the code below into the Header box. Replace YOUR-PROJECT-KEY with your Localize project key located in your Project page in the right sidebar of your Localize account.

<script src="//"></script><script>!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","untranslatePage","bootstrap","prefetch","on","off"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script><script>  Localize.initialize({    key: 'YOUR-PROJECT-KEY', // Replace this with your project key    rememberLanguage: true,    saveNewPhrases: true,    translateBody: true,    blockedClasses: ['sqs-frontend-overlay-editor-widget', 'sqs-edit-mode-controller', 'sqs-frontend-overlay-editor-widget', 'sqs-frontend-overlay-editor-widget-host', 'cke']  });</script>
Note: This code is provided by Localize, and we're unable to provide support for modifying or troubleshooting it.

The Header Code Injection should look like this:

Click Save.

Step 3 - Add external navigation links to each language

The next step is to add external navigation links for every language to Main Navigation. This will create a navigation menu of your available languages.

In the Home Menu, click Pages, then click the + icon.

Select Link from the New Page menu.

In the Configure Link window that appears, enter the name of the language in the Link Title box. This is the text that will appear as a navigation link, so we recommend using full language names like English, Español, Français, etc.

Click Click to add URL.

Copy and paste the code below in the Link box. Change "en" to the two-letter language code for this language provided by Localize. You can find these codes in your Localize account.

Leave Open in New Window unchecked.


Click Save to add the navigation link.

Repeat this process for every language you want available on your site.

Tip: Drag and drop the links around the Pages panel to reorder them. To learn more, visit Moving pages around your navigation.

Step 4 - Reload your site

After adding all navigation links, ensure all of your work is saved, and then refresh your browser. Localize will automatically detect the content on your site and save it to your Localize account.

Step 5 - Approve phrases in Localize

Log into Localize. In your Localize phrases page, click the Pending approval filter and approve the new phrases detected in your Squarespace site content.

Step 6 - View your translations

Refresh your Squarespace site again. Click any language link, and your page will instantly translate.

Note: This third-party customization falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, since this is a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Third-party customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Was this article helpful?
3 out of 6 found this helpful