Transifex

  • Documentation
  • Integrations
  • Shopify

Shopify

Shopify is an ecommerce platform that allows anyone to easily sell online, at their retail location, and everywhere in between. Using Transifex Live, you can make your Shopify store multilingual and sell your products worldwide. We have a live example of a translated Shopify store. Use the language dropdown at the bottom right to switch languages.

Below, you'll find instructions for localizing your Shopify store.

Note

Before you begin, you must have a Transifex account and a project you will be associating with your Shopify site. If you have not already done so, sign up for Transifex here.

Adding a website for translation and getting the Transifex Live JavaScript snippet

Before you can use Transifex Live, you must first add a website to Transifex for translation, then install the Transifex Live JavaScript snippet on your site. For instructions on how to do these things, following along with this article.

Installing the Transifex Live snippet

Once you've gotten the Transifex Live snippet, the next step is to add it to your Shopify theme:

  • From the left menu of Shopify, click on Online Store.

    shopify-dashboard.png#asset:3220

  • Next, click on Themes if it's not already selected.

    shopify-themes.png#asset:3221

  • On the right side of your current theme, click the three dots, and hit Edit HTML/CSS.

    shopify-edit-html.png#asset:3222

  • Under Layouts, click on theme.liquid.

    shopify-theme-liquid.png#asset:3223

  • Paste your Transifex Live JavaScript snippet before the </head> tag.

    shopify-theme-header.png#asset:3225

  • Click Save and you're done!

Now you can begin saving and translating content!

Working with a staging site

While you can't officially create a staging instance of your Shopify site, you can duplicate your existing theme for testing purposes:

  • From the left menu of Shopify, click on Online Store to head to your themes.

  • On the right side of your current theme, click the three dots, and hit Duplicate.

    shopify-duplicate-theme.png#asset:3231

    You'll see the copy of your theme added below the current theme.

    shopify-theme-copy.png#asset:3232

  • Follow Steps 3-6 in the "Installing the Live snippet" section above and add your Transifex Live JavaScript snippet if you haven't done so before cloning your theme.

  • Once you've added the Live snippet, find the copy of your theme and click on the Preview button to open up the theme.

  • In the URL bar of your browser, add &transifex to the end of the URL to launch the Transifex Live sidebar.

    shopify-preview-url.png#asset:3239

Saving content, translating, and publishing

Now that Transifex Live is embedded in your page, you can use Transifex live to save content to Transifex, translate in context, and publish translations on the fly.

Handing dynamic content

Dynamic content like dates, times, and counters (e.g. # of articles, # of comments, etc) should not be translated. When approving phrases in Transifex Live, be sure to ignore these types of nontranslatable dynamic content. If your platform lets you edit the theme, you can mark mark elements of your pages as nontranslatable. To learn how, click here.