Shopify

The following step by step tutorial will help you configure your Shopify Site with Translation Exchange service and allow you to translate your site to any number of languages.

If you haven't yet setup your project on Translation Exchange, please sign up here and follow the project setup instructions.

Step 1. Edit your store theme HTML/CSS.

From your admin navigation on the left, choose "Themes" section.

From the top right menu "..." choose "Edit HTML/CSS"

Select "theme.liquid" under the "Layouts" section

Step 2. Insert our JavaScript SDK initialization code to the head section of your site.

Copy the following code to the head section of your site. Make sure you replace "YOUR-PROJECT-TOKEN" and "YOUR-PUBLIC-KEY" with your token and key, click the "Save" button.

<script src="https://cdn.translationexchange.com/tools/tml/stable/tml.min.js"></script>

<script>  
tml.init({  
  key: "YOUR-PROJECT-KEY",
  translateBody: true,
  translateTitle: true
});
</script>  

The initialization code should be inserted right under the "head" tag.

Step 3. Add links to change languages.

From your admin navigation on the left, choose "Navigation" section.

From the "Main Menu" click on "Edit Link list".

Add a link for each language you want to display.

tml.changeLanguage('ru');  

Alternatively, you can use one of our default language selectors for changing languages. Add the following "div" tag where you would like the language selector to appear.

All your languages will automatically appear in the designated area.

You can also add a link asking your viewers to help with translations.

Tml.Utils.toggleInlineTranslations();  

Translation Exchange provides a default language selector for changing languages. Add the following "div" tag where you would like the language selector to appear.

<div data-tml-language-selector="popup" data-tml-toggle=true data-tml-powered-by=true></div>  

Once activated, your visitors will be able to help you translate your site right from within the site.

Once you complete the above steps, please refresh your page. To activate the inline translation mode, use the following shortcut: CTRL+Shift+I

When you active the inline translation mode, your application content will be synchronized with Translation Exchange and your strings will appear in your Dashboard.

Integration with your site is now complete. Please follow our simple tutorial on how to order and publish translations for your site.