SHARE
TWEET

Responsive E-mail Template

a guest Feb 26th, 2016 449 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  7. <title>Responsive e-mail template for Magento</title>
  8. <!--[if mso]>
  9. <style type=&rdquo;text/css&rdquo;>
  10.     td {
  11.         font-family: Helvetica, Arial, sans-serif;
  12.         color: #202020;
  13.     }
  14.     ul {
  15.         font-size:14px;
  16.     }
  17. </style>
  18. <![endif]-->
  19. <style type="text/css">
  20. .deviceWidth {
  21.     width: 650px;
  22. }
  23.  
  24. span.yshortcuts { color:#000; background-color:none; border:none;}
  25. span.yshortcuts:hover,
  26. span.yshortcuts:active,
  27. span.yshortcuts:focus {color:#000; background-color:none; border:none;}
  28.  
  29. .autofitkiller {
  30.     min-width:650px !important;
  31. }
  32.  
  33. @media only screen and (max-width: 649px)  {
  34.     body[yahoo] .deviceWidth {
  35.         width:100%!important;
  36.         min-width:300px;
  37.     }
  38.     body[yahoo] .full {
  39.         display:block;
  40.         width:100%!important;
  41.         min-width:280px;
  42.         padding-left: 0!important;
  43.         padding-right: 0!important;
  44.     }
  45.     body[yahoo] .autofitkiller {
  46.         display:none;
  47.     }
  48. }
  49.  
  50.  
  51. /*** RESETS ***/
  52. body,
  53. table,
  54. td,
  55. p,
  56. ul {
  57.     border-collapse:collapse;
  58.     mso-table-lspace:0pt;
  59.     mso-table-rspace:0pt;
  60. }
  61.  
  62. /*** MAIN STYLES ***/
  63. body {
  64.     margin:0;
  65.     padding:0;
  66.     width:100%;
  67.     font-family:Helvetica,Arial,sans-serif;
  68.     font-size:16px;
  69.     line-height:1.33em;
  70.     color:#202020;
  71.     -webkit-font-smoothing:antialiased;
  72.     background-color:#ffffff;
  73. }
  74.  
  75. .autofitcell {
  76.     font-size:1px;
  77.     line-height:1px;
  78. }
  79.  
  80. .defaultpadding {
  81.     padding:20px;
  82. }
  83.  
  84. /*** TYPOGRAPHY ***/
  85. h1 {
  86.     font-size:18px;
  87.     text-transform:uppercase;
  88. }
  89.  
  90. h2 {
  91.     font-size:17px;
  92.     color:#808080;
  93.     text-transform:uppercase;
  94. }
  95.  
  96. p {
  97.     padding:0px;
  98.     margin:0;
  99.     font-size:16px;
  100.     line-height:1.33em;
  101. }
  102.  
  103. ul {
  104.     margin:20px 0 0 20px;
  105.     padding:0; 
  106.     font-size:16px;
  107.     line-height:1.33em;
  108. }
  109.  
  110. /*** CALL TO ACTION ***/
  111. .buttondiv {
  112.     margin:20px 0;
  113.     text-align:center;
  114. }
  115.  
  116. .button {
  117.     background:#63ba30;
  118.     background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzYmEzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MzlkMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
  119.     background:-moz-linear-gradient(top,#63ba30 0%,#539d28 100%);
  120.     background:-webkit-linear-gradient(top,#63ba30 0%,#539d28 100%);
  121.     background:linear-gradient(to bottom,#63ba30 0%,#539d28 100%);
  122.     display:inline-block;
  123.     width:100%;
  124.     font-weight:bold;
  125.     line-height:48px;
  126.     text-decoration:none;
  127.     text-align:center;
  128.     color:#ffffff;
  129.     -webkit-text-size-adjust:none;
  130. }
  131. </style>
  132. </head>
  133. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix">
  134.     <!-- CONTAINER -->
  135.     <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  136.         <tr>
  137.             <td width="100%" valign="top" bgcolor="#ffffff">
  138.  
  139.                 <!-- HEADER: LOGO -->
  140.                 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
  141.                     <tr>
  142.                         <td width="100%" align="center" valign="middle">
  143.                             <img src="{{PUT YOUR LOGO HERE}}" alt="{{var store.getFrontendName()}}">
  144.                         </td>
  145.                     </tr>
  146.                 </table>
  147.  
  148.                 <!-- HEADER: AUTOFIT KILLER - DO NOT REMOVE -->
  149.                 <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
  150.                     <tr>
  151.                         <td height="1" class="autofitcell">
  152.                             <img src="{{skin url="images/email/email-autofit-killer.gif"}}" width="650" height="1" class="autofitkiller" /> <!-- MAKE A 650x1 TRANSPARENT GIF -->
  153.                         </td>
  154.                     </tr>
  155.                 </table>
  156.                 <!-- END HEADER -->
  157.  
  158.                 <!-- CONTENT -->
  159.                 <table width="650" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
  160.                     <tr>
  161.                         <td class="defaultpadding"> <!-- USE THIS CLASS TO ADD PADDING TO THE CONTENT -->
  162.  
  163.                             <!-- MESSAGE -->
  164.                             <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  165.                                 <tr>
  166.                                     <td>
  167.                                         <h1>Hi {{htmlescape var=$customer.name}},</h1>
  168.  
  169.                                         <h2>Thank you for shopping with us!</h2>
  170.  
  171.                                         <p>
  172.                                             {{YOUR MESSAGE HERE}}
  173.                                         </p>
  174.                                     </td>
  175.                                 </tr>
  176.                             </table>
  177.  
  178.                             <!-- ORDER DETAILS -->
  179.                             <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  180.                                 <tr>
  181.                                     <td valign="top" colspan="2"> <!-- NOTICE THE COLSPAN -->
  182.                                         <h2>Your items</h2>
  183.                                         {{layout handle="sales_email_order_items" order=$order}}
  184.                                     </td>
  185.                                 </tr>
  186.                                 <tr>
  187.                                     <td valign="top" colspan="2"> <!-- NOTICE THE COLSPAN -->
  188.                                         <h2>Payment</h2>
  189.                                         {{var payment_html}}
  190.                                     </td>
  191.                                 </tr>
  192.                                 <tr>               
  193.                                     <td valign="top" class="contentcell full"> <!-- USE FULL CLASS TO COLLAPSE CELLS IN SMALL DEVICES -->
  194.                                         <h2>Shipping address</h2>
  195.                                         {{var order.getShippingAddress().format('html')}}
  196.                                     </td>
  197.                                     <td valign="top" class="contentcell full"> <!-- USE FULL CLASS TO COLLAPSE CELLS IN SMALL DEVICES -->
  198.                                         <h2>Shipping method</h2>
  199.                                         {{var order.shipping_description}}
  200.                                     </td>
  201.                                 </tr>
  202.                             </table>
  203.  
  204.                             <!-- MORE INFO -->
  205.                             <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  206.                                 <tr>
  207.                                     <td valign="top">
  208.                                         <h2>Attention!</h2>
  209.                                         <ul>
  210.                                             <li>{{YOUR LIST ITEMS HERE}}</li>
  211.                                         </ul>
  212.  
  213.                                         <!-- INCREDIBLE BUTTON MARKUP -->
  214.                                         <div class="buttondiv">
  215.                                             <!--[if mso]>
  216.                                             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{store url="customer/account/"}}" style="height:48px;v-text-anchor:middle;width:300px;" stroke="f" fillcolor="#606060">
  217.                                             <w:anchorlock/>
  218.                                             <center>
  219.                                             <![endif]-->
  220.                                             <a href="{{store url="customer/account/"}}"
  221.                                             class="button">GO TO ACCOUNT</a>
  222.                                             <!--[if mso]>
  223.                                             </center>
  224.                                             </v:rect>
  225.                                             <![endif]-->
  226.                                         </div>
  227.                                     </td>
  228.                                 </tr>
  229.                             </table>
  230.  
  231.                         </td>
  232.                     </tr>
  233.                 </table>
  234.                 <!-- END CONTENT -->
  235.  
  236.                 <!-- FOOTER -->
  237.                 <table width="650" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
  238.                     <tr>
  239.                         <td class="defaultpadding"> <!-- USE THIS CLASS TO ADD PADDING TO THE CONTENT -->
  240.  
  241.                             <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  242.                                 <!-- PHONE -->
  243.                                 <tr>
  244.                                     <td align="center">
  245.                                         <a href="tel:{{var store_phone}}">
  246.                                             {{var store_phone}}
  247.                                         </a>
  248.                                     </td>
  249.                                 </tr>
  250.  
  251.                                 <!-- MAIL -->
  252.                                 <tr>
  253.                                     <td align="center">
  254.                                         <a href="mailto:{{var store_email}}">
  255.                                             {{var store_email}}
  256.                                         </a>
  257.                                     </td>
  258.                                 </tr>
  259.  
  260.                                 <!-- ADDRESS -->
  261.                                 <tr>
  262.                                     <td align="center">
  263.                                         <address>
  264.                                             {{config path="general/store_information/address"}}
  265.                                         </address>
  266.                                     </td>
  267.                                 </tr>
  268.                             </table>
  269.  
  270.                         </td>
  271.                     </tr>
  272.                 </table>
  273.                 <!-- END FOOTER -->
  274.  
  275.             </td>
  276.         </tr>
  277.     </table>
  278.     <!-- END CONTAINER -->
  279. </body>
  280. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top