The latest version now includes support for HTML/CSS templates which means total flexibility in how your invoices can look like.
I’ve created sample invoice template on JsFiddle which you can use as a bootstrap (or for learning purposes) but keep in mind, it’s totally possible to create one from scratch. Templates must be written in HTML/CSS, variables are injected via popular KnockoutJS library. If you are not familiar with KnockoutJS, check my JsFiddle example to see how it is done (pay attention to data-bind attributes)
Once you are happy with your template in JsFiddle, add it to Manager.
Go to Settings tab and click HTML Templates (you might need to enable it by clicking on Customize button)
Click New HTML Template button to create new template.
Enter something into Name field, then copy & paste from JsFiddle HTML code to HTML field and CSS code to CSS field. Then press Create
Edit one of your invoices and select your newly created template in HTML Template field.
Then view the invoice.
The invoice looks similar to default theme but that is just because I’m not creative enough. With HTML/CSS you can really create anything.
Regarding logo or any other images you want to put on your template, upload them to imgur.com and use HTML code to load the image from imgur.com. In future, there will be variable for business logo uploaded to Manager too.
Yes, I’m planning to extend this across all printable content in Manager. First of all, I need to make this templating system more user-friendly for invoices which will be the most common use-case for this feature. Keep in mind, this is also learning exercise for me.
Yes, unfortunately it is quite technical but that is really the only way how to achieve total flexibility. I will create some tutorial that will try to teach how to create new HTML/CSS template from scratch.
For those who don’t want to invest time into learning HTML/CSS, we are also going to introduce simple paid conversion service which will simply allow customers to upload scanned image of how they want their invoice to look like and HTML/CSS markup will be provided in return.
This way non-technical users can take advantage of this feature too. Not to mention, in future, there will be probably many user-created free HTML/CSS templates for Manager published so it won’t be problem to find one you like (similar to how you can download free Wordpress themes).
Sir, great work but i had little problem How can I insert inventory items name and customers phone numbers in the invoice what variable should I use ? And I want that the invoice should always be in A4 format so that total and sub total should be in the last of page. So, guide me to that.
Right now, not all possible variables are visible to invoice template (e.g. customer telephone numbers, inventory item names). I’m currently working on this further and adding more variables. The idea is to expose to invoice all possible variables, including variables collected from custom fields on invoice or customer level.