Translating themes

Although Shopify themes are in English, some themes have more than one language option. These themes include translations of all of the text content in your online store, such as product descriptions, contact information, and cart and checkout information.

For themes that include multiple languages, you can simply change the theme language. If your theme doesn't have the language that you want, then you can create the translations yourself.

You can have one language active on your online store.

Choose a language for your theme

You can choose a language for your published theme. If the theme that you want to translate isn't published, then you need to publish your theme before following these steps.

To choose a language for your theme:

  1. For your published theme, click Actions > Edit languages.

  2. Click Change theme language:

    The Change theme language link in the language editor

  3. Click the Language drop-down list to see all the languages now available for the theme:

    A window with a drop-down menu for the available languages

  4. To choose another language, click the language in the list, and then click Save. If the language that you want to use isn't included, then you need to create a new translation for your theme.

Create a translation for your theme

You can create custom translations for your published theme. If the theme that you want to translate isn't published, then you need to publish your theme before following these steps.

Some themes only have the option for you to translate the checkout and system messages. If you need to translate such a theme in full, then you need to create a locale file for the theme.

To create a translation for your theme:

  1. For your published theme, click Actions > Edit languages.

  2. Click Change theme language:

    The Change theme language link in the language editor

  3. Click Language:

    A window with a drop-down menu for the available languages

  4. Click Other languages....

  5. Choose from the second and third drop-down menus as follows:

    • Language: Choose a language.
    • Region: Choose a region (if applicable) or click All to select all regional variations.
    • Click Custom to create a custom name for the language version that you're creating.
  6. Click Save.

  7. Using the language editor, enter translations for your theme text. Your changes are saved automatically.

  8. To make sure that you have created complete translations for all of your theme's text content, you can search for incomplete translations.

Using the language editor to add translated content

You can review and update any language in your theme, whether you created the translation yourself or it came with the download.

You'll need to add translated content to text blocks when you're creating or updating translations:

Find the content that you want to translate

You can use the language editor to find the text content in your theme that you want to translate.

Types of content

There are three basic types of content that you might want to translate:

You can translate each piece of text by entering translations into the text fields.

You don't have to translate every field in your theme. Your changes are saved automatically and you can stop at any time. You can access any existing translation if you want to make changes.

If you leave a field without a translation, then the default language for the theme is used.

You can translate plain text directly, but you'll need to take extra care when translating text blocks containing HTML or Liquid.

Translate plain text

For most of the text on your online store, you don't need to use HTML or Liquid. When you enter a translation of a plain text block, all you have to do is replace the text with its equivalent in the other language.

Text blocks that contain HTML

If a text block contains HTML, then you'll see pairs of angled brackets ( < > ) surrounding words or phrases.

It's important to understand how the HTML is being used in the block that you're translating. Although you'll need to leave most of the content in the original English, there might be some English words inside of the HTML tags that you'll want to translate.

Text blocks that contain HTML are typically used for the following reasons:

An HTML link is surrounded in tags that start with &lt;a href= and end with &lt;&#47;a&gt;.

You must translate only the name of the link, and not its other components. The link name is the only part of the link that your customers will see.

Example of an HTML link name

In this example, you'd replace the words Continue, browsing, and here, with a suitable translation.

Never translate the destination address (also known as the target) in a link. The destination address is where a customer goes when they click the link. It's always shown in quotation marks and points to a specific web address.

Example of an HTML destination address

Translate text styled with HTML

HTML is sometimes used to give emphasis or additional styling to words or phrases, or to display symbols. You must translate only the words that are being styled by the HTML, and not the codes or tags themselves. Take a look at the examples to make sure that you understand what to translate and what you should leave unchanged.

HTML styling examples

In the following example, the <strong> tags are used to display text in bold:

Example of HTML strong tags

In this case, you'd translate only the words On Sale.

In the following example, HTML codes &larr; and &rarr; are used to generate left and right arrow symbols:

Example of HTML arrow symbols

Here, you'd translate only the phrases Previous Product and Next Product.

In the following example, HTML <strong> tags are used to display the filename collection-sidebar.liquid in bold.

Example of HTML strong tags around a Liquid filename

The filename here is a Liquid template file. You should translate the filename only if it's necessary to match the name of the file itself. For example, if you have created your own files, then you might need to change the filename in the HTML.

Never translate HTML tags or symbol codes. These are used by your browser, and are not seen by your customers.

Text blocks that contain Liquid

Never translate Liquid tags, objects, or filters.

Liquid is the templating language that controls the appearance of your website in different contexts. Liquid content is always wrapped in one of the following sets of symbols:

  • {{ and }}
  • {% and %}
  • {%- and -%}

For example:

An example of Liquid

In this example, you would translate only the text around the Liquid, and not {{ date }}.

Here's an example of a text field that uses a combination of plain text, HTML, and Liquid:

Example text that includes HTML and Liquid

Although this example might look complex, the only part that you'd need to translate is the word on.

Review or update a translation

You can view and change any translation once it's available in your theme. For example, if a translation that you created is incomplete, then you can continue to make changes.

To view or update a translation:

  1. Find the theme that you want to edit, and then click Actions > Edit languages.

Add to the translations in the current language or click Change theme language to choose another language in the language editor.

Search a translation for missing or completed fields

If a language is shown as Incomplete in the language editor, then some text fields have not yet been translated. These fields will display in the default language for your theme unless you translate them.

If you're working on a new translation, then you can use a simple search to find all of the missing fields quickly, or to review those that you've already completed.

To search a translation for missing or completed fields:

  1. Find the theme that you want to edit, and then click Actions > Edit languages.

  2. Click filter this page.

  3. Click Filter translations.

  4. Choose Missing or Complete from the second drop-down menu.

  5. Click Add filter.

Add a Google Translate widget to your online store

To add a Google Translate widget to your online store:

  1. Visit the Google Website Translator page.

  2. Complete the steps for Website Info and Plugin Settings.

  3. For the Add Plugin step, copy the code snippet in the box:

    Google Website Translator site showing the embed code snippet

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click theme.liquid to open your theme template file, and paste the code snippet where you want the translation selector to appear.

    If you want the selector to appear on every page, you must include the code in theme.liquid or in a snippet that is included in theme.liquid.

  3. Click Save to confirm the change to your template.

You should now see the Google Translate widget in your store. Check it out in your store, or visit this demo store that uses Google Website Translator.

Ready to start selling with Shopify?

Try it free