Overview

While the Customer Fields app itself does not currently have any built in features for form translation, it is certainly possible to use the app on a multi-language site. Here are a couple options that you can use to help translate your form:

Recommended: Use the free Translate & Adapt app to specify a certain form ID in the Customer Fields app embed settings for each language.
Use conditional Liquid code in the store's theme to display the appropriate form based on the storefront language.
Use a translation app for Shopify to dynamically 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.

Use Shopify's Translate & Adapt app

Shopify has its own free-to-use translation app which allows you to provide translated content for the app settings, which you can use to show entirely different forms based on the language selected.

Step 1 - Duplicate and translate form

First, you will need to create forms in Customer Fields for each of the languages that are being used by the store. If you have already created a form in the app, you can simply duplicate it as many times as needed so you have one for each language. Once you have separate forms, you can translate each form's field labels, error messages, and buttons into the correct language.

Step 2 - Install the default language form

This method of translating supports any of our standard form installation methods. The installation guides linked below are specifically for setting up a default form, we'll add the translated forms in the next step.

Default registration page: Use this method to replace Shopify's default registration form with your custom form on the site's /account/register page. Check out our installation guide here.
App blocks for separate pages: App block installation allows you to add a Customer Fields form to almost any page of your site through the theme editor as long as you are using an OS 2.0 theme. Check out our guide for app block installation here.
Edit account form: The app offers a feature to provide an edit account page for customers to update their own account information. You can read more about this feature including how to enable it here.

Step 3 - Add separate form IDs for each translation

Now that the default forms are set up, you can proceed with adding the translated versions through the Translate & Adapt app.

For standard registration page forms as well as edit account forms, you can go into the "App embeds" section of Translate & Adapt. On the App embeds page, make sure you select the correct language from the top bar and the Helium Customer Fields app from the left sidebar. You can then add unique form IDs to use for each language.

In the example below, our default language form ID is a0tj0l for English and we then added a separate form ID, v3tk3X, for the Spanish language form we created in step 1.

If you are using our app block installation, the process is similar except that you will go into the "Templates" section of Translate & Adapt, and then select the specific page template where you installed the app block.

Using conditional Liquid code to display the correct form

This method is best suited for those who are 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 - Create translated forms

First, you will need to create forms in Customer Fields for each of the languages that are being used by the store. If you have already created a form in the app, you can simply duplicate it as many times as needed so you have one for each language. Once you have separate forms, you can adjust each form's field labels, error messages, and buttons for each language.

Step 2 - Prepare for manual install

Each language-specific form must be manually installed on the store's theme using a shortcode. Be sure to check out our help article on manually installing a form via shortcode if you are unsure how to do so.

The custom Liquid code found in Step 3 below is designed to show the appropriate form based on the user's language selection.

Step 3 - Add Liquid to theme code

Next, you'll need to add some extra Liquid code to the theme to detect the user's locale and display the proper form. This is done by editing the template or section that contains the theme's native registration form.

Most themes have the registration form in templates/customers/register.liquid or sections/main-register.liquid, although this can vary based on how the theme was developed. Once you have found the existing registration form, you will want to comment out or delete the form (contains between the {%- form -%} and {%- endform -%} tags, and replace it with your custom Liquid code.

Here is an example of the Liquid you can use to show language-specific forms based on the language selected by the user:

{% if request.locale.name == 'English' %}
  [shortcode for English form]
{% else %}
  [shortcode 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 control flow tags ({% if %} and {% else %}) 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 text dynamically: Find and translate Dynamic Content

🎉 Pro Tips:

Each of the form's field labels needs 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! 😊