Skip to content
Search Articles/

less than a minute read • Updated 8 minutes ago

Set up multilingual custom checkout fields

How to translate custom checkout field labels and descriptions for stores using multiple template set languages.

If your store uses Template Sets to offer multilingual checkout templates, your custom checkout fields need their own translations too — they don’t get localized automatically.

Steps

  1. 1

    Set a variable for each language your store supports, using Twig conditionals based on the store’s language variable.

  2. 2

    Reference those variables in your field’s label and description instead of hardcoding the text.

Here’s the referral field example from Add custom fields to your checkout, extended to support English, German, and French:

{% set referral_label = "Referred by... (required)" %}
{% set referral_description = "Please let us know who referred you." %}
{% if language == "german" %}
  {% set referral_label = "Empfohlen von... (erforderlich)" %}
  {% set referral_description = "Bitte teilen Sie uns mit, wer Sie empfohlen hat." %}
{% elseif language == "french" %}
  {% set referral_label = "Référencé par... (obligatoire)" %}
  {% set referral_description = "Veuillez nous indiquer qui vous a référé." %}
{% endif %}
<div class="fc-form-group ">
  <div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
    <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
      <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
        {{ referral_label }}
      </label>
      <div class="fc-form-group">
        <p>{{ referral_description }}</p>
        <input type="text" id="referral_source" name="referral_source" placeholder="" autocomplete="off" class="fc-form-control" formnovalidate="" aria-required="true" value="{{ referral_source }}" data-fc-required>
      </div>
    </div>
  </div>
</div>

Notes

  • Expand the {% if %} / {% elseif %} block to match every language your template sets actually use — this example assumes English as the default, with German and French as additional options.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.