Migrating templates from Shopify to Mechanic
Last updated
Was this helpful?
Last updated
Was this helpful?
Shopify notification templates can be manually migrated over to Mechanic in order to generate order-related material on-demand in Mechanic. This could look like , or .
Common sources for these templates include Shopify's email notification settings, Shopify's app, and .
We'll talk about this in two parts: the task code, and then the steps required for preparing a Shopify template for use with Mechanic.
Before we begin, note that there are two ways to think about templates:
Reusable email templates, as we'll call them here, are configured in Mechanic's "Email templates" settings area. Here, email templates may be keyed with a name and saved for later use and reuse by any number of tasks.
Task-level templates are ad-hoc pieces of Liquid code, informally defined within an individual task, and possibly made user-configurable via . While this page focuses on using templates for email purposes, a task-level template may be used for more than just emails: a task might also use these to generate PDFs, or file content to save via FTP, or (in very advanced cases) even entire .
There are several ways your task code might be set up for exercising a template.
In any of these scenarios, your Shopify template will need to be modified before it'll function as intended in Mechanic, and we'll talk about that below in .
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. Note how the template is made user-configurable by a task option, implicitly created by the options.pdf_html_template__code_multiline_required
variable reference.
To send out an order-related email where all the details are provided as HTML in the email itself, you might use something like this. Note how, as above, the template is set using task options.
Shopify and Mechanic both use Liquid code for their templates. Run through the following changes to convert your Shopify templates (whether from a Shopify email notification or from the Order Printer app) to something Mechanic can use.
Rather than changing all of these variable references across the template, it may be easier to initialize those variables at the top of the template code, using something like this:
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.
Mechanic Liquid supports many filters from Shopify Liquid, but not all of them! If a filter isn't working the way you expect, check Mechanic's list of supported Shopify Liquid filters. You may need to adjust your code to work around filters that Mechanic Liquid doesn't support.
This is particularly important if the figure is used in a logical condition, like this one:
Because order.total_price
is a string, and because Liquid filters cannot be used in the middle of an if
or unless
tag, one should first assign the numeric value to a new variable and then update the condition to use that new variable.
For numbers that are formatted with the "money" or "money_with_currency" 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:
There is one exception scenario. When using email templates, Mechanic will automatically replace this tag:
... 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 reusable email templates. It does not occur in ad-hoc templates defined at the task level, or anywhere else.
To bring over your email colors, go back to the "Notifications" area in Shopify, and click on the "Customize" button, under "Customer notifications". You'll see a setting for "Accent color". Click on the block of color, then copy the string of text that looks like "#ABCDEF". This is your color accent code. :) Back in your Mechanic email template, replace the two instances of "#1990c6" (the default accent color) with the color code that you copied, then save your settings.
To send an email using a reusable , as configured in your Mechanic settings, use the "template"
option of the .
To learn more about this, see .
Shopify uses variables like {{ total_price }}
and {{ transactions }}
and {{ email }}
. These variables aren't automatically available in Mechanic, but the right pieces of data all available via , using references like {{ order.total_price }}
and {{ order.transactions }}
and {{ order.email }}
.
To see what variables Shopify uses in their notification templates, . 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.
Mechanic's usual sources for querying Shopify data may be used here as well. To learn more about pulling in Shopify data, see .
Mechanic uses API data from Shopify to power . Because the Shopify API makes money figures available as strings, one may need to cast these values to numbers for parts of your template to work correctly. This may be done via assignment, as in {% assign foo = some_number | times: 1 %}
, or at the time of output, as in {{ some_number | times: 1 }}
.
External stylesheets are not supported for emails (though they are supported for the ). 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.
To bring over your shop's logo, see our guide â see the "Embedding images" section.