We have now introduced the ability to show the Customer delivery address on Invoices via our PDF Themes generator. However, because this requires the editing of the HMTL & CSS code this is unable to be achieved through the KashFlow default PDF Themes of Classic and Clean, and will require that you have your own existing or newly created PDF Theme.
Creating a New Theme
To create a new theme, navigate to
Settings > PDF Themes > Add New > Specify the required details in the fields provided > Create theme
You can then proceed to modify the HTML using the instructions below. Please note that when creating a PDF Theme using the template of an existing PDF Theme, only the HTML & CSS code will be copied– nothing of The Basics, Images, Borders & Margins, Misc Options, or Field Names tabs will be copied across.
Modifying the HTML
Once you have created the new PDF Theme, you can use the HTML variables below to create a theme that includes the Customer Delivery Address. Access your theme by navigating to
Settings > PDF Themes > Click on a PDF Theme you have created yourself > HTML & CSS
In the sheet of the DOCUMENT.HTML tab, use the substitutions below to insert the Customer Delivery Address where appropriate. You can choose to include both the Customer Delivery and Billing Address on a PDF Theme, or include only one.
PDF Theme with Delivery Address Only
If you wish to create a theme with the Customer Delivery Address only you simply need to replace the [RECIPIENT_ADDRESS] variable with [DELIVERY_ADDRESS_MULTILINE].
So rather than your HTML code looking like
<div class="recipient-address [RECIP_ADDR_BORDER]">[RECIPIENT_ADDRESS]</div>
it would look like
<div class="recipient-address [RECIP_ADDR_BORDER]">[DELIVERY_ADDRESS_MULTILINE]</div>
PDF Theme with Billing and Delivery Addresses
If you require a theme with both the billing and delivery addresses simply split the variables with a <br> tag, and include both [RECIPIENT_ADDRESS] AND [DELIVERY_ADDRESS_MULTILINE]. For example, to show the delivery address above the billing you address as
<div class="recipient-address [RECIP_ADDR_BORDER]">[RECIPIENT_ADDRESS]<br>[DELIVERY_ADDRESS_MULTILINE]</div>
or, for the Delivery Address above the Billing Address
<div class="recipient-address [RECIP_ADDR_BORDER]">[DELIVERY_ADDRESS_MULTILINE]<br>[RECIPIENT_ADDRESS]</div>
or, for the Billing Address alongside the Delivery Address
<div class="recipient-address [RECIP_ADDR_BORDER]">
<div style="display: inline-block; vertical-align: top; white-space: normal; margin-right: 16px; max-width: 210px;">
[RECIPIENT_ADDRESS]
</div>
<div style="display: inline-block; vertical-align: top; white-space: normal; max-width: 210px;">
[DELIVERY_ADDRESS_MULTILINE]
</div>
</div>
Adding Titles of Address Type
If you wish to add a title to distinguish between your Customer’s Billing and Delivery Addresses then you will want to add the following to the DOCUMENT.HTML template where you require the title:
<span class="show q i ps rl po" style="font-weight: bold;">Billing Address<br /></span>
<span class="show q i ps rl po" style="font-weight: bold;">Delivery Address<br /></span>
An example of this would be:
<div class="recipient-address [RECIP_ADDR_BORDER]">
<div style="display: inline-block; vertical-align: top; white-space: normal; margin-right: 16px; max-width: 210px;">
<span class="show q i ps rl po" style="font-weight: bold;">Billing Address<br /></span>
[RECIPIENT_ADDRESS]
</div>
<div style="display: inline-block; vertical-align: top; white-space: normal; max-width: 210px;">
<span class="show q i ps rl po" style="font-weight: bold;">Delivery Address<br /></span>
[DELIVERY_ADDRESS_MULTILINE]
</div>
</div>
As you would not want these titles to appear other than on Invoices, Quotes, Packing Slips (Delivery Notes) and Reminder Letters, on the DOCUMENT.CSS stylesheet, at the bottom add:
.show { display : none; }
.quote .show.q, .invoice .show.i,
.packingSlip .show.ps, .reminderLetter .show.rl,
.purchaseOrder .show.po {
display: initial;
}
Delivery Address Variables
The following variables are accepted for handling a Customer’s Delivery Address:
- [DELIVERY_ADDRESS_NAME] This adds the “Name” of the Customer
- [DELIVERY_ADDRESS_LINE1] This adds the first line of the Delivery Address
- [DELIVERY_ADDRESS_LINE2] This adds the second line of the Delivery Address
- [DELIVERY_ADDRESS_LINE3] This adds the third line of the Delivery Address
- [DELIVERY_ADDRESS_LINE4] This adds the fourth line of the Delivery Address
- [DELIVERY_ADDRESS_POSTCODE] This adds the PostCode as specified for the Delivery Address
- [DELIVERY_ADDRESS_SINGLELINE] This adds all the above, already formatted to appear on a single line
- [DELIVERY_ADDRESS_MULTILINE] This adds variables 1 – 6, already formatted to appear on their own respective lines
Using this theme
You can choose to use this theme as your default (i.e. if you always want to include the billing and delivery address/delivery address only on every invoice) by going to
Settings > PDF Themes > Hover your mouse cursor over this PDF Theme > Click now shown green-tick to set this PDF Theme as the default
Or, if you only wanted to do this for one customer you can make it their individual theme by going to
Customers > Click on the appropriate Customer > Options > Under “PDF Theme” select the appropriate from the drop-down list > Update