Heads up: this tutorial is geared toward developers. If you need a hand adapting an existing task of yours to use HTML email, drop us a line using that chat button, or get in touch at team@usemechanic.com.

Mechanic will happily send whatever email content you like. :) And, under the hood, we compile your CSS and HTML together to generate HTML that works with email clients – no need to inline your own styles.

When creating tasks that send email, remember: the merchant experience is deeply important. And so, in Mechanic, we recommend separating the email template from the email body.

We recommend that you prompt for three options (and we'll give a sample task script below):

  • Email subject (required)
  • Email body (required)
  • Email template HTML (optional)

If the merchant leaves the template blank, a plain text email should be sent. Under the hood, each linebreak in the merchant's email body should be converted to a <br> tag.

If the merchant supplies the email template HTML, placing EMAIL_BODY where they'd like Mechanic to insert the body text, then their text should be inserted into the email template before sending the resulting content off in the email.

This way, the merchant gets an easy way to maintain their email body text without having to worry about keeping up with valid HTML.

Here's a good task script to start with:

{% assign email_subject = options.email_subject__required %}
{% assign email_body = options.email_body__required_multiline | strip | newline_to_br %}

{% assign email_template = options.email_template_html__code_multiline %}
{% if email_template == blank %}
  {% assign email_template = "EMAIL_BODY" %}
{% endif %}

{% assign email_html = email_template | replace: "EMAIL_BODY", email_body %}

{
  "action": {
    "type": "email",
    "options": {
      "to": {{ customer.email | json }},
      "subject": {{ email_subject | json }},
      "body": {{ email_html | json }},
      "reply_to": {{ shop.customer_email | json }},
      "from_display_name": {{ shop.name | json }}
    }
  }
}

Remember, Mechanic will generate the appropriate task option fields, based on this (and every) script's contents.

Did this answer your question?