Invoice HTML Templates

You can design your own HTML text or copy the below HTML Templates to customise your invoice layout.

 

Design your own HTML Layout

To design your own invoice layout please select shipping-> Invoice & Shipping Labels-> Invoice template link (you need to set the invoice template per channel) 

mceclip4.png

You will start with a default template pre set as pictured below. 

mceclip5.png

To customise your template please select View -> Source Code-> You can enter your HTML design here. 

mceclip6.png

mceclip7.png

To add an image into your invoice template please view the user guide below. 

Add an Image to your Invoice Template

Please select 'help' tab to view the available tags you can use in your invoice. 

mceclip8.png

Please select settings to add tax amount to your invoice template and customise your line item headers. 

mceclip9.png

 

 

HTML Templates

To copy one of the available HTML designs please follow the steps outlined below.

Please copy the below HTML text and paste under Shipping-> Invoice & Shipping labels -> Invoice template link (you can set the invoice template per channel) -> View-> Source Code-> Paste the HTML text here.

 

mceclip0.png

 

mceclip1.png

mceclip2.png

 

HTML Template 1

 

mceclip3.png

 

<div><header>
<h1>Enter your invoice header here&nbsp;</h1>
</header></div>
<div></div>
<div><br />
<table width="862" height="360">
<tbody>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${shippingname!}</span></td>
<td>Enter your address Here&nbsp;</td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${address_line1!}</span></td>
<td></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${address_line2!}</span></td>
<td></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${city!}</span><span style="color: #333333; font-family: 'Open Sans', sans-serif; font-weight: bold;"></span></td>
<td></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${postcode!}</span></td>
<td></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${country!}</span></td>
<td></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;"><span style="box-sizing: border-box;">${order_id!}</span></span></td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;">Invoice No:</td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;"><span style="color: #333333; font-family: 'Open Sans', sans-serif; font-weight: bold;">${invoice_no!}</span></td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;">Order Date:</td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;"><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${order_date!}</span></td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;">Order ID:</td>
</tr>
<tr>
<td></td>
<td style="outline: thin solid;"><span style="color: #333333; font-family: 'Open Sans', sans-serif; font-weight: bold;">${order_id!}</span></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${phonenumber!}</span></td>
</tr>
<tr>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${buyer_email!}</span></td>
</tr>
</tbody>
</table>
</div>

 

HTML Template 2

mceclip10.png

 

<div><header><img src="enter your Image URL here" gt="" div="" style="float: right;" />
<h1>Type your invoice header here</h1>
</header></div>
<div>
<table width="1111" height="144">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>company name</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${shippingname!}</span></td>
</tr>
<tr>
<td>company address line 1</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${address_line1!}</span></td>
</tr>
<tr>
<td>company address line 2</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${address_line2!}</span></td>
</tr>
<tr>
<td>company address line 3</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${address_line3!}</span></td>
</tr>
<tr>
<td>company address line 4</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${city!}</span></td>
</tr>
<tr>
<td>company post code</td>
<td><span style="box-sizing: border-box; font-weight: bold; color: #333333; font-family: 'Open Sans', sans-serif;">${postcode!}</span></td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="1234" height="195">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Invoice number:</td>
<td>${invoice_no!}</td>
</tr>
<tr>
<td>Invoice date:</td>
<td>${order_date!}</td>
</tr>
<tr>
<td>customer phone number</td>
<td>${phonenumber!}</td>
</tr>
<tr>
<td>customer email</td>
<td>${buyer_email!}</td>
</tr>
</tbody>
</table>
</div>

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.