Skip to main content

How to translate the UI texts

If you need to manage different languages, you can do it with Zakeke translations. Firstly you need to know that everything in the Zakeke UI can be translated, let's see how to translate labels of the different tools, then names of options, attributes,... all what strictly concerns the product.

Let's suppose you need to translate words like "quantity", "pdf preview", ... you can use the backoffice tool translations, guide on how to use it here.

In these cases the previous words will be available in the pre-set texts section and you'll find these in the translations property available from the useZakeke hook.

This property contains statics (in which you'll find the pre-set texts like the previous quantity, add to cart, ...) then dynamics (the texts that you added that are not already in the pre-set texts).

This goes for texts that are not strictly related to the product structure defined in its Composer section, now let's see if you want to translate, for example, an option name like "red".

You have 2 choices:

  • translate an option's name adding the translation as the custom added texts for that "original" text (so, if I want to translate "red" in its correct italian translation "rosso" I can add "red" in the custom added texts with its relative translation) and find this in the dynamic translation;

  • translate the option in the backoffice, for explaining this let's suppose you added different options in the backoffice with english language and now you need to translate the same in italian, you'll need to:

    1. change the backoffice language (swith to the customizer backoffice with the menu tool in the upper-left part of the page as you can see in the following screen, then click on the earth icon and choose the language in which add the new translations); img alt
    2. open the product you need to translate the options's names, go in its Composer step and rename all the options, then save the product;
    3. this process can be applied on options just as on groups, attributes, steps and pre-set configurations;
    4. once done that these names will be retrievable in window.gt of the culture you'll let open the configurator iframe (passing this as url parameter);