Create a Base Template - SMB

Overview

Before you hit the ground running with Klaviyo, we recommend creating one or more base templates that you can use as a foundation for all your marketing emails. A useful base template, for example, might include a custom template header featuring your logo, a navigation button bar, etc.

Creating a New Base Template

First, navigate to the Email Templates tab in your account. Then, click Create Template. In the template library, we will prompt you to choose a layout as a starting point. You can select a pre-designed layout in the Themed tab, select a blank layout in the Basic tab if you have a specific design in mind, import a custom HTML template in the Import tab, or edit one of your existing templates in the My Templates tab. To see a full preview of each option, hover over the template thumbnail and click the magnifying glass icon.

If you aren't sure how you'd like to structure your template, we recommend browsing the themed templates as a starting point. You can always change these layouts to suit your needs.

You'll then be prompted to name your template. Name it something descriptive, like "Product Release Template," and click Create Template.

Once your template is created, you'll be taken to the template editor, where you can use a number of drag-and-drop blocks to customize the appearance of your emails.

Preheader Text

Preheader text, sometimes called preview text, is the first component of any email. You will want to change the preheader text for each individual email because it is displayed in the inbox preview. However, it's good practice to place a text block at the top of every base template to remind yourself to add preheader text.

The preheader text is the first few lines of text in an email, so you don't necessarily have to use a text block to display your preview text. You can also use a split block or a table, like in the example above.

If you only want your preheader text to be displayed in the inbox preview -- and not in the template itself -- you can change the text color to be the same color as the content background. If you have white text on a white background, for example, the preheader text will not be visible within the email.

Web View Link

You'll want to add a web view link if you'd like recipients to be able to view your email in a separate window in their browser, not within their ISP (i.e. Gmail, Yahoo, etc.).

To add a web view link, simply choose "Webview" from the Insert Tag drop-down in the text editor.

Learn more

Header Bar

The header of your template is a good place for common elements such as a logo and a navigation bar. Once it’s set up the way you’d like, save your header bar to easily reuse it across all your templates.

Below your preheader text block, you can drag in a link/header bar block. We recommend a logo that's no more than 150px tall to avoid pushing the content of your email too far below the fold.

Your header bar should only have 3-4 links to avoid overcrowding. The header/link bar offers 4 common header layouts that you can select from (shown below). To make your header and navigation bar a solid color, make the block background and the button colors to the same.

Body Content

Depending on the type of template you're building, you'll likely have common elements that you'll want to reuse. For example, you may have a headline and hero image in every product release email you send.

Headline and Hero Image

Headlines and hero images can be added to a template by dragging in text and image blocks. Typically, these are the first two elements in the body of an email. A hero image should span the content width of your template and, depending on your preferences, you can use any of the <h> tags for your headline.

Beneath your headline and hero image will be the body text of your email. You can make this as short or lengthy as you'd like, depending on the purpose of the template.

Learn more

Product Block

Product blocks are a great tool for displaying items from your product catalog in your email templates. Rather than manually grabbing an image from your site along with the link, description, price, etc., you can use a product block to display this information dynamically, since Klaviyo syncs this from your ecommerce platform.

You are also able to use the product block to display only items from certain categories (i.e. Men's), as well as trending, bestselling, and recommended products.

Add Columns

There are two ways to add columns to an email template:

Drag in a split block to create two columns

Drag in an "Add Columns" block to create two or more columns; if you choose this option, a dialog box will prompt you to choose the number and layout of the columns you'd like to add

Split Block:

Add Columns Block:

Calls to Action

Buttons will be your main CTAs. They’re highly customizable, and you're able to edit the text, styling, color, other aspects of their appearance in the Block Styles tab.

When using buttons, be careful not to go overboard. Too many calls to action can confuse the message of your email and lead to lower conversion rates. In general, it is best to have one main call to action.

Footer

Like your header, you may also want to save the footer of your template to easily reuse it in all your emails. The footer comes at the end of your template and is a good place to add social links, more information about your organization, and an unsubscribe link.

Social Links

To add social links, drag a "Social Links" block into the footer of the template. You can then choose from our built-in icons or upload your own. If you have a set of social icons you use on your website, this is a great place to reuse them.

Once you've added all your social link buttons to your social link bar, input the correct URL for each.

Navigation Bar (Optional)

If you choose to add a navigation bar to the footer of your email, it should either reflect the navigation bar in your header or provide additional links. Since you should only have 3-4 links in your header navigation bar, a footer navigation bar can be a good place to put overflow links.

To add one to your template, follow the steps outlined above for a header navigation bar.

Unsubscribe and Manage Preferences Link

The CAN-SPAM Act legally requires all organizations to include an unsubscribe link in their marketing emails. People typically look for these in the footers of emails, so you should make these links easy to find (otherwise recipients might mark your emails as spam instead).

If you also include a manage preferences link, you can give recipients the option to change their email preferences rather than unsubscribe completely. For example, someone may want to change their email frequency from daily to weekly rather than stop receiving emails from you altogether.

You can find both an unsubscribe and manage preferences tag in the Insert Tag drop-down in the text editor.

Organization Info

The CAN-SPAM Act also legally requires all organizations to include their address information in their marketing emails. You can use the {{ organization.name }} and {{ organization.full_address }} tags to include this information in the footer of your template.