Labels and localization of the VAT registration

Sufio gives you the option to rename or localize the buttons and the error messages in the VAT registration form.

The following table shows all the label names, their default values and their use within the VAT registration form:

Label name Default text Description
addVatNumber Add VAT Number Field name
cancel Cancel Button name
email Email Field name
emailInvalid Email is invalid Error message copy
emailRequired Email is required Error message copy
exemptionFailed Exemption failed Error message copy
save Save Button name
validationFailed Validation failed Error message copy
vatNumber VAT number Field name
vatNumberInvalid VAT number is invalid Error message copy
vatNumberNotExempt VAT number is not exempt Error message copy
vatNumberRequired VAT number required Error message copy
vatRegistered VAT registered Success message copy
  1. To change one or more of the labels, modify the texts in the brackets in the following code snippet:
{
    labels: {
      addVatNumber: "Add VAT number",
      cancel: "Cancel",
      email: "Email",
      emailInvalid: "Email is invalid",
      emailRequired: "Email is required",
      exemptionFailed: "Exemption failed",
      save: "Save",
      validationFailed: "Validation failed",
      vatNumber: "VAT number",
      vatNumberInvalid: "VAT number is invalid",
      vatNumberNotExempt: "VAT number is not exempt",
      vatNumberRequired: "VAT number required",
      vatRegistered: "VAT registered"
    }
}
  1. In your Shopify admin, go to the Online Store → Themes page.
  2. Click on the Actions button, then click on Edit code.
  3. Copy the edited snippet and paste it inside the initialization script in the themes.liquid file. Make sure you add a comma just before the snippet. The resulting script will look like this:
<script async src="https://cdn.sufio.com/infoweb/scripts/vat.js" id="sufio-vat-script"></script>
<script>
    document.getElementById("sufio-vat-script").onload = function() {
        SufioVAT.init({
            customerEmail: {{ customer.email | json }},
            customerMetafields: {{ customer.metafields.sufio | json }},
            cartAttributes: {{ cart.attributes | json }}
        },
        {
        labels: {
            addVatNumber: "Add VAT number",
            cancel: "Cancel",
            email: "Email",
            emailInvalid: "Email is invalid",
            emailRequired: "Email is required",
            exemptionFailed: "Exemption failed",
            save: "Save",
            validationFailed: "Validation failed",
            vatNumber: "VAT number",
            vatNumberInvalid: "VAT number is invalid",
            vatNumberNotExempt: "VAT number is not exempt",
            vatNumberRequired: "VAT number required",
            vatRegistered: "VAT registered"
        }});
        SufioVAT.onCustomerRegister();
        SufioVAT.onCustomerAccount();
        SufioVAT.onCart();
    };
</script>
  1. Click on Save to apply the changes.

Localize the VAT registration form

You can also use the translate filter functionality to localize the VAT registration form. This way, when your customer changes the store language, the VAT registration form language changes, too.

  1. Copy the following code snippet and paste it inside the initialization script in the themes.liquid file:
{
    labels: {
      addVatNumber: "{{ 'sufio.vat.add_vat_number' | t }}",
      cancel: "{{ 'sufio.vat.cancel' | t }}",
      email: "{{ 'sufio.vat.email' | t }}",
      emailInvalid: "{{ 'sufio.vat.email_invalid' | t }}",
      emailRequired: "{{ 'sufio.vat.email_required' | t }}",
      exemptionFailed: "{{ 'sufio.vat.exemption_failed' | t }}",
      save: "{{ 'sufio.vat.save' | t }}",
      validationFailed: "{{ 'sufio.vat.validation_failed' | t }}",
      vatNumber: "{{ 'sufio.vat.vat_number' | t }}",
      vatNumberInvalid: "{{ 'sufio.vat.vat_number_invalid' | t }}",
      vatNumberNotExempt: "{{ 'sufio.vat.vat_number_not_exempt' | t }}",
      vatNumberRequired: "{{ 'sufio.vat.vat_number_required' | t }}",
      vatRegistered: "{{ 'sufio.vat.vat_registered' | t }}"
    }
  }
  • The resulting snippet should look like this:
<script async src="https://cdn.sufio.com/infoweb/scripts/vat.js" id="sufio-vat-script">
  <script>
    document-getElementById("sufio-vat-script").onload = function() {
      SufioVAT.init({
        customerEmail: {{ customer.email | json }},
        customerMetafields: {{ customer.metafields.sufio | json }},
        cartAttributes: {{ cart.attributes | json }}
      },
      {
      labels: {
        addVatNumber: "Add VAT number",
        cancel: "Cancel",
        email: "Email"
        emailInvalid: "Email is invalid"
        emailRequired: "Email is required",
        exemptionFailed: "Exemption failed",
        save: "Save"
        validationFailed: "Validation failed"
        vatNumber: "VAT number",
        vatNumberInvalid: "VAT number is invalid"
        vatNumberNotExempt: "VAT number is not exempt",
        vatNumberRequired: "VAT number required",
        vatRegistered: "VAT registered"
      }});
      SufioVAT.onCustomerRegister();
      SufioVAT.onCustomerAccount();
      SufioVAT.onCart();
  };
</script>
  1. Click on Save to apply the changes.
  2. In the Code editor, go to the Locales folder. Open your designated default locale file (typically, en.default.json). At the end of the file, just before the ending bracket, copy and paste the following code snippet. Make sure you add a comma just before the snippet.
"sufio": {
  "vat": {
   "add_vat_number": "Add VAT number",
   "cancel": "Cancel",
   "email": "Email",
   "email_invalid": "Email is invalid",
   "email_required": "Email is required",
   "exemption_failed": "Exemption failed",
   "save": "Save",
   "validation_failed": "Validation failed",
   "vat_number": "VAT number",
   "vat_number_invalid": "VAT number is invalid",
   "vat_number_not_exempt": "VAT number is not exempt",
   "vat_number_required": "VAT number required",
   "vat_registered": "VAT registered"
  }
}
  1. Next, open the file corresponding to the other languages or regions used in your Shopify store, like de.json for German.
  2. Similar to step 3, insert the JSON snippet towards the end of the file, just before the closing bracket. Make sure you add a comma just before the snippet. In this example, the translations are in German; modify the texts in the brackets to your desired language.
"sufio": {
  "vat": {
   "add_vat_number": "USt-IdNr. hinzufügen",
   "cancel": "Abbrechen",
   "email": "E-Mail-Adresse",
   "email_invalid": "E-Mail-Adresse ist ungültig",
   "email_required": "E-Mail-Adresse ist erforderlich",
   "exemption_failed": "Befreiung fehlgeschlagen",
   "save": "Speichern",
   "validation_failed": "Validierung fehlgeschlagen",
   "vat_number": "USt-IdNr.",
   "vat_number_invalid": "USt-IdNr. ist ungültig",
   "vat_number_not_exempt": "USt-IdNr. ist nicht befreit",
   "vat_number_required": "USt-IdNr. ist erforderlich",
   "vat_registered": "umsatzsteuerlich registriert"
  }
}
  1. Click on Save to apply the changes and repeat steps 3–4 for every language you support.

For more information about localization and how to use the translate filter, we recommend you to visit the Shopify documentation on the translate filter and on the Storefront locale files.

Need help?

Do you need help with setting up your Sufio account? Please contact our support team. We'll be happy to assist.

Invoices for Shopify stores in the EU

Let Sufio automatically send invoices and receipts for every order made in your store.

Get Sufio - Invoices for EU stores from the Shopify App Store

Get Started