Styling Emails
In the Arigato Automation app, emails can be styled using HTML and Twig filters, ensuring they are responsive and visually consistent across various email clients. Two key Twig filters that can be used are inky_to_html
and inline_css
.
Inky to HTML
inky_to_html
, use the following syntax:
{% apply inky_to_html %} <container> <row> <columns>Your content here</columns> </row> </container> {% endapply %}<br>
<html> <head></head> <body> <table align="center" class="container"> <tbody> <tr> <td> <table class="row"> <tbody> <tr> <th class="small-12 large-12 columns first last"> <table> <tbody> <tr> <th>Put content in me!</th> <th class="expander"></th> </tr> </tbody> </table> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>
The Inky library also includes more templates on using inky_to_html that can be easily applied to the Email Action to drastically improve the email layout and presentability. Additionally, our AI Chatbot can also draft Inky emails for you.
Inline CSS
With most email clients, such as Outlook, styles defined in <style>
tags are not supported. To handle this, the inline_css
filter comes in handy as it converts CSS from the <style>
section in the HTML block into inline styles. This ensures that the email will maintain its styling even in clients that strip out external or embedded styles.
Syntax
By wrapping the email block template with {% apply inline_css %}
, the filter will transform the CSS styles added within the <style>
tags. For instance:
{% apply inline_css %} <html> <head> <style> p { color: red; } </style> </head> <body> <p>Hello CSS!</p> </body> </html> {% endapply %}
<html> <body> <p style="color:red;">Hello CSS!</p> </body> </html>
Combining Inky and Inline CSS Styling
Both the inky_to_html
and inline_css
filters can be used together to create fully responsive, well-styled emails.
{% apply inline_css %} {% apply inky_to_html%} <style> .test { text-align: center;} .row { width: 650px; } table {width: 100%;} </style> <row> <columns>put some content here</columns> <columns>hello world</columns> </row> <row> <columns class="test">Some secondary content</columns> </row> <row> <columns>{{ product.title }}</columns><columns>{{ product.updated_at }}</columns> </row> {% endapply %} {% endapply %}
With the Email Formatting option set to Format as HTML you can preview any changes made to the email body by clicking this option:
This will generate a preview of the email body in a new window as shown below:
💡 Pro Tip
To avoid breaking the layout, both filters require a closing tag whenever used.
By using both filters together, it's possible to build emails that are not only responsive but also consistent in appearance across a wide range of email clients.
Example workflows
Send a welcome email the first time a customer places an order