API tools faq
paste
Guest User

Responsive E-mail Template

a guest
Feb 26th, 2016
673
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.78 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
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!