Creating a custom invoice with ChannelGrabber, requires knowledge of HTML, although making small changes or additions may not be too difficult. First you need to navigate to the Invoice Designer page by going to Settings->Company->Invoice Designer.

You need to load a previously created template by using the drop down dox or create a new template by entering a name for it and pressing the 'New' button. Once you have done either of these options; a text area will be displayed in which you will be able to edit the template.

You can access system wide invoices which can be used by all users, these are a great example of how to use the tags needed in creating an invoice and HTML to make a template but you can not edit these ones. You can use these "System" wide templates as a starting ground for your new invoice by copying the HTML from the designer and paste into a new template that you have created.

You can delete your template by clicking on the delete button next to the template name box, can can not delete system wide designs. You can preview your template by clicking on the preview link near the template ID.

Once you are happy with your template you will need to select it on the Settings->Company->Invoice Settings page to be used as an invoice.

Tags are used to tell the invoice where to enter data in the invoice that are order specific. For example:

{{shipping_recipient_name}}

If you used this, it will be replaced with the recipient's name when an invoice is generated. So by adding tags to your invoices you can customise exactly how the information will be displayed. So if you wrote the below in the invoice template:

Thank you for your order {{shipping_recipient_name}}.

It would actually say the below on the invoice printed out:

Thank you for your order Phil.

Using Special Case Tags

Special case tags include:

{{remove_extra_breaks}} AND {{loop}}

They work in pairs of two; Starting with and ending with the same tag.

How to use {{remove_extra_breaks}}

Remove extra breaks will remove extra line breaks which may cause the appearance of an empty line. For example:

{{shipping_recipient_name}}<br />

{{shipping_address_1}}<br /> 

{{shipping_address_2}}<br />

{{shipping_city}}<br /> 

If the customer hasn't specified a shipping_address_1 then this would be displayed:

Phil Stevens
​
​40 Turkey Lane

Manchester

Instead, by using {{remove_extra_breaks}} like this:

  {{remove_extra_breaks}}
​  {{shipping_recipient_name}}<br />
​  {{shipping_address_1}}<br />
​  {{shipping_address_2}}<br />
​  {{shipping_city}}<br /> 

{{remove_extra_breaks}}

The address will be displayed:

Phil Stevens
​40 Turkey Lane

Manchester

How to use {{loop}}

Looping is a must, and its used to display all the order items in an order. Anything between the {{loop}} tags is replaced multiple times(The amount of order items) and counts are used to display order item data. It will automatically loop for each of the order items. This HTML will be replaced multiple times (the amount of orderitems), [loop-count] is replaced with an incrementing number for each order item and is required.

{{loop}}
​    <tr>
​        <td>
​            {{orderitem_qty[loop-count]}}
​        </td>
​        <td>
​            {{orderitem_sku[loop-count]}}
​        </td>
​        <td>
​            {{orderitem_name[loop-count]}} <br /> {{orderitem_variations[loop-count]}}
​        </td>
​        <td>
​            {{order_currency}} {{orderitem_price[loop-count]}}
​        </td>
​        <td>
​            {{order_currency}} {{orderitem_linetotal[loop-count]}}
​        </td>
​    </tr>
​{{loop}}

This will display something similar to below:

3     SKU284     Sweater     £5.99     £17.97
1      SKU124      Rug            £2.99     £2.99 

Tag List:  Special Case (if using on HTML invoices)
{{loop}}
{{remove_extra_breaks}}

 
For a full list of working tags, please see our separate guide on