Our developers are hoping to build multi-language functionality into a future version in the app, but in the meantime there are a couple resources that you can take into consideration for translating your form:

  • Create multiple forms in Customer Fields (one per language) and add some Liquid code to the store's theme to display the appropriate form based on the user's chosen language.

  • Use a translation app for Shopify to translate the form content. In this article we discuss the use of LangShop, but you're welcome to use other apps as well -- as long as they can translate the app's embedded forms.

Using Liquid to display multiple forms

This method is well suited for those comfortable with Liquid and Shopify's code editor for themes. The idea is to use some Liquid code to automatically display the correct form based on the language selected by the user (also known as their "locale"). This method is great if you're already using an app or a theme that offers a language switcher. Just keep in mind that the number of forms you could create for this purpose would depend on your current Customer Fields plan.

Step 1

First, you will need to create forms in Customer Fields for each of the languages that are being used by the store. For the sake of this article, let's say you want to show one form in English and one in French. Remember that you can adjust each form's error messages and buttons to use your desired content using the 'Settings' tab in the form builder.

Step 2

Each of the language-specific forms will need to be manually installed on the store's theme. The custom Liquid code from Step 3 below will show the appropriate form based on the user's language selection. For now you'll just need to have both forms manually installed, this way you can use the forms' embed code for the next step. Be sure to check out our help article on how to manually install your forms if you are unsure on how to do so.

Step 3

Next, you can add some extra Liquid code to the theme to detect the user's locale and render the proper form. Most themes have the registration form in templates/customers/register.liquid, although it may be different than this file based on the store's theme. Here is an example of the Liquid you will want to add to show language-specific forms based on the language selected by the user:

{% if request.locale.name == 'English' %}
< embed code for English form >
{% else %}
< embed code for default language form >
{% endif %}

Note: The code above assumes that the store's default language is not English, so be advised that you may need to adjust the {% if ... %} and {% else %} control flow tags as needed.

Using LangShop with Customer Fields

Please note that for any questions regarding the LangShop app, you should refer to their help center.

After you install LangShop and apply it to the desired theme, you will want to follow LangShop's instructions on translating "dynamic text" (referring to the custom content shown by apps on your store). Here's a link to an article on Langshop's help center with details on how to find and translate dynamic text: Find and translate Dynamic Content

🎉 Pro Tips:

  • Each of the form's field labels need to be manually added in LangShop in order to be translated.

  • When adding a new field to translate, you will need to add the opening and closing HTML tag (i.e. <label> and </label>) to the "Previous char" and "Next char" fields. Then, add the name of the field as it's seen on your storefront into the "Original text" field. See the example below:

  • Don't forget to translate the form's buttons and checkbox labels, too!

  • After you've translated your form, be sure to log into Customer Fields and install your form on the translated theme (the title of the theme may be something like "LangShop | Debut").

Questions or concerns?

Reach out to our support team via chat or email and we'll be happy to assist and advise as needed! 😊

Did this answer your question?