# Help needed with customization of Sales invoice

**URL:** <https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678>\
**Category:** Uncategorized\
**Created:** [October 14, 2014, 7:00pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678 "2014-10-14T19:00:30Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [October 14, 2014, 7:00pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/1 "2014-10-14T19:00:30Z")

</div>

I needed a customized Sales invoice in order to be aligned with local legislation. And due to that, I have made some adjustments in the alternative templates. Still, I miss columns “Quantity” and “Unit Price” and I do not know how to create it. Just for you to know, I am not familiar with HTML codes. What I have created is a result of pure curiosity and trying over, and over again.

Please find below my HTML code for the invoice which needs to be improved for 2 more additional columns, which I stated below and I would appreciate your help.

```
<table style="width: 100%; font-size: 13px">
    <tr>
        <td style="width: 100%">
            <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
        max-width: 300px;" />
        </td>
        <td style="text-align: right; white-space: nowrap">
            <div><b>Br. računa / Invoice No:</b>

            </div>
            <div># <span data-bind="text: Number"></span>

            </div>
        </td>
        <td style="text-align: right; white-space: nowrap; padding-left: 50px">
            <div><b>Datum izdavanja računa i pružanja usluge / Date Issued:</b>

            </div>
            <div data-bind="text: IssueDate"></div>
        </td>
    </tr>
</table>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
    <tr>
        <td colspan="2" style="padding: 40px; font-size: 24px; font-weight: bold">Račun / <span style="color: #C70052">Invoice</span>

        </td>
        <td></td>
    </tr>
    <tr>
        <td style="background-color: #eee; padding: 20px; vertical-align: top">
            <div style="color: #666; font-weight: bold">Račun izdaje / Issued by:</div>
            <div data-bind="text: Seller" style="font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails">
                <div data-bind="text: $data"></div>
            </div>
        </td>
        <td style="background-color: #eee; padding: 20px; vertical-align: top">
            <div style="color: #666; font-weight: bold">Račun za / Issued to:</div>
            <div data-bind="text: Customer" style="font-weight: bold"></div>
            <div data-bind="foreach: CustomerAddressLines">
                <div data-bind="text: $data"></div>
            </div>
        </td>
        <td style="background-color: #eee; padding: 0px 20px; vertical-align: top">
            <div style="margin-top: -40px">
                <div style="padding: 10px 20px; background-color: #950029; color: #fff; font-weight: bold; font-size: 14px; line-height: 20px">Za plaćanje / Total:</div>
                <div style="padding: 20px; background-color: #C30036; color: #fff">
                    <div style="font-size: 20px; font-weight: bold"><span data-bind="text: Total"></span>

                    </div>
                    <div style="font-size: 10px; font-weight: bold; padding-top: 10px">Datum valute / Due:<span style="font-size: 14px; margin-left: 5px" data-bind="text: DueDate"></span>

                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 16px"><span style="color: #999">Pregled / Summary:</span> <span data-bind="text: Summary" style="color: #C70052"></span>

</div>
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: separate; border-spacing: 0">
    <thead>
        <tr>
            <th style="padding: 10px; color: #C70052; border-bottom: 1px solid #ccc">Opis usluge / Description</th>
            <th style="text-align: center; width: 100px; padding: 10px; color: #C70052; text-align: right; border-bottom: 1px solid #ccc">Cena/Amount</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: LineItems">
        <tr>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="foreach: Description">
                    <div data-bind="text: $data"></div>
                </div>
            </td>
            <td data-bind="text: LineTotal" style="text-align: right; border: 1px solid #ccc; border-top: none; padding: 10px; vertical-align: top; background-color: #f9f9f9"></td>
        </tr>
    </tbody>
    <tbody>
        <tr data-bind="visible: Total != Subtotal">
            <td style="text-align: right; padding: 5px 10px">Ukupno/Subtotal</td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Subtotal"></td>
        </tr>
    </tbody>
    <tbody data-bind="visible: TaxComponents.length > 0, foreach: TaxComponents">
        <tr>
            <td style="text-align: right; padding: 5px 10px"><span data-bind="visible: $parent.LineItemsIncludeTax">Includes </span><span data-bind="text: Name"></span>

            </td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Amount"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td style="text-align: right; padding: 5px 10px; font-weight: bold">Za plaćanje / Total:</td>
            <td style="text-align: right; font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Total"></td>
        </tr>
    </tbody>
</table>
<div style="padding: 0px 10px; font-size: 12px; line-height: 175%" data-bind="foreach: Notes">
    <div data-bind="text: $data"></div>
</div>

```

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [October 15, 2014, 7:13am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/2 "2014-10-15T07:13:54Z")

</div>

I will need to create one “complete” template that has all the columns and fields. Then you can remove what you don’t need rather than trying to figure out how to add something.

I’m currently working on guides, so this will happen pretty soon.

---

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [October 15, 2014, 7:29am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/3 "2014-10-15T07:29:10Z")

</div>

Yes, you are right, that would be easier. I find default Sales Invoice template the most suitable for what I need, still I cannot edit it in order to make it bilingual.

Would it be possible to get HTML code for default Sales Invoice template?

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [October 15, 2014, 8:30am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/4 "2014-10-15T08:30:14Z")

</div>

If your motivation is to have invoice in your language, why not change the language in Manager? See [Guides | Manager](http://www.manager.io/guides/getting-started/changing-language/)

---

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [October 15, 2014, 8:55am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/5 "2014-10-15T08:55:21Z")

</div>

My motivation is to have an invoice which is bilingual with all columns that I need. I don’t find this discussion as problem solving oriented one, as you are not leading me to a solution, but recommending alternatives which are not sufficient (there is only 15% translation for Serbian language finished and Serbian Cyrillic which my customers from abroad would not understand).

Thanks anyway

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [October 15, 2014, 11:31am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/6 "2014-10-15T11:31:26Z")

</div>

Well, I’m just trying to propose the simplest way to address this. It doesn’t matter that only 15% is translated. You can only translate terms that appear on invoice and then your invoice will be completely in Serbian. Much faster and easier than messing around with HTML.

I will provide new HTML template in upcoming weeks that will take advantage of all available variables. It’s up to you whether you want to translate some terms into Serbian and have it all working tomorrow or wait a few weeks for new HTML template.

---

<div class="post-metadata">

**Author:** ![tiligadis](https://avatars.discourse-cdn.com/v4/letter/t/f4b2a3/32.png) [@tiligadis](https://forum.manager.io/u/tiligadis)\
**Post date:** [October 15, 2014, 8:25pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/7 "2014-10-15T20:25:18Z")

</div>

I used Lubos online template to customize it and i like the results.  
here it is (if someone want to use it or change it)

> **[Custom sales invoice - JSFiddle - Code Playground](http://jsfiddle.net/tasost/9hcpmrhm/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

(the logo image is converted inline HTML markup using this method [Feature request: more than one logo - #2 by gabe](http://forum.manager.io/t/feature-request-more-than-one-logo/553/2))

---

<div class="post-metadata">

**Author:** ![tiligadis](https://avatars.discourse-cdn.com/v4/letter/t/f4b2a3/32.png) [@tiligadis](https://forum.manager.io/u/tiligadis)\
**Post date:** [October 15, 2014, 8:33pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/8 "2014-10-15T20:33:39Z")

</div>

im not good at html but i hope this to help you Dragan

> **[Custom sales invoice - JSFiddle - Code Playground](http://jsfiddle.net/ZsuU4/391/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [October 16, 2014, 10:31am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/9 "2014-10-16T10:31:54Z")

</div>

Hello Tiligadis,

I appreciate your help. With a little curiosity and persistence, still lacking html knowledge and skill, I managed to create and invoice the way I needed. I have created English and bilingual Serbian/English version and they both work great!

Here is the code, if someone wants to use it…

```
<table style="width: 100%; font-size: 12px">
    <tr>
        <td width="77%" style="width: 100%">
            <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
    max-width: 300px;" />
        </td>
        <td width="23%" style="text-align: right; white-space: nowrap">
            <div data-bind="text: Seller" style="font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails">
                <div data-bind="text: $data"></div>
            </div>
        </td>
    </tr>
</table>
<div style="height:100px"></div>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
    <tr>
        <td colspan="2" bgcolor="#C4161C" style="padding: 15px; font-size: 20px; font-weight: bold; border: 1px solid #ccc; text-align:center;"><span style="color: #ffffff">Invoice</span>

        </td>
    </tr>
    <tr>
        <td width="67%" style="background-color: #eee; padding: 20px; vertical-align: top; border: 1px solid #ccc;">
            <div style="color: #666; font-weight: bold;"><u>Issued to:</u>
            </div>
            <div data-bind="text: Customer" style="font-weight: bold"></div>
            <div data-bind="foreach: CustomerAddressLines">
                <div data-bind="text: $data"></div>
            </div>
        </td>
        <td width="33%" style="background-color: #eee; padding: 0px 20px; vertical-align:middle">
            <div><b>Date Issued:</b> 
            </div>
            <div data-bind="text: IssueDate"></div>
            <br>
            <div><b>Invoice No:</b>
            </div>
            <div># <span data-bind="text: Number"></span>

            </div>
            <br>
            <div><b>Due:</b>
            </div>
            <div> <span data-bind="text: DueDate"></span>

            </div>
        </td>
    </tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 18px; text-align:center"><span style="color: #999"> Summary </span>
</div>
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: separate; border-spacing: 0">
    <thead>
        <tr>
            <th width="45%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Service</th>
            <th width="12%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Quantity</th>
            <th width="12%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Unit price</th>
            <th width="11%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Tax</th>
            <th width="20%" style="text-align: center; width: 100px; padding: 10px; color: #C70052; text-align: right; border-bottom: 1px solid #ccc">Total</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: LineItems">
        <tr>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="foreach: Description">
                    <div data-bind="text: $data"></div>
                </div>
            </td>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="text: Qty"></div>
            </td>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="text: UnitPrice"></div>
            </td>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="text: Tax"></div>
            </td>
            <td data-bind="text: LineTotal" style="text-align: right; border: 1px solid #ccc; border-top: none; padding: 10px; vertical-align: top; background-color: #f9f9f9"></td>
        </tr>
    </tbody>
    <tbody>
        <tr data-bind="visible: Total != Subtotal">
            <td colspan="4" style="text-align: right; padding: 5px 10px">Subtotal</td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Subtotal"></td>
        </tr>
    </tbody>
    <tbody data-bind="visible: TaxComponents.length > 0, foreach: TaxComponents">
        <tr>
            <td colspan="4" style="text-align: right; padding: 5px 10px"><span data-bind="visible: $parent.LineItemsIncludeTax">Φ.Π.Α. </span><span data-bind="text: Name"></span>

            </td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Amount"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="4" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
            <td style="text-align: right; font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Total">€</td>
        </tr>
    </tbody>
</table>
<div></div>
<div style="padding: 0px 10px; font-size: 12px; line-height: 175%" data-bind="foreach: Notes">
    <div data-bind="text: $data" style="font-weight:bold"></div>
</div>

```

---

<div class="post-metadata">

**Author:** ![Parrot](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/parrot/32/58_2.png) [@Parrot](https://forum.manager.io/u/Parrot)\
**Post date:** [October 17, 2014, 5:25am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/10 "2014-10-17T05:25:56Z")

</div>

There was a time where themes were offered for a fee but have since disappeared ( I can’t remember seeing an explanation as to why it was discontinued. I imagine either too time consuming or not that profitable.)

I know many people have a hard time with HTML and was wondering if Lubos would consider creating a library of templates (users contributing their samples) that could be accessed on this site for those people that struggle with coding.

Would users here think that might be a good idea? Feedback Lubos?

Thanks

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [October 19, 2014, 1:23pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/11 "2014-10-19T13:23:04Z")

</div>

Making custom HTML themes doesn’t scale. I will rather put on website list of companies and individuals who are offering these services.

Free samples are available at [Guides | Manager](http://www.manager.io/guides/miscellaneous/customising-invoices/)

Those free samples are not very polished so that’s something I need to improve.

---

<div class="post-metadata">

**Author:** ![pep](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@pep](https://forum.manager.io/u/pep)\
**Post date:** [October 30, 2014, 8:13pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/12 "2014-10-30T20:13:42Z")

</div>

Cool! Thank you!

---

<div class="post-metadata">

**Author:** ![Sameer](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@Sameer](https://forum.manager.io/u/Sameer)\
**Post date:** [February 5, 2015, 8:02am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/13 "2015-02-05T08:02:44Z")

</div>

Tax rate column should be compulsory on each invoice whether there is single tax rate or different tax rates for each items. When tax rate is same, tax rate column not showing on invoice. I need it to be always shown.

---

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [February 5, 2015, 8:47am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/14 "2015-02-05T08:47:52Z")

</div>

I hope I can help you. I did implement customized invoice template and tax column is always shown. I do have a template in English and I hope it will work for you?!

Please, let me know your email so I could send you files for customization.

---

<div class="post-metadata">

**Author:** ![Sameer](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@Sameer](https://forum.manager.io/u/Sameer)\
**Post date:** [February 5, 2015, 10:02am UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/15 "2015-02-05T10:02:38Z")

</div>

Thanks for reply.

English is OK.

My mail is [samsarang2011@gmail.com](mailto:samsarang2011@gmail.com)

---

<div class="post-metadata">

**Author:** ![raj\_nann](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/raj_nann/32/18580_2.png) [@raj\_nann](https://forum.manager.io/u/raj_nann)\
**Post date:** [July 5, 2016, 1:43pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/17 "2016-07-05T13:43:49Z")

</div>

HI,

I need little help in editing HTML in the default sales invoice theme.

I tried my best to understand HTML but all i ended up learning is changing name like “To”

i want to place custom field beside customer name.

like this

 ![](https://us1.discourse-cdn.com/flex019/uploads/manager1/original/2X/8/8f4d6cfc3f0e10044d6d8d8c22b1df52b5f48116.PNG)

Thank you

---

<div class="post-metadata">

**Author:** ![raj\_nann](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/raj_nann/32/18580_2.png) [@raj\_nann](https://forum.manager.io/u/raj_nann)\
**Post date:** [July 5, 2016, 9:19pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/18 "2016-07-05T21:19:24Z")

</div>

somehow i managed to change the custom field position with this code

```
    <tr>
        <td colspan="2" style="padding: 20px 0px">
            <table style="width: 100%">
                <tr>
                    <td style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
                        Buyer
                    </td>
                    <td style="vertical-align: top">
                        <div>{{ customer.name }}</div>
                        
                        <div>{{ billing_address | newline_to_br }}</div>
                        <div>{{ customer.identifier }}</div>
                    </td>
                    
                    <td style="vertical-align: top; width: 300px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
                    

                    <div style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
                        Consignee: </div>
                        
                      <div> {{ custom_fields["Consignee Address"] | newline_to_br }}</div>
                       
                       
                        
                    </td>
                    
                    
                    <td style="vertical-align: top; width: 100px; padding-right: 20px; vertical-align: top; text-align: right">
                        <div style="font-weight: bold">Issue date</div>
                        <div>{{ issue_date | date_to_string }}</div>
                        {% if due_date != null %}
                        <div style="font-weight: bold; margin-top: 10px">Due date</div>
                        <div>{{ due_date | date_to_string }}</div>
                        {% endif %}
                        <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Invoice number</div>
                        <div>{{ reference }}</div>
                        {% if sales_quote != empty %}
                        <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Sales quote</div>
                        <div>{{ sales_quote }}</div>
                        {% endif %}
                        {% if purchase_order != empty %}
                        <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Purchase order</div>
                        <div>{{ purchase_order }}</div>
                        {% endif %}
                    </td>
                    <td style="vertical-align: top; width: 100px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
                        <div style="font-weight: bold; white-space: nowrap">{{ business.name }}</div>
                        <div style="white-space: nowrap">{{ business.contact_information | newline_to_br }}</div>
                        <div style="white-space: nowrap">{{ business.identifier }}</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="2">
            <div style="font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</div>
            <table style="width: 100%">
                <tr>
                    <th style="border: 1px solid #000; padding: 5px 10px">Item</th>
                    <th style="border: 1px solid #000; padding: 5px 10px">Description</th>
                    <th style="width: 40px; border: 1px solid #000; padding: 5px 10px; text-align: center">Qty</th>
                    <th style="width: 80px; border: 1px solid #000; padding: 5px 10px; text-align: center">Unit price</th>
                    <th style="width: 60px; border: 1px solid #000; padding: 5px 10px; text-align: center">Discount</th>
                    <th style="width: 100px; border: 1px solid #000; padding: 5px 10px; text-align: center">Amount</th>
                </tr>
                {% for line in lines %}
                <tr>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; vertical-align: top">{{ line.item.name }}</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none">{{ line.description | newline_to_br }}</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.qty }}</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: right; vertical-align: top">{{ line.unit_price | money_without_currency }}</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.discount }}</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; text-align: right; border-bottom: none; border-top: none; vertical-align: top; white-space: nowrap">{{ line.total | money_without_currency }}</td>
                </tr>
                {% endfor %}
                <tr>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                </tr>

              {% if amounts_include_tax %}
                {% if rounding != 0 %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
                </tr>
                {% for tax_component in tax_components %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
                </tr>
              {% endfor %}
              {% else %}
                {% assign tax_components_count = tax_components | size %}
                {% if tax_components_count > 0 %}
                <tr>
                  <td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Subtotal</td>
                  <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ subtotal | money }}</td>
                </tr>
                {% endif %}
                {% for tax_component in tax_components %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
                </tr>
                {% endfor %}
                {% if rounding != 0 %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
                    <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
                </tr>
                {% endif %}
            </table>
            <div>{{ notes }}</div> 
        </td>
    </tr>
</tbody>

```

| INVOICE | {% if business.logo != empty %} ![](){% endif %} |

---

<div class="post-metadata">

**Author:** ![Ealfardan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/ealfardan/32/63166_2.png) [@Ealfardan](https://forum.manager.io/u/Ealfardan)\
**Post date:** [January 18, 2023, 3:32pm UTC](https://forum.manager.io/t/help-needed-with-customization-of-sales-invoice/1678/19 "2023-01-18T15:32:37Z")

</div>