Default Invoice Template - 3(Document)Header <div style="margin:40px 40px 0 40px; padding-top: 80px"> <table border="0" cellpadding="1" cellspacing="1" style="width: 651px;"> <tbody> <tr> <td colspan="3" style="width: 445px;"> <span style="font-size: 32px;"> <strong>INVOICE</strong> </span><br/> <span style="font-size: 24px;">#{{ invoice.number }}</span> </td> <td rowspan="2" style="width: 193px;"><img alt="" src="{{ templatesettings.logoLocation }}"/></td> </tr> <tr> <td style="width: 80px;">Invoice date:<br/> <strong>{{ invoice.date|date("jS F Y") }}</strong> </td> <td style="width: 80px;">Customer Name:<br/> <strong>{{ invoice.clientContact.name }}</strong> </td> <td style="width: 80px;">Animal Name:<br/> <strong>{{ invoice.animal.name }}</strong> </td> </tr> </tbody> </table> </div> Body <style> type="text/css" th, td { text-align: left; padding: 6px; font-size: 14px } .lines tr:nth-child(even) { background-color: #eee; } .summary tr:nth-child(1) td { padding-top: 20px; } .summary tr:last-child td { padding-bottom: 20px; } </style> <div style="margin: 0 40px;"> <table style="width: 1041px;"> <thead> <tr style="background-color: #00BFA5;"> <td style="text-align: left; float: left; width: 205px; height: 40px; color:#000000; padding-left: 10px"> <span style="font-size:14px;"> <b>Description</b> </span> </td> <td style="text-align: left; float: left; width: 130px;color:#000000;"> <span style="font-size:14px;"> <b>Staff Member</b> </span> </td> <td style="text-align: left; float: left; width: 65px;color:#000000;"> <span style="font-size:14px;"> <b>Qty</b> </span> </td> {% if invoice.hasDiscounts %} <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Price</b> </span> </td> <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Discount</b> </span> </td> <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Discount (%)</b> </span> </td> {% endif %} <td style="text-align: right; float: left; width: 100px; color: rgb(0, 0, 0); padding-right: 10px;"> <span style="font-size:14px;"> <b>Total</b> </span> </td> </tr> </thead> <tbody class="lines"> {% for invoiceline in invoice.lineItems %} {% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %} <tr> <td>{{ invoiceline.product.name }}</td> <td>{{ invoiceline.salesPerson.name }}</td> <td>{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td></td> <td></td> {% endif %} {% endif %} <td style=" text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td> </tr> {% if invoiceline.printContained %} {% for subinvoiceline in invoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.quantity }}</td> {% if invoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if invoiceline.printContainedPrices %} {{ subinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% if subinvoiceline.isHeaderline %} {% if subinvoiceline.printContained %} {% for subsubinvoiceline in subinvoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subsubinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.quantity }}</td> {% if subinvoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subsubinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if subinvoiceline.printContainedPrices %} {{ subsubinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% if subsubinvoiceline.isHeaderline %} {% if subsubinvoiceline.printContained %} {% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subsubsubinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.quantity }}</td> {% if subsubinvoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subsubsubinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if subsubinvoiceline.printContainedPrices %} {{ subsubsubinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% elseif not invoiceline.hasHeaderLine %} <tr> <td>{{ invoiceline.product.name }}</td> <td>{{ invoiceline.salesPerson.name }}</td> <td>{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td></td> <td></td> {% endif %} {% endif %} <td style="text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td> </tr> {% endif %} {% endfor %} </tbody> </table> <table border="0" cellpadding="0" cellspacing="5" style="border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; margin-left: auto; width: 200px;"> <tbody class="summary"> <tr> <td style="width: 105px; padding-top: 20px;">Subtotal:</td> <td style="width: 68px; text-align: right; padding-right: 15px; padding-top: 20px;"> <strong>{{ invoice.subTotal|moneyformat }}</strong> </td> </tr> {% if invoice.includesTax %} <tr> <td style="width: 105px;">Including tax:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> {% endif %} {% if invoice.hasDiscounts %} <tr> <td style="width: 105px;">Discount:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong> </td> </tr> {% endif %} <tr> <td style="width: 105px; padding-bottom: 20px;">Total:</td> <td style="width: 68px; text-align: right; padding-right: 15px; padding-bottom: 20px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="5" style="margin-left: auto; width: 200px;"> <tbody class="summary"> {% if invoice.paymentMethods %} <tr> <td style="width: 105px;">Payment method:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.paymentMethods }}</strong> </td> </tr> {% endif %} <tr> <td style="width: 105px;">Amount paid:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.paid|moneyformat }}</strong> </td> </tr> <tr>{% set balance = invoice.total - invoice.paid %} <td style="width: 105px; padding-bottom: 30px;">Balance:</td> <td style="width: 68px; text-align: right; padding-right: 15px; padding-bottom: 30px;"> <strong>{{ balance|moneyformat }}</strong> </td> </tr> </tbody> </table> </div> Footer <div style="background-color: #00BFA5; color:#fff; padding: 20px 40px 60px 20px;"> <table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 720px;"> <tbody> <tr> <td style="width: 652px;"> <span style="color:#ffffff;"> <span style="font-size:24px;"> <strong>THANK YOU FOR CHOOSING {{ business.name }}</strong> </span> </span> </td> </tr> <tr> <td style="width: 652px;"> <span style="color:#ffffff;"> <span style="font-size:14px;">{{ business.postalAddress.addressText(false, true) }} • {{ business.phoneNumber }} • {{ business.businessEmail }}</span> </span> </td> </tr> </tbody> </table> </div> Parent topic: Source code of standard Twig templatesRelated conceptsDefault Estimate Template - 1(Document)Default Estimate Template - 2(Document)Default Estimate Template - 3(Document)Default Estimate Template - 4(Document)Default Estimate Template - 5(Document)Default Estimate Template - 6(Document)Default Invoice Template - 1(Document)Default Invoice Template - 2(Document)Default Invoice Template - 4(Document)Default Invoice Template - 5(Document)Default Invoice Template - 6(Document)Default Payment Template - 1(Document)Default Payment Template - 2(Document)Default Payment Template - 3(Document)Default Payment Template - 4(Document)Default Payment Template - 5(Document)Default Statement Template - 1(Document)Default Statement Template - 2(Document)Default Statement Template - 3(Document)
