Translate BigCommerce

Below is a step by step guide for integrating Localize into your Bigcommerce application.

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

1. Click "Storefront" in the left navigation menu in your Bigcommerce Dashboard. Then, click “My Themes” under the Storefront menu.

2. In the My Themes page, under the "Current Theme" tab, locate and click the "Advanced" dropdown.

3. Select “Edit Theme Files” in the dropdown menu. This will open a popup.

4. Click “Edit Theme File” in the popup. This will open an inline editor in the bigCommerce website.

5. In the editor, locate “base.html” in the path -> templates - >layout -> base.html.

6a. Once there, add the Localize Code Snippet.

<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","hideWidget","showWidget","getSourceLanguage"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

<script>
 Localize.initialize({
  key: '[[app:key]]',
  rememberLanguage: true,
  // other options go here, separated by commas
 });
</script>

Ensure that you insert the code inside the tag as in the image below.

6b. Add Initialization Options

Add any desired options to the Localize.initialize() call above, check here for the full list of possible options.

Some popular options include:

• autoApprove - use to fully automate your translation workflow
• localizeImages - allows for localization of images in your site

7. Save & Publish your changes.

8. Reload your website.

1. Visit your website in a browser.
2. Select one of your target languages using the language-switching widget.
3. Refresh the page.
4. Lather, rinse, repeat, for each page on your site.

Localize will automatically begin to detect new content on the pages that you visit, and will bring it into your dashboard.

9. Approve phrases

Then head on over to the Manage Phrases page 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.

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