Custom Translations

Last updated

You can change or hide some texts locally in your Ecwid storefront with the help of special custom codes. Such codes should be created by means of Javascript.

If you want to add in Ecwid a translation to a new language, or your found some mistakes in existing translations, please refer to the following article: How can I contribute Ecwid translations?

How can I change or translate any text in my storefront?

Every text in Ecwid (that is not added by you) is a label. You can change these labels yourself to translate your storefront or to make the wording more fitting your individual Ecwid setup.
This translation includes adding of a special JavaScript code with the updated labels before the Ecwid integration code.

The format of such a code is:

<script type="text/javascript">
  ecwidMessages = { 
    "LABEL_NAME":"LABEL_VALUE", 
    "LABEL_NAME-2":"LABEL_VALUE-2", 
    "OTHER_LABEL_NAME":"OTHER_LABEL_VALUE" 
  }; 
</script>

LABEL_NAME is the internal name of the text label. LABEL_VALUE is the text that is shown in the storefront. You'll find the label names and the default values in the attached document.

The important things you should pay attention to are:

  • each line must be ended with comma except the last line
  • do not leave empty lines in the Javascript code
  • the special chars should be escaped. For example if the value of a label has double quote(") it should be escaped with the slash(\")
  • some buttons are actually images, so you cannot translate them using JavaScript. Use CSS code to replace the images
  • keep HTML tags in the label values, they're necessary for correct Ecwid work
  • mind the spaces after the label values. Some labels have it.  So make sure that they won't be loaded during the translation.
  • UTF-8 charset is strongly recommended
  • if you don't like to insert many JavaScript lines to your store page, you can move them to the external JavaScript file: www.ecwid.com/forums/showthread.php?p=2337#15

If you're not familiar with JavaScript, but want to translate your store or change its labels, you can use the Ecwid Translate Tool. It will make the translation much easier. Just insert new values, press "Generate" button and copy the generated code.

Example: to replace the "Shopping Bag" text with "Shopping Cart" in the bag widget and "your bag" page. We need to add the following code before this line: <script type='text/javascript' src='http://app.ecwid.com/script.js?store_id'></script> on your web page:

<script type="text/javascript">
  ecwidMessages = {
    "BreadCrumbs.your_bag" : "Your shopping cart",
    "Minicart.shopping_bag" : "Shopping Cart",
    "ShoppingCartView.shopping_bag" : "Your Shopping Cart",
    "EmptyShoppingCartPanel.empty" : "Your Shopping Cart is empty"
  };
</script>

Then refresh the page and check the result.

How do I apply a custom translation in Joomla?

Ecwid allows changing built-in translations with use JavaScript in the source code of your shop page, as described above. If you embed Ecwid manually, by copying and pasting the code from the Dashboard page of your Ecwid control panel to the HTML source of your page, then the translation code needs to be inserted likewise into the HTML source code of that same page.

However, when you use RokEcwid plugin to embed Ecwid into Joomla, you cannot just edit the source code of your shop page, because it is fully generated by the plugin and the template of your Joomla site. In this case you need to put the JavaScript code into a new 'Custom HTML' module in your Joomla and then publish that module in any position on the shop page or even on all pages of the site (it will not harm anything). This way the custom translation code will get into the shop page source code and your custom labels will work.

How do I apply a custom translation in Wordpress?

The code for your custom translations should be placed in the HTML code of the Wordpress page where your Ecwid store is installed. If you embed Ecwid manually by copying and pasting the code from the Dashboard page of your control panel to your store page, then the translation code needs to be inserted likewise into the HTML source code of that same page.

On the other hand, if you use our Wordpress plugin, it creates a special page for the store - ‘Store’, you will find it in your WordPress Admin area → Pages. You need to go editing this page, switch your editor to HTML mode (a gray tab on the top right of the editable area) and paste the code for your custom translation in there. Press Update button on the right column and check your store.

How do I apply a custom translation in Wix?

In case you have a Wix-based website, you can add the code for custom translations in the “Advanced settings”field in the Wix admin area.

Where to find the “Advanced settings” field:

  • Open your Wix administration area, choose “Edit site”, then open the page where you added Ecwid app.
  • Place the cursor on the area with shop and double click. A popup window with app settings will appear.
  • Scroll down to advanced settings. There will be a box where you can add the code. 
  • Add your code to a box. Close this popup. Then save the changes and click “Publish” button.

Can I apply a custom translation in Facebook?

To add a  custom translation to your store of Facebook, please, open https://apps.facebook.com/ecwid-shop/ page and proceed to the "Settings" page. Add the code to the "Advanced settings" text field and click "Save".

Troubleshooting

I've added a translation using a JS code, but the whole store is still in English

Usually it happens for the following reason: the JS script, which you added to the source code of your website has some JavaScript syntax errors.

Post a link to your store and we will look into the issue.

I've added a translation using a JS code in Joomla, but it doesn't work. Joomla editor removes any script I put in it

Please refer to this article: How to add Javascript code to articles or Custom HTML modules in Joomla?

How can I translate or change buttons?

All Ecwid images can be changed via CSS. Please refer to these articles for more information: 

How can I translate country names?

Each text in Ecwid has its own label. You can override these labels to add your own texts, translations, etc.
All country names labels have the following format: Country.COUNTRY-CODE, where COUNTRY-CODE is a two-letter ISO code of the necessary country: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

For example, you want to translate the name of Norway. The Norway code is NO, so the label name isCountry.NO.

The payment methods in my store are not translated. How do I translate the names of the payment methods?

The names of the payment methods are the data of your store, similar to product names and category names. They are not included into official translations of Ecwid and do not have to be translated with the code. Instead, you can translate them in your Ecwid control panel as described here: How to change a name of any payment method?

My mail notification templates are in English. How do I get my mail notifications translated to my language?

The mail notification templates in Ecwid are basically the data of your store, just like the product names or category descriptions. Ecwid creates the mail notification templates in the language that you use when you see the Ecwid control panel for the first time after signing up with Ecwid. So, mail notifications may contain English texts even if you are using another default language in your store.

You can easily change the mail notification templates in your store in Ecwid control panel → Settings → Mail.

If you are using the Ecwid control panel in your native language other than English, and that is the language you want your mail notifications to be translated into, you can take the following steps to quickly translate your mail notification templates:

  • Go to Ecwid control panel → Settings → Mail.
  • Edit each notification template - click [Edit Message] next to each notification in list
  • Press 'Revert to system default' button on the bottom left of the editing dialog, then press Save
  • Repeat steps 2-3 for each of your notification templates
  • Press Save in the top right of the page

Attachment

  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7