Select Page
Common searched topics: Manufacturing, Label printing, Sales order
Browse features guide
Managing products
Imports, exports & integrations
Sales
Stock level reports
inFlow settings
Manufacturing
Sales
  • Sales orders
  • Purchase orders
Adding HTML/CSS to documents

Designing your inFlow document with HTML/CSS and liquid variables

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.

Before starting

What’s allowed in the HTML/CSS block

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. 

The HTML/CSS code block you provide will be rendered in a separate sandbox context, and therefore, you won’t have control over certain aspects.

The entire code block you provide will be appended inside a body tag of a separate HTML document we’ve defined. As a result, certain tags should not appear in your block. They are html , head , body , and any descendent tags of head such as title , style , link , meta , etc.

This implies several things. For example, you can’t control the document title simply by using title . Using the style tag or loading external style sheets using a link may not always work (depends on the browser). So, we recommend styling your document using inline CSS.

For example:

<h1 style="color:blue;text-align:center;">This is a heading</h1> 
<p style="color:red;">This is a paragraph.</p>

Inline CSS should be enough most of the time for styling certain parts of a document. If you require more complex styling or need the CSS to be more reusable and flexible, you can define internal CSS using the style tag; however, note that this will produce invalid HTML as it’s appended inside a body tag later.

Most browsers are quite forgiving about parsing invalid documents, so your CSS will still be evaluated by those browsers. Still, ensuring that your document’s styling is consistent across major browsers is important, so we encourage you to use inline CSS instead.

For security reasons, the following are not allowed in the HTML/CSS block:

  • JavaScript
  • URLs opening a different web page in the current tab or a new tab
    • You still can add images using the img tag if it’s pointing to images from other domains. However, any URLs must be in either http or https scheme.
  • form and iframe tags

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.

Company info

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.

VariableDescription
{{company.name}} Your company name.
{{company.address1}}The first line of your company address.
{{company.address2}}The second line of your company address.
{{company.city_state}}Your company address’ city and state combined. 
{{company.city}}Your company address’s city.
{{company.state}}Your company address’s state.
{{company.postal_code}}Your company address’s postal code.
{{company.country}}Your company address’s country.
{{company.phone}}Your company address’s phone number.
{{company.fax}}Your company address’s fax number.
{{company.email}}Your company address’s email address.
{{company.website}}Your company address’s website.
{{company.misc_info}}Your company address’s additional information listed in the Misc. info section.
Your inFlow company information variables

Order variables

Sales order information

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

VariableDescription
{{so.order_number}}The inFlow sales order number.
{{so.order_date}}The sales order date.
{{so.requested_ship_date}}The requested ship date. 
{{so.invoiced_date}}The invoiced date.
{{so.due_date}}The due date.
{{so.date_paid}}The date paid. If there are multiple payments, this only returns the last date paid.
{{so.return_date}}The sales order return date. 
Sales order information variables

Purchase order information

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

VariableDescription
{{po.order_number}}The inFlow purchase order number.
{{po.order_date}}The purchase order date.
{{po.requested_ship_date}}The requested ship date. 
{{po.due_date}}The due date.
{{po.date_paid}}The date paid. If there are multiple payments, this only returns the last date paid.
{{po.return_date}}The purchase order return date. 
Purchase order information variables

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. 

VariableDescription
{{so.customer.name}}The customer’s name as listed in the sales order.
{{so.customer.remarks}}The customer’s remarks as listed in the customer details.
{{so.customer.tax_exempt_number}}The customer’s tax exempt # as listed in the customer details.
{{so.contact_name}}The customer’s contact name.
{{so.phone}}The customer’s phone number.
{{so.email}}The customer’s email address. 
{{so.billing_address1}}The first line of your customer’s billing address.
{{so.billing_address2}}The second line of the billing address.
{{so.billing_city_state}}The billing address city and state combined. 
{{so.billing_city}}The billing address city.
{{so.billing_state}}The billing address state.
{{so.billing_country}}The billing address country.
{{so.billing_postal_code}}The billing address postal or zip code.
{{so.billing_address_remarks}}The billing address remarks.
{{so.ship_to_company_name}}The company name to ship to, if different from the customer’s name. Used for dropshipping. Set in the “Care of” under the shipping address section.
{{so.shipping_address1}}The first line of your customer’s shipping address as listed in the sales order. 
{{so.shipping_address2}}The second line of the shipping address.
{{so.shipping_city}}The shipping address city.
{{so.shipping_city_state}}The shipping address city and state combined. The shipping address city.
{{so.shipping_state}}The shipping address state.
{{so.shipping_country}}The shipping address country.
{{so.shipping_postal_code}}The shipping address postal or zip code.
{{so.shipping_address_remarks}}The shipping address remarks.
Customer details variables

Vendor details and addresses

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

VariableDescription
{{po.vendor.name}}The vendor’s name as listed in the purchase order.
{{po.vendor.remarks}}The vendor remarks as listed in the vendor details.
{{po.contact_name}}The vendor’s contact name.
{{po.phone}}The vendor’s phone number.
{{po.email}}The vendor’s email address. 
{{po.vendor_address1}}The first line of your vendor’s billing address.
{{po.vendor_address2}}The second line of the billing address.
{{po.vendor_city_state}}The billing address city and state combined. 
{{po.vendor_city}}The billing address city.
{{po.vendor_state}}The billing address state.
{{po.vendor_country}}The billing address country.
{{po.vendor_postal_code}}The billing address postal or zip code.
{{po.vendor_address_remarks}}The billing address remarks.
{{po.ship_to_company_name}}The company name as listed in the ship-to address on the purchase order.
{{po.ship_to_address1}}The first line of ship-to address as listed in the purchase order.
{{po.ship_to_address2}}The second line of the ship-to address.
{{po.ship_to_city}}The ship-to address city.  
{{po.ship_to_city_state}}The ship-to address city and state combined. .
{{po.ship_to_state}}The ship-to address state.
{{po.ship_to_country}}The ship-to address remarks.
Vendor details variables

Overall totals

Use these for the overall totals, which include any returned/refunded amounts. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.subtotal}} is the purchase order’s subtotal amount).

VariableDescription
{{so.subtotal}}The overall subtotal amount.
{{so.tax1_name}}The name of the primary tax.
{{so.tax1}}The overall primary tax amount.
{{so.tax2_name}}The name of the secondary tax.
{{so.tax2}}The overall secondary tax amount.
{{so.freight}}The overall freight amount. 
{{so.total}}The overall total amount.
{{so.amount_paid}}The overall amount paid. 
{{so.balance}}The overall balance.
{{so.credit}}The overall amount to refund. 
Overall totals variables

Order totals

These variables return the order totals, excluding any refunds. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.order_sub_total}} is the purchase order’s subtotal amount excluding any refunds).

VariableDescription
{{so.order_sub_total}}The order subtotal on the sales tab, not including any returns. 
{{so.order_tax1}}The primary tax amount. 
{{so.order_tax2}}The secondary tax amount. 
{{so.order_freight}}The freight amount. 
{{so.order_total}}The total amount. 
Order totals variables

Return totals

These variables concern the return/refund amounts only. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.return_sub_total}} is the purchase order’s return subtotal amount).

VariableDescription
{{so.return_sub_total}}The subtotal amount on the Return tab. 
{{so.return_tax1}}The primary tax amount on the Return tab.
{{so.return_tax2}}The secondary tax amount on the Return tab.
{{so.return_freight}}The freight amount on the Return tab.
{{so.return_total}}The total amount on the Return tab.
{{so.return_fee}}The fee amount on the Return tab.
Return totals variables

Additional order details

These are additional details in the sales order. 

VariableDescription
{{so.sales_rep}}The sales representative for the sales order. 
{{so.po_number}}Your customer’s P.O. number listed on this sales order.
{{so.payment_terms}}The payment terms set for this sales order. 
{{so.exchange_rate}}The exchange rate between order currency and home currency..
{{so.payment_method}}The payment method used for this order. If there are multiple payments of different methods, this only returns the first payment method used
{{so.order_remarks}}The information listed in the Remarks section in the Sales Order tab.
{{so.picking_remarks}}The information listed in the Remarks section in the Pick tab.
{{so.shipping_remarks}}The information listed in the Remarks section in the Ship tab.
{{so.return_remarks}}The information listed in the Remarks section in the Return tab.
{{so.restock_remarks))The information listed in the Remarks section in the Restock tab.
{{so.payment_remarks}}The information listed in the Remarks section in the first entry of the Payment details popup.
{{so.weight}}The total weight of products in this sales order.
{{so.volume}}The total volume of products in this sales order.
{{so.quantity}}The total quantity of products in this sales order, in standard UoM.
Additional sales order details variables

These are additional order details for the purchase order.

VariableDescription
{{po.vendor_order_number}}Your vendor’s order number listed on this purchase order.
{{po.payment_terms}}The payment terms set for this purchase order. 
{{po.exchange_rate}}The exchange rate between the purchase order currency and home currency..
{{po.payment_method}}The payment method used for this order. If there are multiple payments of different methods, this only returns the first payment method used.
{{po.order_remarks}}The information listed in the Remarks section in the Purchase Order tab.
{{po.receive_remarks}}The information listed in the Remarks section in the Receive tab.
{{po.return_remarks}}The information listed in the Remarks section in the Return tab.
{{po.unstock_remarks))The information listed in the Remarks section in the Restock tab.
{{po.payment_remarks}}The information listed in the Remarks section in the first entry of the Payment details popup.
{{po.weight}}The total weight of products in this purchase order.
{{po.volume}}The total volume of products in this purchase order.
{{po.quantity}}The total quantity of products in this purchase order, in standard UoM.
Additional purchase order details variables

Product 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.  If you want the product information to be listed in a table format, you’ll need to incorporate the loop into an HTML table.

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

The so.lines object specified in the beginning of the loop may differ depending on which information you want to show. In this case, it refers to any variables in the main Sales Order tab of a sales order. For information in the Pick tab (e.g. location, sublocation), you’ll need to specify a different object. The available objects and their variables are listed in the following sections.

Product information

This is a list of product variables that remain the same throughout the different objects. Typically these are the identifiers such as name, SKU, etc.

VariableDescription
{{line.name}}The product’s name.
{{line.description}}The product’s description. 
{{line.sku}}The product’s SKU.
{{line.vendor_product_code}}The vendor product code as listed in the purchase order.
{{line.image_url}}The product’s image.
{{line.category}}The product’s category. 
{{line.barcode}}The product’s barcode. 
{{line.barcode_format}}The format of the product’s barcode (e.g. Code 128, UPC, or EAN).
{{line.dimensions}}The product dimensions (length x width x height). 
{{line.item_weight}}The product weight for a single unit. 
{{line.item_volume}}The product volume for a single unit.
{{line.line_num}}The line number for the product. 
Product information variables

Order lines

This is the list of available product variables specific to the main Sales Order tab of a sales order. Your loop should use the so.lines object for a sales order, or po.lines for a purchase order.

VariableDescription
{{line.quantity}}The product quantity as listed in the sales order tab. Includes the sales or purchase unit of measure (depending on if your object is the sales order or purchase order object).
{{line.unit_price}}The product’s unit price. This amount does not include any discounts. 
{{line.unit_price_with_discount}}The product’s discounted unit price.
{{line.subtotal}}The product subtotal. 
{{line.tax_code}}The product’s tax code (“Taxable”, “Non-taxable”, etc.)
{{line.item_total_weight}}The total weight for the product, based on the quantity in the sales order tab.
{{line.item_total_volume}}The total volume for the product, based on the quantity in the sales order tab.
Order line variables

Example table for sales order lines:

<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>

Sales Order Pick lines / Purchase Order Receive lines

This is the list of available product variables specific to the Pick or Fulfill tab of a sales order, or the Receive tab of a purchase order. For this, your loop should use the so.pick_lines object for a sales order, or po.receive_lines for a purchase order.

VariableDescription
{{line.quantity}}The quantity as listed in the pick, fulfill, or receive tab. Includes the unit of measure. 
{{line.location}}The location that the product was picked from / received to.
{{line.sublocation}}The sublocation that the product was picked from / received to.
{{line.item_total_weight}}The total weight for the product, based on the quantity in the respective tabs.
{{line.item_total_volume}}The total volume for the product, based on the quantity in the respective tabs.
Order pick / receive lines variables

Sales Order Pack lines

This is the list of available product variables specific to the ship tab of a sales order. For this, your loop should use the so.pack_lines object instead.

VariableDescription
{{line.quantity}}The product quantity as listed in the ship tab. Includes the unit of measure. 
{{line.box_number}}The box number the product was packed into.
Sales order pack lines variables

Sales Order Ship lines

This is the list of available product variables specific to the shipping details in a sales order. For this, your loop should use the so.ship_lines object instead.

VariableDescription
{{line.containers}}The box numbers.
{{line.shipped_date}}The shipment’s ship date.
{{line.carrier}}The shipment’s carrier.
{{line.tracking_number}}The shipment’s tracking number.
Sales order ship lines variables

Sales Order / Purchase Order Return lines

This is the list of available product variables specific to the Return tab in a sales order or purchase order. For this, your loop should use the so.return_lines object for a sales order, or po.return_lines object for a purchase order.

VariableDescription
{{line.quantity}}The product quantity as listed in the return tab. Includes the unit of measure. 
{{line.return_date}}The date the product was returned.

Sales Order Restock / Purchase Order Unstock lines

This is the list of available product variables specific to the Restock tab in a sales order, or the Unstock tab in a purchase order. For this, your loop should use the so.restock_lines object for a sales order, or po.unstock_lines object for a purchase order.

VariableDescription
{{line.quantity}}The quantity as listed in the Restock tab / Unstock tab. Includes the unit of measure. 
{{line.location}}The location that the product was restocked to / unstocked from.
{{line.sublocation}}The sublocation that the product was restocked to / unstocked from.
{{line.restock_date}}The date the product was restocked.
Order restock / unstock lines variables

Other variables

Payment lines

This is the list of available variables specific to the payment details of a sales order or purchase order. Your loop should use the so.payment_lines object for a sales order, or po.payment_lines for a purchase order.

VariableDescription
{{line.date_paid}}The date of a payment.
{{line.amount}}The amount of the payment.
{{line.payment_method}}The payment method of a payment.
{{line.reference_number}}The reference number of a payment.
{{line.remarks}}The remarks of a payment.
Order payment details variables

Serials

For products that have serial numbers, you’ll need to use a loop again with the line.serials object.

{% for line in line.serials %}
  {{ serial }}
{% endfor %}

Example:

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, purchase order, vendor 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.

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

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

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

{{po.vendor.custom1}}, {{po.vendor.custom2}}, … {{po.vendor.custom10}}
The values of the vendor custom fields as it appears in the purchase 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 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 or purchase unit of measure. Whether the sales or the purchase unit of measure shows up depends on whether it’s a sales or purchase document.

{{line.quantity_details.uom}}
The product sales or purchase 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.

Format tips

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" }}

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

Example:

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

Barcodes

Dynamic Code 39 barcodes for scanning text and Liquid variables can be generated and displayed through the HTML/CSS block.

Our scanning hardware currently only supports barcodes composed of the 43 characters listed here. Any characters from the extended set, including any lower case letter, will not be scanned correctly.

Example snippet to display the SO order number as a Code 39 barcode:

<link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet'>
<style>
bc {
    font-size: xx-large;
    font-family: "Libre Barcode 39";
}
</style>

<bc>*{{so.order_number}}*</bc>

Dynamic Code 128 barcodes are not supported in the HTML/CSS block because of the extra encoding logic needed to convert text to a scannable Code 128 barcode.

HTML, CSS, and liquid resources

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

Was this guide helpful?
Yes, thanks!
Not really
Thank you for your input, your feedback is important to us!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

In this tab
  • What's allowed in the HTML/CSS block
  • Liquid variables in inFlow
  • Your company information
  • Sales order information
  • Purchase order information
  • Customer details and addresses
  • Vendor details and addresses
  • Overall totals
  • Order totals
  • Return totals
  • Additional order details
  • Product information
  • Order lines
  • Sales Order Pick lines / Purchase Order Receive lines
  • Sales Order Pack lines
  • Sales Order Ship lines
  • Sales Order / Purchase Order Return lines
  • Sales Order Restock / Purchase Order Unstock lines
  • Payment lines
  • Serials
  • Custom fields variables
  • HTML, CSS, and liquid resources
Similar articles

A complete guide on how to set up inFlow.

Get advice and answers from the inFlow Support team