> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://invoice-falcon.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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).

![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/f/4/c4f40695834d1000/image_a7tsne.png)
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.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/f/4/c4f40695834d1000/image_1xgxvsi.png)

|| Note: The settings block at the top of the template (marked with [CONTROLLED]) is managed by the Visual Editor. These lines assign SETTING_ variables based on your Visual Editor choices. You can use these variables in your template code, but do not edit the controlled block directly — use the Visual Editor for those settings.

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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/f/4/c4f40695834d1000/image_194k75y.png)

| Tip: Save your changes before switching to the Preview tab to ensure the preview reflects your latest edits.

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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/f/4/c4f40695834d1000/image_1gmkbr.png)

### 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:**

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

**Conditional logic:**

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

**Loop through line items:**

```liquid
{% 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:**

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

**Access metafields:**

```liquid
{% 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.

```liquid
<!-- [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:

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

||| Warning: Do not manually edit the [CONTROLLED] block. Use the Visual Editor to change those settings. Manual edits to the controlled block may be overwritten when you save from the Visual Editor.

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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/f/4/c4f40695834d1000/image_1xzuxhl.png)

| Tip: Use version history to recover if you accidentally break your template layout.

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

| Symptom | Likely Cause | Fix |
| ---- |
| Preview shows a red error banner | Liquid syntax error in the template code | Check the error message, fix the Liquid syntax (e.g., unclosed `{% if %}` tags, missing `{% endfor %}`), and save |
| A variable outputs blank | The variable name is incorrect or the order does not have that data | Check the Liquid variables list tab for the correct variable name. Test with an order that has the relevant data |
| Changes not appearing in preview | Code was not saved before switching tabs | Save your changes, then click the **Preview** tab |
| Controlled settings overwritten | You manually edited the `[CONTROLLED]` block | Use the Visual Editor to modify controlled settings. Revert manual edits using version history |
| PDF looks different from preview | CSS or fonts not supported in PDF rendering | Simplify your CSS. Use inline styles for best PDF compatibility |

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