How to Upload an Email Template in Drip

In this tutorial, we’ll be creating an email template in Postcards and using the code from that to create a custom email campaign in Drip.

Prerequisites

• A Designmodo account
• A Drip account
• A text editor that can open HTML files

Video Version

Steps

1. Create a template in Postcards and add Drip shortcodes

The first thing we need to do is create a template in the Postcards app and add Drip shortcodes to the template.

We need to add the shortcodes in this step because that will make the rest of the process easier. When we export the template with the shortcodes already added, then we can just copy and paste the code into the Drip editor without editing the code.

The two shortcodes that are required by law are the unsubscribe link and your address. They look like:

{{ unsubscribe_url }}

{{ inline_postal_address }}

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

The footer is where we’ll be adding our shortcodes.

Click the footer and that’ll open the menu on the right side. We’ll be editing the address and the email link values.

Click on “COLUMN #2” to make changes in the 2nd column. Find the text editor where the address is defined and change it to the address shortcode.

Next, scroll down until you find where the email is defined.

Change the text to “Unsubscribe” and the URL to the unsubscribe shortcode.

Next, press the green “Done” button.

Now we need to export this template. In the top right corner of the app, press the “Export” button and select “Download as zip.”

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

Download the zip and extract the index.html file somewhere you can work with. It should look something like this:

Now we have everything we need for the custom Drip email campaign.

2. Create a custom email campaign in Drip

In the Drip app, go to the campaigns page and click “New Campaign.” Enter a name and press “Create Campaign.”

On the next page, select the “Start From Scratch” option.

Then in the modal that opens, press “Text/HTML builder”

That’ll bring you to the Drip editor interface. Now it’s time to add our Postcards template code.

3. Add the Postcards template code to the Drip editor.

Open the index.html file you downloaded from the Postcards app in a text editor. I’m using Visual Studio Code so my file looks like:

Copy everything in this file.

In the Drip editor, select the “Switch to Custom HTML” option.

Press the continue prompt in the modal that pops up.

That’ll open a new editor that looks like:

Replace all the contents in this editor with the code from the Postcards template code.

If you press the “Preview” option at the top of the editor, Drip will show you what your email campaign will look like.

If you scroll down to the bottom, you’ll see the shortcodes got updated with the values set in your Drip account.

You can send yourself a test email to see how it’ll look in a real email.

You can press “Next” at the bottom right of the page to continue onto the next step.

If there are no errors, then your email campaign is ready to go!

I sent myself a test email and this is what it looks like in Gmail:

To learn more about personalization in your emails, check out this link.

To learn more about Liquid templating, check out these links: link 1, link 2.

What we covered

1. How to create a Postcards template and edit field values.
2. How to export a Postcards email template.
3. How to create a custom HTML email campaign in Drip.