Note: This only applies to the legacy HTML email editor. If you would like to create HTML emails with the new editor, we recommend applying your code in HTML code block, or get in touch with our support team to hear about other options.

Are you looking to create an HTML order receipt to capture your customer's attention? With Jilt, and a bit of HTML coding skills, you can stand out in a busy inbox.

To get started, open an existing email that uses the legacy editor. Then, open up the first email and scroll down to the lower right corner and click Import HTML Email...

A notification will pop up, letting us know that importing an HTML email is not reversible and we'll lose our previous changes:

We'll confirm the import by clicking Yes, switch to HTML. After a moment, the HTML editor will load where we can either work on the HTML code

Or Preview the layout:

Tips for building out the email in HTML

We use Liquid merge tags for personalizing the email contents (more on Liquid here) and have a list of the available tags under the Select your settings heading:

To include all of the customer's cart contents, we'll add the {{ order.line_items }}  tag to a "for" loop:

For example, our default email template uses the following loop for displaying the cart contents:

{% for line_item in order.line_items %}
{{ line_item.image | img_tag: 200, nil }}
{{ line_item.title }}
{{ line_item.quantity }} x {{ line_item.price | money }}
{% endfor %}

Remember to add HTML tags to the loop if you'd like to style the various elements.

One last thing is that the {{ footer }}  tag on line 23 of the editor is necessary to comply with the CAN-SPAM Act, the details of which can be changed via the Settings > Shop Settings screen.

Did this answer your question?