Templates and Branding
Every campaign, confirmation and automation email is drawn in one layout with your logo and colors. This page covers the layout's settings, the campaign templates on the Templates tab, and overriding Mailroom's Twig templates in a theme.
The email layout
The Email Design tab of Mailroom's settings sets the frame: your logo or your site's name at the top, a white card for the message, and a footer with the unsubscribe links.
| Setting | Label | Default | What it does |
|---|---|---|---|
branding.logo |
Logo | empty | An image URL, or a path on this site such as /user/images/logo.png. Empty prints your site's name in the header. |
branding.logo_width |
Logo Width (pixels) | 160 |
How wide the logo is drawn (16 to 600). Its height follows. |
branding.accent |
Accent Color | empty | Links, the confirmation button and the rule under the header in every email, and the buttons and links on Mailroom's public pages and signup box. Empty is teal (#1a6f83) in email, and on the pages your theme's own accent where it has one (Quark2 does), else teal. |
branding.background |
Background Color | #f4f5f7 |
What the card sits on. |
branding.text |
Text Color | #222222 |
The color of the message itself. |
branding.footer_text |
Footer Text | empty | A line or two under every message, such as why people are receiving it. Plain text. |
branding.postal_address |
Postal Address | empty | Printed at the foot of every message, branded or plain, and in its plain-text part. |
Colors are hex codes (#abc or #aabbcc); anything else is replaced by the default rather than printed, so a typo cannot break the email.
Important
Bulk mail law in many countries, the United States' CAN-SPAM among them, expects a real postal address on marketing email. Fill in Postal Address before your first campaign.
The plain layout
A campaign or automation email set to Plain leaves out the header, the card and the branding: white ground and your message, with the unsubscribe footer below. The Footer Text and Postal Address are still printed under that footer, and at the end of the plain-text part of every email, because the address is expected in every message.
Templates
A template is a starting point for campaigns: the subject, preheader, message and layout you keep retyping. A campaign copies a template when it is created and never reads it again, so changing or deleting a template never touches campaigns already written from it.
On the Templates tab:
- Press New template.
- Give it a name, a subject, a preheader, a message and a layout, the same fields as a campaign. Merge tags are checked the same way.
- Leave Offered when writing a campaign checked to offer it in the campaign editor.
- Save. The preview draws it through the real layout.
Start a campaign from this on a template opens a new campaign with its fields filled in. Through the API, pass template_id when creating a campaign.
Override the templates in your theme
Mailroom's templates are ordinary Twig files. Copy one into your theme's templates/ folder at the same path and your copy wins.
Email templates
| Template | What it is |
|---|---|
emails/mailroom-email-layout.html.twig |
The branded layout every email extends |
emails/newsletter-plain-layout.html.twig |
The plain layout |
emails/newsletter-campaign.html.twig, emails/newsletter-campaign.txt.twig |
A campaign or automation email, HTML and plain text |
emails/newsletter-confirmation.html.twig, emails/newsletter-confirmation.txt.twig |
The confirmation email |
The layouts share one contract, so a child template extends either without knowing which:
- Blocks:
title,preheader,contentandfooter, which the children fill; the branded layout also hasheader, for a copy that wants a different header without touching the rest. - Variables every email is given:
subject,site_name,site_url,store_url(the site's front page),email_layoutandt_prefix. A campaign addspreheader,content,campaign,eyebrow,unsubscribe_url,preferences_url,browser_urlandplain_layout; the confirmation addsconfirm_url,list_nameandsubscriber_email. - The footer text and postal address are printed after the
footerblock rather than inside it, so a child that replaces the footer still carries them.
Warning
Keep emails/newsletter-campaign.txt.twig if you override the campaign templates. Without a plain-text part, campaigns go out as HTML only, which spam filters score against, and the Health screen's Plain-text part check fails.
Page templates
The public pages and the signup box can be overridden the same way: newsletter-confirm.html.twig, newsletter-unsubscribe.html.twig, newsletter-preferences.html.twig, newsletter-message.html.twig and partials/newsletter-signup.html.twig. See Lists and signup forms.
Each of them includes partials/mailroom-accent.html.twig on its outer element, which hands the page the Accent Color when one is set. Keep the include in a copy, or set the color in your theme's stylesheet instead:
.mailroom { --mailroom-accent: #7c3aed; }