Translate Inline

You can use the Translate Inline tool in developer mode to touch up text in the interface to reflect your voice and brand. When the Translate Inline mode is activated, any text on the page that can be edited is outlined in red. It is easy to edit field labels, messages, and other text that appears throughout the storefront and Admin. For example, many themes use terminology such as “My Account,” “My Wishlist,” and “My Dashboard,” to help customers find their way around. However, you might prefer to simply use the words “Account,” “Wishlist,” and “Dashboard.”

The Translate Inline tool is available only when working in developer mode.

See Translations overview in the developer documentation.

Translatable Text

If your store is available in multiple languages, you can make fine adjustments to the translated text for the locale. On the server, interface text is maintained in a separate CSV file for each output block, and is organized by locale. As an alternate approach, rather than use the Translate Inline tool, you can also edit the CSV files directly on the server.

To use the Translate Inline tool, your browser must allow pop-ups.

Step 1: Disable Output Caches

  1. On the Admin sidebar, click System.

  2. Under Tools, choose Cache Management.

  3. Mark the following checkboxes:

    • Blocks HTML output
    • Page Cache
    • Translations
  4. Set the Actions control to Disable. Then, click Submit.

    Disable Output Caches

Step 2: Enable the Translate Inline Tool

  1. On the Admin sidebar, click Stores.

  2. Under Settings, choose Configuration.

  3. To work with a specific store view, set the Store View that is to be updated.

  4. In the panel on the left under Advanced, choose Developer.

  5. Expand the Translate Inline section. Then if necessary, clear the Use Website checkbox.

  6. The Enabled for Admin option is not available when editing a specific store view.

    Translate Inline

  7. Set Enabled for Storefront to Yes.

  8. When complete, click Save Config.

  9. When prompted, refresh the invalid caches, but leave the disabled caches as they are for now.

Step 3: Update the Text

  1. Open your storefront in a browser, and go to the page that you want to edit. If necessary, use the language chooser to change the store view.

  2. Each string of text that can be translated is outlined in red. When you hover over any text box, a book icon () appears.

  3. Click the book icon () to open the Translate window. Then, do the following:

    • If the change is for the specific store view, mark the Store View Specific checkbox.

    • Enter the new Custom text.

  4. When complete, click Submit.

    Enter Custom Text

  5. To see your changes in the store, press the F5 key to refresh the browser.

  6. Repeat this process for any elements in the store to be changed.

Step 4: Restore Original Settings

  1. Return to the Admin of your store.

  2. On the Admin sidebar, click Store.

  3. Under Settings, choose Configuration.

  4. Set Store View to the specific view that was edited.

  5. In the panel on the left under Advanced, choose Developer.

  6. Expand the Translate Inline section.

    Translate Inline

  7. Set Enabled for Frontend to No.

  8. When complete, click Save Config.

  9. On the Admin sidebar, click System.

  10. Under Tools, choose Cache Management.

  11. Mark the checkbox of the following output caches that were previously disabled:

    • Blocks HTML output
    • Page Cache
    • Translations
  12. Set the Actions control to Enable. Then, click Submit.

  13. When prompted, refresh any invalid caches.

Step 5: Verify the Changes in Your Store

Go to your storefront and examine each page that was updated to make sure the changes are correct. In this example, “Customer Login” was changed to “Customer Sign In.” If changes were made to a specific view, use the Language Chooser to switch to the correct view.

Customer Sign In