Do you need more control over the document you’re designing? Use the Custom HTML block to add a section you can customize using HTML/CSS code.

This block uses both HTML/CSS and Liquid templating language. The HTML/CSS portion allows you to style the block, whereas Liquid is a simple plain text language for referencing your inFlow data. 

Liquid variables in inFlow

Variables are data that are dynamically inserted into the inFlow document. You can think of the variable as a placeholder that gets filled in on a per-order basis.

Here’s a list of variables you can use to design your document. 

Your company information

These variables return all the information you’ve entered into your inFlow settings under Account > Company details.

Order information

Use these variables to insert the order number and date information about the sales order. 

Dates will show in a format following your browser locale, along with the timestamp. If you want to change the way this looks, use a filter ( | ) along with the variable.

{{so.order_date | Date: "MMM dd, yyyy" }}

Customer details and addresses

These variables return the customer details as listed on the sales order. Note that this can be different from what’s stored in the customer record. 

Overall totals

Use these for the overall totals, which include any returned/refunded amounts. 

Order totals

These variables return the order totals, excluding any refunds.

Return totals

These variables concern the return/refund amounts only.

Additional order details

These are additional details in the sales order. 

Product information variables

Since a document could contain more than one product, to display this properly, you’d need to use a loop. It essentially runs that bit of code for every product in the document.  

{% for line in so.lines %}
  {{ line.name }}
{% endfor %}

If you want the product information to be listed in a table format, you’ll need to incorporate the loop into an HTML table.

Example table:

<table style="width:50%">
  <tr>
    <th style="text-align: left">SKU</th>
    <th style="text-align: left">Qty</th>
    <th style="text-align: right">Subtotal</th>
  </tr>
  <tr> {% for line in so.lines %}
    <td>{{line.SKU}}</td><td>{{ line.quantity }}</td><td style="text-align:right"> {{line.subtotal}}</tr>
{% endfor %}
</table>

Here is the list of available product variables.

To adjust the image size and other formatting, you’ll need to apply some CSS.

<img src={{line.image_url}} style="width:48px; height:48px; vertical-align: middle; margin-right:16px" />

Custom fields variables

These are the variables corresponding to the information you’ve set up under Global > Customization > Custom fields. Note that there are two types of variables: one for the name of the field (e.g. Alternate Contact), and the other for its value in the sales order (e.g. Jane, John, etc.). 

There are 10 custom fields available for sales order, customer and product. The formatting is similar for each.

{{so.custom_name1}}, {{so.custom_name2}}, … {{so.custom_name10}}
The names of the sales order custom field as set up in your settings.

{{so.custom1}}, {{so.custom2}}, … {{so.custom10}}
The values of the sales order custom fields as it appears in the sales order.

{{so.customer.custom_name1}}, {{so.customer.custom_name2}}, … {{so.customer.custom_name10}}
The names of the customer custom fields as set up in your settings.

{{so.customer.custom1}}, {{so.customer.custom2}}, … {{so.customer.custom10}}
The values of the customer custom fields as it appears in the sales order.

{{line.custom_name1}}, {{line.custom_name2}}, … {{line.custom_name10}}
The names of the product custom fields as set up in your settings.

{{line.custom1}}, {{line.custom2}}, … {{line.custom10}}
The values of the product custom fields as it appears in the sales order.

Additional options for quantity and pricing details

There are some additional options to customize the way your quantities and prices are displayed.

 {{line.quantity_details.standard_quantity}}
The quantity in the standard unit of measure. For example,  if you sold the product in packs of 5 units, this would return 5 instead of 1, 10 instead of 2, etc.  

{{line.quantity_details.uom_quantity}} 
The quantity in the sales unit of measure.

{{line.quantity_details.uom}}
The product sales unit of measure (without any quantities).

{{line.discount_details.pretty}}
The line item discount, formatted in % or $ depending on the order: e.g. 10% or $10

{{line.unit_price_details.pretty_with_iso_code}}
The product unit price with ISO code instead of currency symbol: e.g. USD 89.99 instead of $89.99

{{line.unit_price_with_discount_details.pretty_with_iso_code}}
The discounted product unit price, with ISO code instead of the currency symbol.

{{line.subtotal_details.pretty_with_iso_code}}
The product subtotal with ISO code instead of the currency symbol.

HTML, CSS, and liquid resources

There are many guides on these languages. Here’s some to get you started:

• HTML
• HTML/CSS inline
• Liquid