Translating your theme

You can have one language active on your storefront besides the default.

Note

If you're confident with theme editing, you can use the language editor to create a new locale file for your preferred language. This method is for experienced developers only.

See the available languages for your theme

To see the languages available for a theme:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. Click Change theme language:

    Available langs
  4. Click the Language drop-down to see all the languages now available for the theme:

    Language list
  5. To choose another language, click the language name in the menu, then click Save. Or if you need a language that's not shown, then choose Other languages... to create it.

Choose a language for your theme

You can choose any one of a theme's available languages for your Shopify store. Some languages are available for your complete theme, but others are available only for your checkout and system messages.

If a translation doesn't exist or isn't possible for any part of your theme's content, the default theme language is used.

To choose a different language for your theme:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. Click Change theme language:

    Available langs
  4. Click the Language drop-down to see all the languages available for the theme (this will include any new translations that you've created.

    Language list
  5. Click the name of a language.

  6. Click Save.

If you need a language that's not listed in the menu, choose Other languages... to create it.

Note

You can also choose your checkout language from the checkout settings.

Creating a new translation from your store admin

Note

You can have only one language active on your storefront at any time besides the default.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. Click Change theme language:

    Available langs
  4. Click the Language drop-down:

    Language list
  5. Click Other languages....

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

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

    Language menu

  7. Click Save.

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

    Note

    Some themes allow you to translate only the checkout and system messages. If you need a full translation you must either change to a theme that supports the language you need, or, if you are confident with theme editing, then create a new locale file (only try this if you're an experienced developer.)

  9. Make a final check by searching for incomplete translations, to make sure you haven't forgotten any.

Overview of the language editor

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:

Finding the content you want to translate

The language editor has a series of tabs across the top of the screen (you might have to click the down-arrow at the right to see all the tabs):

Language editor tabs

The tabs cover the different categories of text in your theme, for example:

General General text and messages including form submissions, subscriptions, and search
Blogs All elements associated with reading, posting, and commenting on blog articles
Cart Content and messages displayed on the cart page
Collections Text associated with creating, viewing, searching, and sorting collections
Products Messages related to viewing products and product availability
Layout Layout-related content such as footer notices and login status messages
Customer Field names and messages for customers, accounts, and order details
Contact Field names and messages for contact forms
Home page Messages and labels for frontpage content
Gift cards Notices related to issuing, using, and managing gift cards
Checkout and system All checkout content, and system titles, errors, and notices.

Types of content

Note

You can use only one language at a time on your storefront besides the default.

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

You translate each piece of text by typing straight into the text field:

Enter translation

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 update or complete it.

If you don't translate a field, it will use the default language for that theme.

Caution

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

Translating plain text

Most of the text that gets displayed on your website doesn't rely on any special coding such as HTML or Liquid. Here's an example:

Plain text block

When you're entering a translation of a plain text block, all you have to do is replace the text with its equivalent in your preferred language.

Text blocks containing HTML

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

It's essential to understand how the HTML is being used in the block you're translating. Although you'll need to leave most of it in the original English, there might be some English words inside the HTML tags which you'll want to translate (usually link names.)

A text block containing HTML typically performs one or both of the following functions:

An HTML link is surrounded in anchor tags that start with <a href= and end with </a>.

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

Link name example

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

Caution

Never translate the destination address (also known as the target.) The destination address is the location a visitor is taken to when they follow the link. It's always shown in quotation marks and points precisely to a specific internet location or to a Liquid variable containing it.

Link address example

Translating words styled with HTML

Sometimes, HTML is 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, not the codes or tags themselves. Take a look at the examples to make sure you understand what to translate and what you should leave unchanged.

Examples

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

Html strong example

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

In this example, HTML codes &larr; and &rarr; are used to generate left and right-facing arrow symbols:

Html arrows example

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.

Strong filename example

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, when you've created your own files.

Caution

Never translate HTML tags or symbol codes. These are used by your browser when it produces the display, and are not seen by your visitors.

Text blocks containing Liquid

Never translate Liquid tags, objects, or filters.

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

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

For example:

Liquid example

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

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

Combo translate

Although this example might look complex, the only part 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 you created is incomplete, then you can continue where you left off.

To view or update a translation:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

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

Search a translation for missing or completed fields

If a language is shown as Incomplete in the language editor, it means that some text strings have not yet been translated. These will be shown in the default language for the theme unless you translate them.

If you're working on a new translation, you can use a simple search to find all the missing fields quickly - or to check those you've completed:

  1. Click filter this page.

    Filter translations
  2. Click Filter translations.

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

  4. Click Add filter.

Your selected translation fields are displayed.

Add a Google Translate widget to your website

Did you know?

If your theme has built-in translation features, you should follow the simplified translation process instead.

  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
  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. 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.

  7. 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 online with Shopify?

Try it free