Edit a template's HTML and Liquid code

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 or the AI editor first.
• Duplicate the template before big edits, so your live invoices aren’t affected while you work. See 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.

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.

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.

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 <style> block in the code. The PDF is A4.

Can you help me edit the code?

Yes. Click Chat with us in the “Need help editing your template?” banner on the template page, and our team can help.

Related guides

• Customize a template in the visual editor, for changes without code.
• Edit templates with AI, to describe a layout change in words.
• Restore an earlier template version, to undo a code change.
• Invoices in your customer’s language, for translated labels.