Customize Mini Cart in Shopify – VAT Exemption for B2B Customers

In this article, you’ll learn how to show business customers that they can request VAT exemption in your webshop in a smart way. This works in the mini cart, even without Shopify Plus.

Why is this useful?

Do you sell to business customers within Europe? Then you can offer these customers VAT exemption. To do this, you need to validate their VAT number during the checkout process. This way you can give that customer VAT exemption.

Without Shopify Plus, you have limited options. For example, you can only ask for the VAT number in the checkout. That’s why you need to be creative.

Good places to add VAT validation:

• Top of the page / mini cart
• Cart drawer popup
• /cart page

Example of the cart drawer:

Example of the /cart page:

Using the mini cart

Does your theme work with a mini cart? And do you have the popup notification enabled in the Shopify theme editor?

Then something useful happens: when a customer adds a product to the cart, Shopify briefly shows the mini cart. This is the perfect moment to inform your business customer about VAT exemption.

The customer now has three options:

• Checkout directly
• View the full cart
• Click on the VAT exemption link

This is an effective way to let customers know that you offer VAT exemption.

How do you customize this?

You need to modify the file cart-notification.liquid.

Example code:

{% comment %}
  Renders cart notification

  Accepts:
  - color_scheme: {String} sets the color scheme of the notification (optional)
  - desktop_menu_type: {String} passes the desktop menu type which allows us to use the right css class (optional)

  Usage:
  {% render 'cart-notification' %}
{% endcomment %}

<cart-notification>
  <div class="cart-notification-wrapper{% if desktop_menu_type != 'drawer' %} page-width{% endif %}">
    <div
      id="cart-notification"
      class="cart-notification focus-inset{% if color_scheme %} color-{{ color_scheme }} gradient{% endif %}"
      aria-modal="true"
      aria-label="{{ 'general.cart.item_added' | t }}"
      role="dialog"
      tabindex="-1"
    >
      <div class="cart-notification__header">
        <h2 class="cart-notification__heading caption-large text-body">
          {{- 'icon-checkmark.svg' | inline_asset_content -}}
          {{ 'general.cart.item_added' | t }}
        </h2>

        <button
          type="button"
          class="cart-notification__close modal__close-button link link--text focus-inset"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>
      <div id="cart-notification-product" class="cart-notification-product"></div>
      <div class="cart-notification__links">
        <a
          href="{{ routes.cart_url }}"
          id="cart-notification-button"
          class="button button--secondary button--full-width"
        >
          {{- 'general.cart.view_empty_cart' | t -}}
        </a>
        <form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
          <button class="button button--primary button--full-width" name="checkout">
            {{ 'sections.cart.checkout' | t }}
          </button>
        </form>
        <button type="button" class="link button-label">{{ 'general.continue_shopping' | t }}</button>
        <br>
        {% comment %}
          Here you add the link to the /cart page
        {% endcomment %}
        <a href="{{ routes.cart_url }}">Business EU purchase (0% VAT)</a>
      </div>
    </div>
  </div>
</cart-notification>
{% style %}
  .cart-notification {
    display: none;
  }
{% endstyle %}

Important: The main addition is the link at the bottom:

<a href="{{ routes.cart_url }}">Business EU purchase (0% VAT)</a>

This link directs customers to your cart page where they can enter their VAT number.