Design and placement of the VAT registration form

In this article, we will cover

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 on the Actions button, then click on 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 on 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 on the Actions button, then click on 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 on 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 on 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