Metorik Docs
Email Design & Builder

Engage Email Layouts

When creating an Engage email, you can select a  layout to use for the design. You then write the message, and we'll insert it into the layout you choose.

Metorik includes a couple basic layouts (with many more to come) that you can use:

You can also choose Custom HTML to write the entire email in HTML.

However, you can also create your own layouts using basic HTML and CSS. Layouts are similar to choosing Custom HTML, but the great thing about layouts is that you can create one and then use it across many emails.

Then if you need to make change to your custom layout, you just need to edit it once and all emails using the layout will be updated to.

Layouts are also a great way to write custom HTML/CSS to improve the design of your emails, but then when it comes to writing the message for each Engage email, you can just use our simple message editor:

You should find this much easier than editing an entire email in HTML every time, and your non-technical team members will be able to compose and edit Engage emails without having to edit the HTML or CSS.

Custom Layouts

To get started with a custom layout, go to the layouts page. You can then copy a Metorik layout to use as a starting point:

Or you can click the New Layout button to create a custom layout from scratch.

You'll then be taken to the Layout Builder to build your custom layout:

You can give it a name (just for you - customers won't see this) and choose who can edit the layout (just you or other editors/admins on your team).

For composing the layout, you should use HTML and CSS to build the email layout. CSS will automatically be inlined, so you can edit the styles in the <head> area and we'll make sure they get applied properly in email clients.

However, keep in mind that composing HTML emails is different to HTML websites. We recommend this guide on Using CSS in HTML Emails and the Can I email tool for checking what HTML and CSS is allowed.

Importantly, your email will also need to include 2 Metorik variables:

  • {message} - Where you want the Engage email message to be inserted in your layout.

  • {unsubscribe_link} - A one-click unsubscribe link for customers to use when they want to unsubscribe from your emails.

There are also a number of other variables at your disposal, such as {email_subject}, {store_logo}, etc., which can be inserted using the Insert Variable button:

You'll then be able to use your custom layout when building an Engage automation.

Preview Text

When creating an Engage email, you'll find an input for the email's 'Preview Text'. This text is normally then shown as the 'preview text' next to the subject name in your customer's email app.

If you've created a custom layout, there's an extra step you need to take in order for this Preview Text value to be used in your emails. You'll need to insert the {email_preview_text} variable towards the top of the email.

Normally you'll want to hide this text from the actual email though, so we recommend adding this code to the top of your layout right after the opening <body> tag:

<span class="preheader">{email_preview_text}</span>

And then to hide it from the email, you could add this CSS to the top of the layout in the <head> area where the other CSS rules are:

.preheader {
    display: none !important;
    visibility: hidden;
    mso-hide: all;
    font-size: 1px;
    line-height: 1px;
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
}

Include a web version of your email for recipients by adding the {view_email_link} variable to your layout. This creates a link customers can click to view the email in their browser instead of their email client.

Most of Metorik's built-in templates already include this variable, but if you're creating a custom layout, you can add it wherever you'd like the link to appear, such as in the header or footer.

Example usage:

<a href="{view_email_link}">View in browser</a>
Was this helpful?
Was this helpful?