MyCashflow includes the default email theme MyCashflow 2018, which can be modified and customized to suit your online store's needs. This article explains how you can install the default email theme and use it as the basis for custom email themes.
The default email theme is modern and responsive, and its functionality has been tested thoroughly on various devices and email clients.
The default email theme is always available in the version settings. However, if you select the default theme built in the system, you will not be able to modify its layout and structure.
The default email theme also provides you with many useful tools for improving the layout. You can download a modifiable version of the default email theme and use it as a basis when creating an email theme to match your online store's brand.
Downloading and installing the default email theme
You can use the MyCashflow 2018 email theme as a basis for your own email themes. The theme includes the Foundation for Emails tool, which makes further development much easier.
Below, we show how you can download the default email theme, set it up for use as a basis for customization, and install it in your online store:
- Send the entire contents of the dist/ folder to the email theme folder you have created.
For sending the files, you can use the file browser, FTP tools (e.g. Filezilla) or the mycashflow-sync tool.
- Enable the email theme for the right version on the page in the online store's admin panel.
Now the default email theme has been enabled for the store version.
Customizing the default email theme
Requirements
Customizing the default email theme is possible only if you have the git version-control system and the npm package manager installed on your computer.
You can edit an email theme with any text editor, but for some editors, such as Visual Studio Code, there are extensions available that make it easier to work with HTML/SCSS, making use of autocomplete and code hints, among other things.
After having modified the default email theme, you must run the build function in the theme folder for the changes to 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 buildAfter 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 shown here. For testing the appearance of emails more accurately, you can enable the email theme in the online store's development version, for example.
Once the build is complete, you can send the updated files to the online store's file directory. You can do this with an FTP client or the mycashflow-sync tool, which is designed to facilitate making changes to the appearance of MyCashflow online stores.
Foundation for Emails
MyCashflow email templates use the Foundation for Emails framework, which makes it possible to implement the structure and layout of emails in a variety of ways.
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.
The Panini templating language
With the help of Foundation's Panini templating language, you can add alterable 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.
Alternatively, you can add parts to emails by using MyCashflow's {Helper} tag.
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
Using the mycashflow-sync tool with email themes
If you want to use the mycashflow-sync tool with the default email theme, you'll need to run the build and sync in different terminal windows.
Limitations
mycashflow-syncdoes not convert the email theme's SASS files to CSS. The conversion of SASS styles is handled with the email theme'sbuildcommand.- Browsersync does not work with email themes (the tool does not process Interface tags but displays them as such).
Here's how to use the mycashflow-sync tool for synchronizing email templates:
