In this example, we'll be customizing a template using css.

First you'll navigate to the email templates editor: Marketing > Email Templates

Then you'll Select the template you want to edit, or create a new one.

NOTE: Always save a copy of the original code somewhere when making changes. This way you can easily revert back to default if you decide you don't want it customized.

You will see a basic, general WYSIWYG editor on the email template area.

At first it looks like a lot to take in, but let's break them down.

  More Detailed Email Template:

You can add custom images as above to link to social media profiles. Simply upload the icons of your choice into your store's files and then link the images such as:

 <a href="http://facebook.com/profile"><img url="http://mystore.com/image/shared/file.jpg"></a>

Keep in mind that any images in an email template will have to contain your domain. For example:

• <img src="http://yourdomain.com/images/shared/sharedimage.jpg">

This way the email can pull the correct image. 

Merge Codes Used In Email Templates

<!--ORDERITEMLAYOUTSTART-->

insert merges and html here to be repeated for each item

<!--ORDERITEMLAYOUTEND-->

• How To Customize Email Templates
• 244
• 201903460
• ##ITEMMFG##
• ##ITEMMFGPARTNR##
• ##QTY##
• ##ITEMDESC##
• ##ITEMPRICE##
• ##ITEMTOTAL##
• /how-to-customize-email-templates.aspx
• ##ITEMIMAGEURL##

Example Layout:

<style>
.Product_List{
text-align: center;
border: none;
}

td{
border: none;
}

</style>

<table class="Product_List" align="center">
    <tbody><tr>
        <td>Image</td><td>ItemName</td><td>Item#</td><td>Qty</td><td>Item Price</td><td>Item Total</td>
    </tr>
        <!--ORDERITEMLAYOUTSTART-->
    <tr>
       <td width="150"><a href="http://danieltest.americommerce.com/how-to-customize-email-templates.aspx"><img src="http://<yourstore##ITEMIMAGEURL##" width="100" border="0" height="100"><br>How To Customize Email Templates</a></td><td>201903460</td><td>##QTY##</td><td>##ITEMPRICE##</td><td>##ITEMTOTAL##</td>
    </tr>

        <!--ORDERITEMLAYOUTEND-->
</tbody></table>

Here's the resulting table from the code above.

This table row will repeat for each item, and contain different information according to each item.

The Image and blue text are both links to the product.

More detailed break-down of the code...

1. We included some basic CSS to show what kind of control you have.

<style>
.Product_List{
text-align: center;
border: thin #999999 solid;
}

td{
border: thin #999999 dotted;
}

</style>

2. We created the opening part of a table. This is essentially the part of the table that will not duplicate.

<table class="Product_List">
<tbody><tr>
<td>Image</td><td>ItemName</td><td>Item#</td><td>Qty</td><td>Item Price</td><td>Item Total</td>
</tr>

3. We constructed a new row in the table that will repeat for each product in the list.

Everything between <!--ORDERITEMLAYOUTSTART--> and <!--ORDERITEMLAYOUTEND--> will be processed for each item.

If the order has 5 unique items, then whatever is between those tags will be processed 5 times. 

<!--ORDERITEMLAYOUTSTART-->
<tr>

<td width="150"> <a href="http://yourdomain.com//how-to-customize-email-templates.aspx">
<img src="http://yourdomain.com/##ITEMIMAGEURL##" width="100" border="0" height="100">

<br/>How To Customize Email Templates</a></td>

<td>201903460</td>

<td>##QTY##</td>

<td>##ITEMPRICE##</td>

<td>##ITEMTOTAL##</td>
</tr>

<!--ORDERITEMLAYOUTEND-->

4. We closed the table.

NOTE: You can construct your email in any way that you choose. It does not have to be done with a table.

This is the main thing you MUST have for this to work...

<!--ORDERITEMLAYOUTSTART-->

Insert merges and html here to repeat for each item

<!--ORDERITEMLAYOUTEND-->