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 project yet, signup here!


Install / Setup

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

2) Click on "Themes."

3) Click on "Customize Theme."

4) Using the drop down menu click on "Edit code"

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

6) Copy & paste your Localize Code under 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>

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

Visit the Installation page to find your Localize code snippet.

7) Reload your Shopify website

After saving the changes from the previous steps, reload your Shopify website. You'll see the language widget on your website. Select any of your target languages in the widget and visit all pages in your site. Localize will automatically detect the content on your website and save it to your Localize account.

8) Approve phrases for Translation

On your Localize phrases page, click the “Pending” filter and approve the phrases that you would like to be translated. Once finished, check your "Published" content to ensure proper loading.


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) In the dropdown, select "Edit Language"

5) Click on "Change theme language" on the top right to view other languages.

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!