Power Up Your 17 Hats Email Design With Mailchimp!

How to use Mailchimp email code. How to create custom email templates for your 17hats outgoing emails.

Here at Tickyboom we use 17Hats to manage all the day to day business.

17Hats is fantastic at helping us run our business, and make sure we can keep track of everything. One of the things that 17Hats does is allow you to send emails from your dashboard. This article will help you make some sweet looking email designs that are fully branded with your company info – and show of your creative style! All you have to do is sign up for MailChimp, and we will show you the rest from there!

Step 01 – Go Bananas!

Power Up Your 17 Hats Email Design With Mailchimp! 1

The first step is to sign up for a MailChimp account. Once you have that done, click on ‘Templates’ from the upper left navigation. Here you will see your email templates, and this is where the magic happens. If you have first signed up, you should have one email template provided by MailChimp. Whatever the case, you can click on ‘Create Template’ to create a brand new one. As you will see there are many templates to start you off. Choose a starter template and get to designing your email. This will be the step that takes you the longest, so have fun, this post will be waiting for you.

Step 02 – Save Your Design

Power Up Your 17 Hats Email Design With Mailchimp! 2

After you are done creating your amazing template on Mailchimp, click ‘Save and Exit’ in the bottom right. This will take you back to your templates list, and you should now see your recently saved template at the top. Easy peasy right?

Power Up Your 17 Hats Email Design With Mailchimp! 3

Step 03 – Export DeCode!

Power Up Your 17 Hats Email Design With Mailchimp! 4

In the table area where your email template is, scan over to the right, and you will see a grey button with ‘Edit’ and a down caret (triangle) next to it. Click the caret, and you see ‘Create Campaign,’ ‘Preview,’ ‘Export as HTML,’’ Share,’ ‘Replicate.’ You want to choose ‘Export as HTML.’ Don’t worry about the warning, all that is saying is that if you plan to re-import it, the styling may not work. You aren’t doing that so click on ‘Export Template.’ Getting closer!

Step 04 Hug Your Code

Power Up Your 17 Hats Email Design With Mailchimp! 5

After you click on ‘Export Template’ go to the file, you downloaded. You can open the file with anything from Text Edit, to Coda. We use Coda, as it is a little better at handling code. But don’t worry about that. The key to this step is you are stripping out two chunks of code before you paste the template into your 17Hats email template.

The first chunk you are taking out is the MC Subject text. What this is, is a bit of code Mailchimp uses to give you control over the Subject line text. Since you aren’t using Mailchimp to send your email, it will look borked. So, look for this bit of code near the top:

Power Up Your 17 Hats Email Design With Mailchimp! 6
Delete this line of code!

Then highlight and delete. Buh Bye!

The second chunk of text we are looking for is the MC Preview Text. Like the code above, this is Mailchimps way of giving you control over what your recipient will see in the mail preview. Since you aren’t using MailChimp to send an email, the code needs to go bye-bye or else there will be brokenness. Scroll down a bit and look for the following block of text:

Power Up Your 17 Hats Email Design With Mailchimp! 7
Delete this chunk of text!

Highlight and delete. Buh Bye! That is all you will need to do. Click save, and then after the document saves you will want to select all, then copy all of what you have highlighted. You are so close to Email Design bliss.

Step 05 17Hats Love

You have your expertly crafted email design as code, you have stripped out all the MC specific code, and have it all copied and ready to paste. You will then go to your 17Hats account, log in, and then go to ‘Documents & Emails’ which is the icon with the two papers in the upper right next to your logo. Once you are there, you will see all of your email templates to use when communicating with your clients. Click on an email template to edit it, and you will see your bland plain text editor with the content you either input or that 17Hats provides as a starter template. If you want to still use that wording, then I would copy everything and paste into a text document. (You will need to go back and copy the email code again from step 4 as you lost that data when you copied the 17Hats content.) You are using that as reference for wording and token use when you apply the new email design. Ok, ready for the magic?

Step 06 Import Dat Code

Power Up Your 17 Hats Email Design With Mailchimp! 8

To recap, you are in a 17Hats email template, you have copied the content for reference (tokens and what you are saying) into a text document, and then went and re-copied the new from Mailchimp email design code. So much copying and moving around, right? It will be worth it! Now, click on the two sideways triangles in your TinyMCE Editor(Where you choose font sizes, etc.). Boom, now you are in the code view. Select all of the code that is present now, and paste in the new email design code. What just happened is that you selected all of the 17Hats systems and overwrote it with the latest design you made in Mailchimp. Now, click those triangles again and you will see your email design in all it’s glory, sort of. 17Hats editor makes you see any padding or tables present, so your design will look a little odd, but never fear, that is only that way in the editor, and when you send a live email, it will seem like how you designed it.

Step 07 Update Content + Test

Power Up Your 17 Hats Email Design With Mailchimp! 9

Go ahead and update the data as you normally would by using the text document as a reference for what you want to say in the email, and what tokens to use. Then, click ‘Save’ once you are done. Boom, overtime that automated email gets sent out, it will be all designed up, and impressing your clients. To make sure all is good, send your self a test email, and you will see what your client sees. Fun, right?

Don’t have 17Hats yet?

We think 17Hats is the bees-knees for managing your business from collecting leads to bookkeeping. If you don’t have it yet, let us extend a discount to you by following our affiliate link: https://17hats.com/card/pwfdxbrnfz – This link will get you a nice discount. Consider it a gift from us. Enjoy rocking the day!

Share this article

Subscribe to our Design, Art, Life Email Newsletter

Related ish...

Design Blog     Studio (Coming Soon)

Tickyboom is a graphic design studio that specializes in illustration, brand identity, and web design. We are a husband and wife duo that love to equip others to flourish through design.