Template examples

This article has template code for common needs. Each example explains the code so you can adapt it. For how templates work, see Component templates. For all of EmailShepherd’s template syntax, see the template reference.

Add the subject line and preheader

People set an email’s subject line and preheader on the editor’s Settings tab. Some ESP connectors send them to your ESP separately. If your ESP needs them in the HTML instead, add them to the container component.

Add the preheader as the first thing after the opening <body> tag, inside an element that’s hidden so it doesn’t appear in the body of the email. The subject line usually goes in the <title> tag:

<head>
  <title>{{render_context.email.content.subject}}</title>
</head>
<body>
  <div style="font-size:0px;line-height:1px;mso-line-height-rule:exactly;display:none;max-width:0px;max-height:0px;opacity:0;overflow:hidden;mso-hide:all;">
    {{render_context.email.content.preheader}}
  </div>

  ...
</body>

Show content only in the editor preview or the export

Use render_context.render_mode to output something only in the email editor, or only in the exported email. For example, to hide ESP code that looks messy in the editor while keeping it in the export:

{% if render_context.render_mode == 'export' %}
  <!-- Only in the exported HTML -->
{% endif %}

Or to show a note in the editor that’s never sent:

{% if render_context.render_mode == 'editor_preview' %}
  <p>Only shown in the email editor.</p>
{% endif %}

Change content for the plain-text version

When EmailShepherd makes the plain-text version of an export, render_context.output_format is plaintext. Use it to output simpler content for plain text:

{% if render_context.output_format == "plaintext" %}
  <div>Plain-text content</div>
{% else %}
  <div>HTML content</div>
{% endif %}

Change spacing based on the component before

Use render_context.previous_component_instance to change a component depending on what comes before it. This headline adds extra space above itself only when it comes straight after a hero:

{% if render_context.previous_component_instance.component_name == 'hero' %}
  <div style="padding-top: 40px;">
{% else %}
  <div style="padding-top: 20px;">
{% endif %}
  <h1>{{headline}}</h1>
</div>

render_context.next_component_instance works the same way for the component after.

Change a component for one brand profile

Brand profiles can hide components and fields and change default values without any code, and design tokens can give each brand its own colors and fonts. When a brand needs something else, such as a different layout, check render_context.brand_profile.id in the template.

To find a brand profile’s ID, open it and look at the number at the end of the address in your browser, such as /brand_profiles/27/. Use the ID rather than the name, because it stays the same if the brand profile is renamed.

<div class="header">
  {% if render_context.brand_profile.id == 27 %}
    {% assign title_color = "#000000" %}
  {% else %}
    {% assign title_color = "#ffffff" %}
  {% endif %}

  <h1 style="color: {{title_color}};">{{headline}}</h1>
</div>

• {% if render_context.brand_profile.id == 27 %} checks whether the email uses brand profile 27.
• {% assign title_color = "..." %} stores the color to use in title_color.
• {{title_color}} outputs it.

Let people switch between themes

A theme setting lets people choose a design for each email, such as light or dark. Store the choice in a global field, then check it in your templates.

First, add an enum field to the container component with the Label Theme, the Liquid variable theme, the options light and dark, and the Default value light. See Add a field. People choose the theme in the editor’s Global fields section.

In the container component, output different styles for each theme:

<head>
  <style>
    body {
      {% if global_fields.theme == 'dark' %}
        background-color: #000000;
        color: #ffffff;
      {% else %}
        background-color: #ffffff;
        color: #000000;
      {% endif %}
    }
  </style>
</head>

Other components can check the theme in the same way. This button swaps its colors for the dark theme:

<table>
  <tr>
    <td>
      {% if global_fields.theme == 'dark' %}
        {% assign button_styles = "background-color: #ffffff; color: #000000;" %}
      {% else %}
        {% assign button_styles = "background-color: #000000; color: #ffffff;" %}
      {% endif %}
      <a href="{{button_url}}" style="{{button_styles}}">{{button_text}}</a>
    </td>
  </tr>
</table>

To offer different choices for each theme, such as different background colors, add a field for each theme and use Visible if so people only see the one for the theme they’ve chosen. See Show a field only when it’s needed.

Label	Liquid variable	Type	Visible if
Background color	light_background_color	Enum	global_fields.theme == 'light'
Background color	dark_background_color	Enum	global_fields.theme == 'dark'

<td style="background-color: {% if global_fields.theme == 'dark' %}{{dark_background_color}}{% else %}{{light_background_color}}{% endif %};">