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

The inky_to_html filter when used in creating Email Content, converts simple Inky tags into table-based HTML most email clients require. It ensures that emails are responsive, providing a clean and structured layout. 
Syntax
To style the email content using  inky_to_html, use the following syntax: 
{% apply inky_to_html %}
<container>
  <row>
    <columns>Your content here</columns>
  </row>
</container>
{% endapply %}<br>
The rendered content from the snippet above will be as follows: 
<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 %}
The above would be rendered with Inline CSS as follows.  
<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.

Example: 
{% 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

Send a Post-Purchase Thank You Note to Customers