Translating E-commerce Pages

Focused and clear communication with customers is paramount for any successful business. There will come a time when you might want to update e-Commerce pages with another language. 

Navigate to Templates > All Templates. Find the e-Commerce templates and select the template of choice. Navigate to Actions > Edit. 

To translate elements in the e-Commerce pages, simply use Javascript or jquery. This code could either be placed in the Head tag or Body tag close. 

This is the general format of the code: 

$("label[for='Text field']").text('Translation');

Inside the $(“<element selector goes here>”) you enter which elements you want to select from the document. This could be a CSS class (a list of elements), the id of an element (one single element), a specific element such as all <p> tags, etc.

The .text() function allows you to change the value of the selected element in the first part of the code. This will apply changes to what will be displayed in the browser. Put the translation for the elements selected in the parentheses with quotes.

After you translate all the elements needed click “Update” at the bottom of the page. 

Verify that all the desired fields were translated appropriately by assigning the new template to a page. Locate the page and click the “Actions” button on the right. Use the “View in front” functionality on the page to view the e-Commerce flow.