Default email theme (MyCashflow 2018)

Customizing the default theme

In the default email theme, you must run the build function to make changes to the theme come into effect. A build includes the following actions:

• Converting SASS styles to CSS language
• Converting Panini variables and Inky markup to HTML

A build is performed in the theme folder with the following command:

npm run build

After completing the build, you will see a preview of your email theme in your web browser. However, the preview does not process Interface tags, so email content is not printed on pages.

Once the build is complete, you can send the updated files to the online store's file directory.

MyCashflow email templates use the Foundation for Emails framework that makes it possible to implement the structure and layout of emails in a variety of ways.

See also the Foundation for Emails instructions

The Inky markup language

A significant difference compared to standard HTML templates is that the Foundation for Emails uses its own Inky template language to implement email templates. Thanks to Inky, there is no need for the designer to use <table> elements; Foundation's own clear and easy-to-use elements can be used instead.

For example, the following markup creates a row divided into 2 columns with contents:

<container>
    <row>
        <columns>Contents 1</columns>
        <columns>Contents 2</columns>
    </row>
</container>

During a build, the above markup is converted into an HTML table with one row and two columns.

Learn more about Inky markup from Foundation's instructions

The Panini templating language

With the help of Foundation's Panini templating language, you can add variable content, conditional statements, loops, and other familiar programming structures to email files.

For example, our default email theme uses Panini to retrieve email templates' repeating sections such as headers and footers. Below you can see an example of how to retrieve sections to a page.

Panini also lets you create page variables where you can save the content printed by tags. Page variables are defined at the beginning of the template as follows:

---
subject: '{OrderEmailTitle}'
---

{{> header }}

<wrapper class="Primary">
    <spacer size="10"></spacer>
        <container class="Block">
            <h1>{{ subject }}</h1>
                <p>
                    {{> greeting }}
                    {OrderEmailMessage}
                </p>
        </container>
    <spacer size="20"></spacer>
</wrapper>

Learn more about using Panini from Foundation's instructions