---
title: "Edit a template's HTML and Liquid code"
description: "Change a template's layout directly in its code, with a preview and a list of every variable."
url: https://help.invoicefalcon.com/edit-template-html-and-liquid/
section: "Templates"
last_updated: 2026-10-28
---
# Edit a template's HTML and Liquid code
> Change a template's layout directly in its code, with a preview and a list of every variable.
Use this guide if the visual editor can't do what you need, for example moving sections around, adding a custom block, or printing a metafield. By the end, you'll have edited the template's code, checked it in the preview, and saved it.
## Before you begin
- You need to be comfortable with HTML and Liquid, Shopify's template language. If you'd rather not touch code, try the [visual editor](https://help.invoicefalcon.com/customize-a-template/) or the [AI editor](https://help.invoicefalcon.com/edit-templates-with-ai/) first.
- Duplicate the template before big edits, so your live invoices aren't affected while you work. See [Manage your templates](https://help.invoicefalcon.com/manage-your-templates/).
- Saving changes how **existing** invoices look the next time they are printed, downloaded or sent.
- Code editing is on every plan.
## Choose your setup
| Use this | When |
|---|---|
| **Visual editor** | You want to show or hide details, or change the logo, colors, fonts or labels. |
| **AI editor** (Pro plan) | You can describe the change in plain words. |
| **Code** | You need a layout change or a variable the visual editor doesn't offer, such as a metafield. |
You can use both. Settings from the visual editor stay in control of colors, fonts and what shows, and your code decides the layout.
## What customers will see
The invoice PDF follows your saved code. A mistake in the code can stop invoices from rendering, so always check the **Preview** tab before you save.
## Set it up
1. Open your Shopify admin and click **Invoice Falcon** in the left menu.
2. Click **Templates** in the app's menu, then click the template's name.
3. Scroll to the **Edit template content** section and click the **Code** tab.
4. Edit the HTML and Liquid below the settings block.
5. Click the **Preview** tab to check the result. It shows your unsaved code with a sample order.
6. Click **Save** in the bar at the top of the page.
A **Template saved** message confirms the save.
### The settings block
The top of the code, marked **[CONTROLLED]**, holds your visual editor settings. It is read-only and greyed out in the **Code** tab. Change those settings in the visual editor instead. You can read them in your own code, for example `{{ SETTING_shop_accent_color }}`.
### Find a variable
Click the **Liquid variables list** tab to see every variable you can use, grouped by topic: shop, template settings, your business address, order, customer, metafields, addresses, line items, totals and currency, payment and shipping, and translations. Each variable has a short description.
Some useful ones:
| To print | Use |
|---|---|
| The invoice number | `{{ invoice_number }}` |
| The order name, such as #1001 | `{{ order_name }}` |
| An order metafield | `{{ order_metafields["namespace.key"] }}` |
| A product metafield, inside the line item loop | `{{ item.product_metafields["namespace.key"] }}` |
| A cart or checkout attribute by name | `{{ note_attributes_map["name"] }}` |
Replace `namespace.key` with your metafield's namespace and key from Shopify.
## Check your setup
1. Click the **Preview** tab and check there is no error.
2. Open a real order from **Orders**, click **Actions**, then click **Print**. Check the PDF, especially anything that uses metafields or attributes, since the preview uses sample data.
## Troubleshooting
### The preview shows Error rendering template
The Liquid has a syntax error, such as a missing `{% endif %}` or `{% endfor %}`. The message after **Error rendering template:** names the problem. Fix it before you save. If you can't find it, click **Discard** in the bar at the top of the page to drop your unsaved edits.
### I can't type in the top part of the code
That's the **[CONTROLLED]** settings block, which is read-only. Change those settings in the visual editor. See [Customize a template in the visual editor](https://help.invoicefalcon.com/customize-a-template/).
### A metafield is blank on the invoice
Check that the namespace and key match the metafield in Shopify exactly, and that the order or product actually has a value. The preview's sample order has no metafields, so check with a real order.
### I saved code that broke my invoices
Restore the version from before your edit. Click **More actions** at the top of the template page, then **Version history**. See [Restore an earlier template version](https://help.invoicefalcon.com/restore-a-template-version/).
### The Created with Invoice Falcon footer isn't in my code
The footer is added when the PDF is made, so it can't be removed by editing code. On the **Pro plan**, turn it off under **Branding** in the visual editor. See [Add your logo, colors and fonts](https://help.invoicefalcon.com/add-your-logo-and-branding/).
## FAQ
### Will my code changes affect invoices I already sent?
Yes, the next time they are printed, downloaded or sent. A PDF a customer already downloaded doesn't change. Invoice numbers and order details stay the same.
### Will saving in the visual editor overwrite my code?
No. The visual editor and the code save separately. Unsaved code edits are kept when you save in the visual editor, but you still need to click **Save** on the template page to keep them.
### Can I add my own CSS?
Yes. Add it in a `