Shopify

Shopify and Localize are everything you need to sell anywhere.

Translate your Shopify store with Localize

Below is a step by step guide for creating a multi-lingual Shopify store with Localize.

If you do not have a Localize Project yet, signup here!


Install / Setup

1. Click "Online Store" in your Shopify dashboard.

2. Click on "Themes."

3. Click on "Customize" in Themes.

4. Find “Theme actions” at the bottom left corner and click it.

Using the drop down menu, click on "Edit code".

5. Choose your theme.liquid from the Layout options.

6) Install the Localize Code Snippet in the <head> tag.

<script src="https://global.localizecdn.com/localize.js"></script>
<script>!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

<script>
  Localize.initialize({
    key: '[[app:key]]', 
    rememberLanguage: true
  });
</script>

7. Make sure to save the code you've added at the top right by clicking "Save".

8. Reload your Shopify website.

Visit your website in a browser in your target language and refresh the page.
Localize will automatically begin to detect new content on the page.

9) Approve phrases

Then head on over to the Phrases tab to approve phrases in the Localize dashboard.

10) Phrases not showing up?

If you are not seeing phrases show up in your Pending bin in the Localize dashboard, follow the troubleshooting instructions here.


Checkout Cart

Please note: Checkout cart translation support works only with the new "Responsive Checkout Cart." Read More. Also, support for different languages depends on your theme's supported languages.

Part 1: Figuring out what languages are supported by your Shopify Theme

Repeat Steps 1-3 (as described above in Manual Setup) and return to the Themes page.

4. Find “Theme actions” at the bottom left corner and click it. In the drop down menu, click on "Edit Languages"

5. Click on "Change theme language".

If your languages are already supported, skip ahead to our Localize Checkout Script guide. Otherwise, continue reading.

Part 2: Adding Custom Languages

1. Select "other languages"

2. Select your language and click Save.

3. Click on Cart.

4. And review translations provided or add your own. Don't forget to Save.


Checkout Script

Repeat Steps 1-4 (as described above in Manual Setup)

5. Select "theme.liquid"

6. Add this code before the "/head" tag of your layout file.

<script>
  var updateFormLocale = function() {
    if (window.location.href.match(/cart/)) { // Check if on the cart page
      var language =  Localize.getLanguage();
      var forms = document.getElementsByTagName('form');
      for (var i = 0; i < forms.length; i++) {
        if (forms[i].action.match(/cart/) && language) { // Update the form URL to include the language
          forms[i].action = '/cart?locale=' + language;
        }
      }
    }
  };

  if (window.addEventListener) {
    window.addEventListener('load', updateFormLocale, false);
  } else if (window.attachEvent) {
    element.attachEvent('onload', updateFormLocale);
  }

  Localize.on('setLanguage', updateFormLocale);
</script>

7. Click 'Save' and visit the Checkout Cart to test it out!

Redirect From:
https://localizejs.com/questions/compatibility/shopify-checkout-script
https://localizejs.com/questions/compatibility/shopify-checkout-cart


Need Help? Contact us for custom integration help or troubleshooting!

Shopify


Shopify and Localize are everything you need to sell anywhere.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.