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.
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:
Click the “Text” section to edit the subtitle text and add the tag in the 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.
After that, extract your index.html file into a folder you can work with. It should look something like this:
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.”
That will take you to your store settings page. In the menu, select “Settings” and then “saved templates.”
In the templates page, select “Import template.”
Your two options for adding an HTML template is to upload an HTML file or copy and paste the code.
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:
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:
Click the Paste in code option, give it a name, and copy and paste your code in the editor:
After that, press the “Import” button at the bottom of the page and that’ll take you to the edit page:
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.
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:
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.
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:
I sent myself a test email and it looks like:
Now your template is ready to use for your campaigns!
What we covered
- How to create a Postcards template and add Omnisend personalization tags.
- How to export a Postcards template.
- How to create a custom HTML template in Omnisend.
- How to edit the HTML template to make the necessary changes.