Design and placement of the VAT registration form

In this article, we will cover

Expand the form

By default, the form is displayed in a collapsed state, and the customer has to expand the form to fill out their VAT number. This is the preferred behavior for online stores that serve both businesses and private customers, as the second group typically skips the VAT form.

If you want to display the expanded form for each customer, when inserting the code for specific forms, add an { alwaysVisible: true } parameter to the code. For example, to place an expanded form on your store's cart page, copy and paste the following code to the form's initialization snippet:

SufioVAT.onCart({ alwaysVisible: true });

Add a Save button to the form

In rare cases, when you are using multiple apps in your Shopify store, a different app may prevent the Sufio VAT form from automatically validating the customer's VAT number.

If this happens to you, you can add a Save button to your form. This way, the customer first saves their VAT number, sees the result of the validation, and then continues with their flow.

To display the Save button, when inserting the code for specific forms, add a { saveButtonEnabled: true } parameter to the code. An example below shows a code that places the form on your store's cart page with the Save button added.

Please note that if you include the Save button to the VAT form, the form will always be displayed as expanded.


SufioVAT.onCart({ saveButtonEnabled: true });

Customize the form design

You may want to customize the design of the VAT registration form to match the design of your store. The theme.liquid file accepts modifications in the CSS format.

To change the registration form design:

  1. In your Shopify admin, go to the Online Store → Themes page.
  2. Click the Actions button, then click Edit code.
  3. In the theme.liquid file, just above the initialization script, add <style></style> tags.
  4. Inside the tags, type the desired element and its parameters in the CSS format. You may use your browser inspector feature to find out the names of the elements.
  5. Click Save to apply the changes.

The following example changes the Save button color to green.

<style>
  .sufio-vat-form .sufio-vat-save-button {
    background-color: lightgreen;
  }
</style>

The following example changes the VAT number input field border color to light grey.

<style>
  .sufio-vat-form .sufio-vat-number-input {
    border-color: #ddd;
  }
</style>

Customize the form placement

By default, the VAT registration form is placed on the bottom of the page body. If you are not happy with the default placement of the VAT registration form on the Shopify pages, you can further specify the placement of the form.

  1. In your Shopify admin, go to the Online Store → Themes page.
  2. Click the Actions button, then click Edit code.
  3. Choose the one or more of the placement possibilities you want to customize: the Customer registration page, the Customer account page, or the Cart page.
  4. Using the parameters below, open the respective Shopify theme file from the left sidebar and copy and paste the Code snippet inside the code, to the place where you want the VAT registration form to be displayed.
  5. Click Save to apply the changes.
  6. Navigate to Layout → theme.liquid and just above the ending </script> tag of the initialization code snippet, copy and paste the Initialization script snippet from the table above.
  7. Click Save to apply the changes.

Customer registration page

  • Shopify theme file: Sections → main-register.liquid
  • Code snippet: <div id="register-vat-form"></div>
  • Initialization script snippet:
SufioVAT.onCustomerRegister({
    selectors: "#register-vat-form"
  });

Customer account page

  • Shopify theme file: Sections → main-account.liquid
  • Code snippet: <div id="account-vat-form"></div>
  • Initialization script snippet:
SufioVAT.onCustomerAccount({
    selectors: "#account-vat-form"
  });

Cart page

  • Shopify theme file: Sections → main-cart-items.liquid
  • Code snippet: <div id="cart-page-vat-form"></div>
  • Initialization script snippet:
SufioVAT.onCart({
    selectors: "#cart-page-vat-form"
  });

For example, if you decided to edit the placement of all the VAT registration forms, the resulting initialization 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 }}
        });
        SufioVAT.onCustomerRegister({
            selectors: "#register-vat-form"
        });
        SufioVAT.onCustomerAccount({
            selectors: "#account-vat-form"
        });
        SufioVAT.onCart({
            selectors: "#cart-page-vat-form"
        });
    };
</script>

Need help?

Do you need help with customizing your Shopify store theme? Please contact our experienced 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