1. Home
  2. Postcards
  3. Integrations
  4. How to Upload an Email Template in Omnisend

How to Upload an Email Template in Omnisend

In this tutorial, we’ll be creating a custom HTML template in Omnisend using the HTML code from a Postcards template.

Prerequisites

  • An Omnisend account
  • A Designmodo account
  • A text editor that can open HTML files

Steps

1. Create a Postcards template with Omnisend personalization tags

The first thing we need is a template created in Postcards with personalization tags added to it.

We want to add Omnisend’s personalization tags in this step because the other option is to add it in the code so adding it in the Postcards interface is easier.

In the Postcards app, I’ve created a template that’s made up of a Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1.

How to Upload an Email Template in Omnisend

The personalization tag we’ll be adding is the recipient’s first name and it looks like:

[[contact.first_name|default:’subscriber’]]

This tag will be replaced by the contact’s first name or if that data isn’t there, then the default value of ‘subscriber’ will be used instead.

We’ll be adding this tag in the Header section.

Click the Header image and that’ll open up a menu on the right-hand side:

Create a Postcards template with Omnisend

Click the “Text” section to edit the subtitle text and add the tag in the text editor:

Text editor

This is the only change we need to make. Now press “Done” and press “Export” in the top right corner and then press “Download as zip.”

Make sure you have the “Host images online” option selected so you don’t have to download and deal with the images yourself.

Download as zip

After that, extract your index.html file into a folder you can work with. It should look something like this:

Index.html file into a folder

2. Create an HTML template in Omnisend

In your Omnisend dashboard, click your profile icon in the top right corner and then click “Store settings.”

Create an HTML template in Omnisend

That will take you to your store settings page. In the menu, select “Settings” and then “saved templates.”

Store settings

In the templates page, select “Import template.”

HTML template Omnisend

Your two options for adding an HTML template is to upload an HTML file or copy and paste the code.

Import the HTML file

To import the HTML file, it’s as you expect. Click the option and then name your template and find your file. It should look something like:

Option

To paste in the code, open your index.html file in a text editor. I’m using Visual Studio Code so my file looks like:

Visual Studio Code

Click the Paste in code option, give it a name, and copy and paste your code in the editor:

Paste in code option

After that, press the “Import” button at the bottom of the page and that’ll take you to the edit page:

“Import” button

3. Edit the template

A template in Omnisend is made up of four parts: the preheader, the main content (our Postcards template), the footer, and the badge.

In the main content you may have some “p;” text where it shouldn’t be. This is because when the template was imported into Omnisend, they replaced the “  ” text which is a non-breaking space for HTML parsing.

To fix this, we have to go through the HTML code in the Omnisend editor and replace the “p;” text with “  .”

Click the main template area on the left side to open the text editor.

Click the main template

Go through the code until you find where the “p;” is set. They’re in the menu and footer in this template. Replace the “p;” with “  ” and that’ll fix this issue.

Also if your tag has quotes in it, when it gets imported they change to something different:

Edit the template Omnisend

You have to go through your code to find this section and then replace those new characters with the original quotes.

To make changes to the footer, click on it to open up the footer options on the right-hand side.

Footer

Whatever changes you want to make you can make. You can also click on the arrows when hovering over the footer to see different layout styles for it.

For the badge, only paying users can remove this.

After you’re done making changes, press “Save and exit” in the top right corner of the page.

You can also send yourself a test email by pressing “Send test” in the bottom right corner of the main options page:

Save and exit

I sent myself a test email and it looks like:

Test email Omnisend

Now your template is ready to use for your campaigns!

What we covered

  1. How to create a Postcards template and add Omnisend personalization tags.
  2. How to export a Postcards template.
  3. How to create a custom HTML template in Omnisend.
  4. How to edit the HTML template to make the necessary changes.
Updated on June 6, 2023
Was this article helpful?

Related Articles