ProductMail - Responsive Email Template

this template support TemplateBuilder

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

3 easy steps for using Template Builder
Just type in your purchase code then start enjoy it!!

.1 Hover your name and select Download menu

HTML Structure

.2 Click link "Licence certificate and purchase code"

HTML Structure

.3 Copy your purchase code and paste here

HTML Structure

HTML Structure

Please, open any Text Editor. We prefer Coda if you own a Mac, Sublime Text if you own Windows.

When we encounter a snippet of code that deserves some ProductMail attention, we simply comment it. As example:

HTML Structure

In the example above, we've created a table holding Table Dividers. Pay attention to the Table Dividers that hold text or images, as you'd like to edit these. To modify any Table Divider that holds an image, simply replace the 1 images named 'button-learn-more.jpg, in folder called 'images'.

In fact, to change images, you don't even need to require any coding knowledge as you simply swap existing images.

When you encounter a Table Divider that holds text, you can simply delete it and type in whatever you like. Just be sure to never ever delete a single tag, as it may result in errors. Save your file when your done.

Note, this template is build with valid HTML and inline CSS. We used a lot of tricks to render it beautiful as possible in every Mail Client. It should work with any Mail Service that supports HTML Tags.

Changing Images

Changing images is really easy. Just open the folder called 'images' and replace them with yours. The Template should automatically change replace the images.

Responsive Coding

Please, open up the sample.html and resize your window. It's a clear working example of how Responsive design works. Allow us to explain what happens in the background.

E-mail Templates used to be static and limited. Lately, it's been possible to manipulate the width, colour, height and behaviour of any e-mail template based on what device you use with Media Queries. Media queries, for a basic developer, is not scary at all. Let's have a look:

Can you see what happens? Whenever your window is smaller than '640px', the table that holds the class of full-width decreases to '480px'. When your window getting resized even smaller to '479px', the table that hold the class of .myTable will get even smaller and the background-color will change to green.

This is what happens with all the code the write. I told you it's not so scary?

Campaignmonitor Support

You can use by login to your Campaign Monitor account and select a "Templates tab"(1) then click "Add a new template button"(2) and click "Import it now"(2) and don't forget to zipped the image folder before upload.

If you any problem that. I don't tell you about campaignmonitor in this document. you can goto website campaignmonitor support help documentation campaignmonitor

Mailchimp Support

Please, follow these steps to import any Template to MailChimp:

1. Go to and login.
2. Simply go to Create Campaign > Regular OI' Campaign. following to next step

3. Click 'Import options > Import to my templates' and choose your this Template from the desktop.

4. Simply click on upload and you're good to go!

Be sure to have all your images hosted on your own server. For example: ''

Here is a clear explanation of how to import a template:

Template Language: Getting Started with MailChimp’s Template Language:
Template Language: Custom Template Showcase:
Template Language: Creating Editable Template Styles:
Template Language: Working With Variant Selectors:
Template Language: Support:

HTML Structure

Sources and Credits

We've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing 'Metric responsive E-mail Template'. You may contact us here. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Go To Table of Contents