Menu
 

Layouts

What are layouts?

There are two parts to your Customer.io emails: content & layout. The layout is everything except the body of your email. Your content, or message, fits into the layout.

Here’s an example of a Layout on its own, in the Email Layouts area of Customer.io:

In this case, the image header, the white wrapper, and the text at the bottom is the layout. The {{content}} tag indicates where future content will go. That content might change, but the layout will always stay the same.

If we use this layout for an email, the content we write in the email composer is inserted into that layout. Here’s the above example, now with content:

How to use a Layout

Using an existing layout

When you’re composing your email, you’ll see a toggle that allows you to check your email’s Layout & Preview:

Once in Preview mode, you can click Change Layout:

You’ll see the layouts available to you in the menu; select one to preview it. Once you’re happy, click Apply Layout.

That’s it!

Creating a new layout

If you need to create or import a new layout, head over to the Email Layouts area of the app. There, you can click Create Layout. Then you can either write new HTML or paste existing. Whatever you choose, the one piece of code that you must have in your layout is this:

{{content}}

Place it wherever you want your email content to go in the future.

Importing an existing layout

You can import already-created HTML layouts by pasting the code into our editor, and then adding your {{content}} tag where you’d like your content to go. You may have to do a bit of fiddling with tags— if it’s a Mailchimp layout, for example, you may need to adjust the tags (*|MC:SUBJECT|*, for example) to work with Customer.io. You can use a service like Litmus to test your emails in different clients.

Plaintext layouts

If you’d like a plaintext layout, all you need in the editor is {{content}} and nothing else:

Best practices

Here are some best practices and tips for how to create and manage layouts in Customer.io:

  • Layouts are for design, not content: Generally, we recommend that your content go in an email’s body, rather than in the layout. This gives you much more control over what you send to your customers, and prevents anyone getting incorrect content.

  • Try not to use Liquid in layouts: we can’t validate it the way we do when we send emails, so you might end up sending missing attributes to your customers.

  • Build re-usable layouts, ones that you can re-use across campaigns, rather than building them on a per-campaign basis.

  • You need an unsubscribe link; you can handle this yourself, or Customer.io can do it for you. If you want us to handle unsubscribes, just use this piece of code in your layout:

<a href="{ % unsubscribe_url %}" class="untracked">Unsubscribe Text</a>

Resources for creating layouts