How to customize a template through HTML and liquid variables along with a preview

Invoice Falcon lets you fully customize your invoice template using HTML and Liquid variables directly in the Code Editor. You can modify the layout, structure, and styling of your invoice by editing the template code, then instantly preview your changes. A built-in Liquid variables reference lists every available variable you can use — from order details and line items to addresses and translations.

Open the template editor

1. Open the Invoice Falcon app from your Shopify Admin.
2. Click Templates in the left navigation menu.
3. Click on the template you want to edit (or click Edit on the template row).

The template edit page has three main sections:

• General settings — update the template name and set which order types use this template by default.
• Visual editor — customize colors, fonts, and toggle settings without code (covered in a separate article).
• Edit template content — the Code Editor where you write HTML and Liquid code directly.

Use the Code Editor

The Edit template content section contains three tabs: Code, Preview, and Liquid variables list.

Code tab

The Code tab is where you edit your template's HTML and Liquid code. It features a full code editor with line numbers, syntax highlighting, code folding, bracket matching, and auto-completion.

1. Click the Code tab (selected by default).
2. Edit the HTML and Liquid template code as needed.
3. Click Save in the top bar to save your changes.

Preview tab

The Preview tab renders a live preview of your invoice using sample order data. Use it to check your layout after making code changes.

1. Click the Preview tab.
2. The invoice preview renders automatically using the current template code.
3. If there is a Liquid syntax error, a red error banner appears instead of the preview.

Liquid variables list tab

The Liquid variables list tab provides a complete reference of every Liquid variable available in your template. Variables are organized into collapsible categories that you can expand or collapse by clicking the category heading.

The available categories are:

• Shop Information — shop_name, shop_email, shop_phone, shop_address, shop_logo, etc.
• Template Settings — SETTING_shop_accent_color, SETTING_font_family, SETTING_font_size, SETTING_date_format, etc. (managed by the Visual Editor).
• Supplier / Merchant Address — supplier_address.name, supplier_address.company, supplier_address.tax_id, etc.
• Order Information — invoice_number, order_number, order_date, financial_status, order_tags, etc.
• Customer Information — customer.first_name, customer.last_name, customer.email, customer_tags.
• Metafields — order_metafields["namespace.key"], customer_metafields["namespace.key"], shop_metafields["namespace.key"].
• Shipping Address — shipping_address.name, shipping_address.address1, shipping_address.city, etc.
• Billing Address — billing_address.name, billing_address.address1, billing_address.city, etc.
• Delivery Address — delivery_address.name, etc. (falls back to shipping or billing address).
• Line Items — line_items (array), item.title, item.sku, item.quantity, item.price, item.total, item.image_url, etc.
• Totals & Currency — subtotal, tax_total, shipping_total, total, total_paid, total_due, currency, currency_symbol, etc.
• Payment & Shipping — payment_method, shipping_lines, tax_lines, refunds.
• Translations — translations.title, translations.order, translations.subtotal, translations.total, etc.

How Liquid variables work in your template

Liquid is a templating language that lets you insert dynamic data into your HTML. Use double curly braces {{ }} to output a variable's value, and curly brace-percent {% %} tags for logic.

Output a variable:

<p>Order: {{ order_name }}</p>
<p>Date: {{ order_date }}</p>
<p>Total: {{ currency_symbol }}{{ total }}</p>

Conditional logic:

{% if financial_status == 'paid' %}
  <span>PAID</span>
{% else %}
  <span>UNPAID</span>
{% endif %}

Loop through line items:

{% for item in line_items %}
  <tr>
    <td>{{ item.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.total }}</td>
  </tr>
{% endfor %}

Use SETTING_ variables for conditional display:

{% if SETTING_show_order_number %}
  <p>Order: {{ order_name }}</p>
{% endif %}

Access metafields:

{% if order_metafields["custom.po_number"] %}
  <p>PO Number: {{ order_metafields["custom.po_number"] }}</p>
{% endif %}

The controlled settings block

Every template starts with a [CONTROLLED] block at the top. This block is automatically generated and maintained by the Visual Editor. It assigns SETTING_ Liquid variables based on your Visual Editor choices.

<!-- [CONTROLLED] Document Settings - Managed by Visual Editor -->
{% assign SETTING_shop_logo = logo_url %}
{% assign SETTING_shop_logo_width = logo_width %}
{% assign SETTING_show_order_number = show_order_number %}
...

You can reference any SETTING_ variable in your template code below the controlled block. For example:

{% if SETTING_show_order_number %}
  <div>{{ translations.order }}: {{ order_name }}</div>
{% endif %}

Save and discard changes

When you make changes in the Code Editor, a save bar appears at the top of the page with Save and Discard buttons.

• Click Save to save your code changes.
• Click Discard to revert all unsaved changes to the last saved version.

Version history

Invoice Falcon keeps a version history of your template changes. You can view and restore previous versions.

1. On the template edit page, click Version history in the top action bar.
2. Browse through previous versions.
3. Select a version to restore it.

Known limitations

• Liquid only — the Code Editor supports Liquid and HTML. JavaScript is not executed inside invoices.
• Controlled block is read-only — the [CONTROLLED] section at the top of the template is managed by the Visual Editor. Do not edit it manually.
• No auto-save — changes in the Code Editor are not saved automatically. Always click Save before navigating away.
• Preview uses sample data — the Preview tab renders with sample order data, not a real order. The actual invoice may look slightly different depending on the order's data.
• PDF rendering — the final PDF is rendered by the Invoice Falcon server. Certain CSS properties (e.g., complex animations, external fonts not loaded) may render differently in the PDF vs. the browser preview.

Troubleshooting

FAQs

Q: Can I use custom CSS in my template?
A: Yes. Add CSS inside a <style> tag in the template. Use inline styles for the most reliable PDF rendering.

Q: What happens if I delete the controlled block?
A: The Visual Editor settings will no longer apply to your template. You can still use hardcoded values, but the Visual Editor toggles will stop working.

Q: Can I use Shopify metafields in my template?
A: Yes. Use order_metafields["namespace.key"], customer_metafields["namespace.key"], or shop_metafields["namespace.key"] to access metafield values.

Q: Can I create different templates for invoices, quotes, and packing slips?
A: Yes. Create separate templates from the Templates page and customize each one with different HTML and Liquid code.

Q: How do I display product images in the line items?
A: Use item.image_url inside your line items loop: <img src="{{ item.image_url }}" alt="{{ item.title }}" width="50">.

Q: Can I use the translations variables to support multiple languages?
A: Yes. Use variables like {{ translations.title }}, {{ translations.subtotal }}, {{ translations.total }} to display translated labels. The translations update automatically based on your invoice language setting.

Updated on: 20/05/2026