Core Concepts
Techniques
Migrating templates from Shopify to Mechanic
You can bring your templates over from Shopify's email notifications, or from Shopify's Order Printer app, in order to generate order-related material on-demand in Mechanic. This could look like triggering an order confirmation email, or generating a PDF invoice.
We'll talk about this in two parts: the task script, and then the steps required for preparing a Shopify template for use with Mechanic.
Task script
To generate an order PDF to send as an email, you might use a task like this one, paired with a subscription to shopify/orders/create:
1
{% action "email" %}
2
{
3
"to": {{ order.email | json }},
4
"subject": {{ options.email_subject__required | strip | json }},
5
"body": {{ options.email_body__multiline_required | strip | newline_to_br | json }},
6
"reply_to": {{ shop.customer_email | json }},
7
"from_display_name": {{ shop.name | json }},
8
"attachments": {
9
{{ options.pdf_attachment_filename__required | json }}: {
10
"pdf": {
11
"html": {{ options.pdf_html_template__code_multiline_required | json }}
12
}
13
}
14
}
15
}
16
{% endaction %}
Copied!
Or, to send out an order-related email, you might use something like this:
1
{% action "email" %}
2
{
3
"to": {{ order.email | json }},
4
"subject": {{ options.email_subject__required | json }},
5
"body": {{ options.email_body_html__required_multiline_code | strip | json }},
6
"reply_to": {{ shop.customer_email | json }},
7
"from_display_name": {{ shop.name | json }}
8
}
9
{% endaction %}
Copied!
Both task scripts offer the user a multi-line code field, allowing them to paste in the original template from Shopify.
A few template modifications are necessary before they'll function as intended, and we'll talk about that next.
Preparing the template
Shopify and Mechanic both use Liquid code for their templates. Run through the following changes to convert your Shopify templates (whether from an email notification or from Order Printer) to something Mechanic can use.
1. Change variables to order properties
Shopify uses variables like
{{ total_price }} and {{ transactions }} and {{ email }}. These are all properties of the order object, and you can access them as such in Mechanic, using variables like {{ order.total_price }} and {{ order.transactions }} and {{ order.email }}.Some variables from Shopify are already given as properties of an object you can use in Mechanic. For example,
{{ shop.name }} works in both Order Printer and in Shopify.To see what variables Shopify uses in their notification templates, see their documentation. If you're using Order Printer, you can find a similar list by opening up a template in the app, and clicking the "View the Liquid variable list" link.
2. Convert numeric strings to numbers, and check on money rendering
Mechanic uses API data from Shopify to power the order object. Because the Shopify API makes money figures available as strings, you may need to convert these values to numbers for parts of your template to work correctly.
Example:
1
{% if total_price > 5000 %}
Copied!
should become...
1
{% assign total_price_number = order.total_price | times: 1 %} {% if total_price > 5000 %}
Copied!
For numbers that are formatted with the "money" filter, check to make sure that the final numbers are correct. You may need to multiply the number by 100 to achieve the expected results, as in:
1
{{ order.total_price | times: 100 | money }}
Copied!
3. Check your stylesheets
External stylesheets are not supported for emails (though they are supported for the PDF file generator). This means that, for email content, any
<link rel="stylesheet"> tags need to be replaced with a <style> tag, containing the full contents of that stylesheet.There is one exception scenario. When using email templates, Mechanic will automatically replace this tag:
1
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
Copied!
... with a style tag containing rules extracted from Shopify's default notification emails. You may still need to make overriding changes, particularly for brand colors, but this should help you make progress more rapidly.
Note: This <link> tag substitution only happens for email templates – it does not occur anywhere else.
Last modified 4mo ago