Last updated 23/01/2021
To enable complete flexibility for customizing documents, we have given you the option to use an inline WYSIWYG editor, or the bare bones of the web - HTML and CSS. Both options provide limitless scope as to the appearance of your documents.
You could start by tweaking one of Cin7's documents, use the boilerplate provided below as a skeleton to build on, or completely start from scratch, it's up to you.
The easiest way to customize a document without diving into the code is to use the WYSIWYG (what you see is what you get) editor. This means that you are able to use a familiar interface to change the document you see on screen.
This is particularly useful for making small cosmetic changes to the current document templates - like making text bold or increasing the font size.
To do this:
Once you are satisfied with your changes, select Save.
To add or switch the document template after you have finished updating them, go to the settings of the module you want to update. For more details, see the Sales Order Settings Help article for additional information.
You'll notice that there are a number of fields enclosed in % symbols. These fields are variables that will populate with real data when you print/email the documents.
The list of possible variables are explained below.
To insert new variables, you can simply start typing % and a drop-down will appear with a list of variables.
There are a number of variables available for you to use in the system, and these are documented at the bottom of this article. Line items require some special formatting and these are explained below.
To get complete control over your documents, you can use HTML and CSS. Although this requires some knowledge, it is easy to learn the basics of HTML and CSS through sites like Codecademy.com. There are also a number of tools like Adobe's Brackets that make it easy to edit code.
The rest of this article assumes some knowledge of HTML and CSS. We will use a boilerplate example below, and it is a great place to start making your own invoice documents.
To make a custom document, you must first convert a current document template to "Custom". To do this:
The below HTML provides a basic idea of the structure of a document.
There are some parts of your document where you are not just representing single variables but instead looping through numerous rows of data.
The most obvious example of this is line items. Each line item should form a row in a table. By enclosing your table rows in some magic fields, Cin7 will loop through each line item and fill your table with data for you.
Enclose your table rows in comments like the below:
<!--Loop Starts: Items-->
- Table rows here -
<!--Loop Ends: Items-->
For back orders, use the line items rows as above. Cin7 will represent back ordered items provided the rows have been enclosed in comments like the below.
<!--Loop Starts: BackOrders-->
- Table rows here -
<!--Loop Ends: BackOrders-->
Payments should be enclosed in comments like the below, and use the payments variables detailed at the bottom of this page.
<!--Loop Starts: Payments-->
- Table rows here -
<!--Loop Ends: Payments-->
Finally, to make your documents look professional, you should apply CSS to the document.
Copy and paste the below styles into the Custom CSS Style box to see the effect of stylesheets on the example document page.
As you can see, with very few styles the document comes alive!
The following is a list of variables available to use in your documents.
Tag | Typeahead | Category |
---|---|---|
%%ATT:BillingAddressDetails%% | BillingAddress | Order Info |
%%ATT:BillingCompany%% | BillingCompany | Order Info |
%%ATT:BillingRecipient%% | BillingRecipient | Order Info |
%%ATT:CreatedBy%% | CreatedBy | Order Info |
%%ATT:CurrencyName%% | CurrencyName | Order Info |
%%ATT:CustomerRef%% | CustomerRef | Order Info |
%%ATT:AcceptanceDate%% | DateAccepted | Order Info |
%%ATT:CloseDate%% | DateClosed | Order Info |
%%ATT:CompletedDate%% | DateCompleted | Order Info |
%%ATT:DueDate%% | DateDue | Order Info |
%%ATT:ExpiryDate%% | DateExpiry | Order Info |
%%ATT:InvoiceDate%% | DateInvoiced | Order Info |
%%ATT:Date%% | DateToday | Order Info |
%%ATT:DeliveryAddressDetails%% | DeliveryAddress | Order Info |
%%ATT:DeliveryCompany%% | DeliveryCompany | Order Info |
%%ATT:DeliveryInstructions%% | DeliveryInstructions | Order Info |
%%ATT:DeliveryRecipient%% | DeliveryRecipient | Order Info |
%%ATT:Discount%% | Discount | Order Info |
%%ATT:DiscountDescription%% | DiscountDescription | Order Info |
%%ATT:DocumentHeading%% | DocumentHeading | Order Info |
%%ATT:Email%% | Order Info | |
%%ATT:Fax%% | Fax | Order Info |
%%ATT:DeliveryCost%% | FreightCharge | Order Info |
%%ATT:FreightDescription%% | FreightDescription | Order Info |
%%ATT:GrandTotal%% | GrandTotal | Order Info |
%%ATT:InvoiceNo%% | InvoiceNo | Order Info |
%%Loop:ActualQty%% | LineItem:ActualQuantity | Line Item |
%%Loop:Barcode%% | LineItem:Barcode | Line Item |
%%Loop:Code%% | LineItem:Code | Line Item |
%%Loop:DiscountPercent%% | LineItem:DiscountPercent | Line Item |
%%Loop:SerialNumberLocationTable%% | LineItem:DynamicLocations | Line Item |
%%Loop:ExchangeQty%% | LineItem:ExchangeQuantity | Line Item |
%%Loop:ItemDiscount%% | LineItem:LineDiscount | Line Item |
%%Loop:LineNote%% | LineItem:LineNote | Line Item |
%%Loop:OptionsWithoutSizes%% | LineItem:OptionswithoutSizes | Line Item |
%%Loop:Name%% | LineItem:ProductName | Line Item |
%%Loop:Options%% | LineItem:ProductOptions | Line Item |
%%Loop:Qty%% | LineItem:Quantity | Line Item |
%%Loop:SerialNumbers%% | LineItem:SerialNumber | Line Item |
%%Loop:SerialNumberQtys%% | LineItem:SerialNumberQty | Line Item |
%%Loop:SpecialDescription%% | LineItem:SpecialPricing | Line Item |
%%Loop:FixedLocations%% | LineItem:StaticLocations | Line Item |
%%Loop:SupplierCode%% | LineItem:SupplierCode | Line Item |
%%Loop:LineItemTaxRate%% | LineItem:TaxRate | Line Item |
%%Loop:LineItemTaxTotal%% | LineItem:TaxTotal | Line Item |
%%Loop:Total%% | LineItem:Total | Line Item |
%%Loop:UnitDiscount%% | LineItem:UnitDiscount | Line Item |
%%Loop:UnitPrice%% | LineItem:UnitPrice | Line Item |
%%Loop:UnitPriceText%% | LineItem:UnitPriceText | Line Item |
%%Loop:Variations%% | LineItem:Variations | Line Item |
%%ATT:Mobile%% | Mobile | Order Info |
%%ATT:Outstanding%% | Outstanding | Order Info |
%%Loop:Amount%% | Payment:Amount | Payments |
%%Loop:Comment%% | Payment:Comment | Payments |
%%Loop:Date%% | Payment:Date | Payments |
%%Loop:Date%% | Payment:Date | Payments |
%%Loop:Method%% | Payment:Method | Payments |
%%Loop:Ref%% | Payment:Reference | Payments |
%%ATT:PaymentDueDate%% | PaymentDueDate | Order Info |
%%ATT:PaymentTerms%% | PaymentTerms | Order Info |
%%ATT:PaymentTermsWithHeader%% | PaymentTermswithHeader | Order Info |
%%ATT:Phone%% | Phone | Order Info |
%%ATT:ProductCost%% | ProductTotal | Order Info |
%%ATT:ProjectName%% | ProjectName | Order Info |
%%ATT:Spacer%% | Spacer | Order Info |
%%ATT:SubTotal%% | SubTotal | Order Info |
%%ATT:Surcharge%% | Surcharge | Order Info |
%%ATT:SurchargeDescription%% | SurchargeDescription | Order Info |
%%ATT:TaxName%% | TaxName | Order Info |
%%ATT:TaxRate%% | TaxRate | Order Info |
%%ATT:TaxAmount%% | TaxTotal | Order Info |
%%ATT:TotalPaid%% | TotalPaid | Order Info |
%%ATT:TotalQty%% | TotalQuantity | Order Info |
%%ATT:TrackingCode%% | TrackingCode | Order Info |
%%ATT:TransactionRef%% | TransactionReference | Order Info |