For those with a little knowledge of HTML and CSS, we have built the ability to directly edit your template's HTML and CSS straight from the Template Builder.

Changing the builder mode

You can change the mode of the builder (between Editor, HTML, and CSS) by using the tabs located just above the Template Body.

Using the HTML Editor

You can use any HTML tags within the HTML Editor excluding <script> tags and <style> tags. If you need to insert CSS, you can use the CSS editor. Template data can be included using the Liquid templating language (the same as Shopify uses). For a full list of available variables, click the Show a full list of supported variables link at the top of the editor.

Liquid Filters

Currently, the following filters are available for use:

  • {{ order.price | money }}
    Formats a currency variable with your IntelliPrint installations money format.
  • {{ order.price | money_with_currency }}
    Formats a currency variable with your IntelliPrint installations money with currency format.
  • {{ order.processed_at | date: '%Y-%m-%d %I:%M %p' }}
    Formats a date variable with your the provided date format string. You can construct a date format string using a tool such as
  • {{ order.has_tax | yesno }}
    Accepts a boolean variable and outputs a tick or a cross depending on the value.
  • {{ order.billing_address | address }}
    Shortcut to format an address object.
  • {{ order.barcode_id | barcode: 'CODE128' }}  
    Generates a barcode representation of the input value. Accepts a single required parameter to determine the type of barcode. Supported types are:
    - CODE128
    - CODE39
    - EAN-13, EAN-8, EAN-5, EAN-2, UPC (A)
    - ITF-14
    - ITF
    - MSI, MSI10, MSI11, MSI1010, MSI1110
    - Pharmacode
    - Codabar

Using the CSS Editor

You can fully utilize CSS3 in the CSS Editor, with the addition of supporting SASS syntax. Note that you cannot incorporate Liquid into your CSS.

Did this answer your question?