A continuación vamos a compartir los mails que se envían a los clientes en el transcurso de los diferentes estados de las órdenes y del registro de usuario. Se configuran desde “Configuraciones > Emails”.
- Carritos Abandonados: Se envía a los clientes cuando abandonan sus compras en tu tienda.
- Activación de cuenta: Se envía a los clientes cuando crean una cuenta en tu tienda, para activarla.
- Cambio de contraseña: Se envía a los clientes registrados cuando quieren cambiar la contraseña de sus cuentas en tu tienda.
- Bienvenida: Se envía a los clientes cuando activan sus cuentas en tu tienda.
- Cancelación de compra: Se envía a los clientes cuando sus compras se cancelan.
- Confirmación de pago: Se envía a los clientes cuando el pago de sus compras se acredita.
- Confirmación de compra: Se envía a tus clientes cuando hacen una compra en tu tienda.
- Confirmación de envío: Se envía a tus clientes cuando confirmás el envío de su pedido.
Carritos Abandonados
Text
Hola {{ cart.contact_name }}. Guardamos tu carrito en {{ store_name }} y te está esperando.
Estos son los productos que habías agregado:
{% for product in cart.contents %}
{{product.quantity}} {{product.name}}
{% endfor %}
¡Podés completar tu compra! Hacé click en el siguiente link:
{{ cart.abandoned_checkout_url }}
Saludos,
{{ store_name }}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Todavía podés hacer tu compra</h1>
<p> Hola {{ cart.contact_name }}. Guardamos tu carrito en {{ store_name }} y te está esperando. Estos son los productos que habías agregado:</p>
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding-top: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-bottom: 1px solid #e8e8e8;">
{% for product in cart.contents %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
<strong>{{product.name ~ product.variationName}}</strong> x <small>{{ product.quantity }}</small>
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
<strong>{{ product.priceFormat }}</strong> <small>cada uno</small>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<p>
<strong>¡Podés completar tu compra!</strong> Hacé click en el siguiente botón:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ cart.abandoned_checkout_url }}" style="height:26px;v-text-anchor:middle;width:180px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Completar compra</center>
</v:roundrect>
<![endif]-->
<a href="{{ cart.abandoned_checkout_url }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Completar compra</a>
</div>
</td>
</tr>
</table>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no creaste ningún carrito en nuestro sitio, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Activación de cuenta
Text
Hola {{contact_name}}, hacé click en el siguiente link para activar tu cuenta:
{{ url }}
Saludos,
{{store_name}}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Activá tu cuenta en {{ store_name }}</h1>
<p>Hola {{contact_name}}, este es el último paso para activar tu cuenta.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ url }}" style="height:26px;v-text-anchor:middle;width:220px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Activá tu cuenta</center>
</v:roundrect>
<![endif]-->
<a href="{{ url }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;mso-hide:all;">Activá tu cuenta</a>
</div>
</td>
</tr>
</table>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no creaste una cuenta en nuestro sitio, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Cambio de contraseña
Text
Vas a cambiar tu contraseña en {{ store_name }}
Hola {{contact_name}}, para cambiar tu contraseña hacé click en este link:
{{ url }}
Saludos,
{{store_name}}
* * *
Si no solicitaste un cambio de contraseña, por favor desconsiderá este e-mail.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Vas a cambiar tu contraseña en {{ store_name }}</h1>
<p>Hola {{contact_name}}, para cambiar tu contraseña hacé click en este botón:</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ url }}" style="height:26px;v-text-anchor:middle;width:180px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Cambiar contraseña</center>
</v:roundrect>
<![endif]-->
<a href="{{ url }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Cambiar contraseña</a>
</div>
</td>
</tr>
</table>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no solicitaste un cambio de contraseña, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Bienvenida
Text
Hola {{ customer.name }}. ¡Ya creaste tu cuenta en {{ store_name }}!
En tu próxima compra vas a poder usar tu cuenta y ahorrarte tiempo al tener todos tus datos registrados.
Saludos,
{{ store_name }}
* * *
Si no creaste una cuenta en nuestro sitio, por favor desconsiderá este e-mail.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Te damos la bienvenida a {{ store_name }}</h1>
<p>Hola {{ customer.name }}. ¡Ya creaste tu cuenta!</p>
<p>En tu próxima compra vas a poder usar tu cuenta y ahorrarte tiempo al tener todos tus datos registrados.</p>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no creaste una cuenta en nuestro sitio, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Cancelación de compra
Text
Hola {{contact_name}}, tu orden fue cancelada
{% if reason == 'customer' %}Cancelamos tu orden #{{order.id}} como pediste.{% elseif reason == 'inventory' %}Tuvimos que cancelar tu orden #{{order.id}} porque no tenemos el stock suficiente para completarla.{% elseif reason =='fraud' %}Tuvimos que cancelar tu orden #{{order.id}} porque sospechamos que es fraudulenta.{% elseif reason =='expired' %}}Cancelamos tu orden #{{order.id}} porque expiró.{% else %}Tuvimos que cancelar tu orden #{{order.id}} por razones ajenas a la empresa.{% endif %}
{% if payment_status == 'voided' %}No te hagas problema, que anulamos tu pago.{% elseif payment_status == 'refunded' %}No te hagas problema, que te devolvimos el dinero en su totalidad.{% endif %}
Ante cualquier inquietud, no dudes en responder este mensaje.
¡Estamos a tu disposición!
Saludos,
{{store_name}}
* * *
Si no hiciste esta compra o simplemente estabas probando nuestro sitio, por favor desconsiderá este e-mail.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Hola {{contact_name}}, tu orden fue cancelada</h1>
<p>{% if reason == 'customer' %}Cancelamos tu orden <strong>#{{order.id}}</strong> como pediste.{% elseif reason == 'inventory' %}Tuvimos que cancelar tu orden <strong>#{{order.id}}</strong> porque no tenemos el stock suficiente para completarla.{% elseif reason =='fraud' %}Tuvimos que cancelar tu orden <strong>#{{order.id}}</strong> porque sospechamos que es fraudulenta.{% elseif reason =='expired' %}}Cancelamos tu orden <strong>#{{order.id}}</strong> porque expiró.{% else %}Tuvimos que cancelar tu orden <strong>#{{order.id}}</strong> por razones ajenas a la empresa.{% endif %}</p>
{% if payment_status == 'voided' %}<p>No te hagas problema, que anulamos tu pago.{% elseif payment_status == 'refunded' %}<p>No te hagas problema, que te devolvimos el dinero en su totalidad.</p>{% endif %}
<p>Ante cualquier inquietud, no dudes en responder este mensaje.<br>¡Estamos a tu disposición!</p>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no hiciste esta compra o simplemente estabas probando nuestro sitio, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Confirmación de pago
Text
Hola {{contact_name}}, ¡recibimos tu pago!
¡Excelente! Confirmamos el pago por tu compra en {{store_name}}.
Tu pedido #{{order.id}}
{% for product in order.products %}{{ product.quantity }} x {{product.name ~ product.variationName}}.
{% endfor %}
{% if order.shipping_pickup_type == 'ship' %}
Ya estamos preparando tu pedido para enviártelo. ¡Te vamos a avisar cuando esté en camino!
Datos de envío:
Dirección: {{order.shipping_address}}
{% if order.shipping_floor %}
Piso: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Localidad: {{order.shipping_locality}}
{% endif %}
Ciudad: {{order.shipping_city}}
Código Postal: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Provincia/Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
Dirección de retiro:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Seguí el estado de tu pedido desde este link:
{{ order.statusPageUrl }}
{% endif %}
Saludos,
{{store_name}}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Hola {{contact_name}}, ¡recibimos tu pago!</h1>
<p>¡Excelente! Confirmamos el pago por tu compra en <strong>{{store_name}}</strong>.</p>
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding-top: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;padding: 10px;border-bottom: 1px solid #e8e8e8;">
Tu pedido
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;padding: 10px;border-bottom: 1px solid #e8e8e8;">
orden: <strong>#{{order.id}}</strong>
</td>
</tr>
{% for product in order.products %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;">
<strong>{{product.name ~ product.variationName}}</strong> x <small>{{ product.quantity }}</small>
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;">
<strong>{{ product.priceFormat }}</strong> <small>cada uno</small>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 20px; padding-bottom: 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 20px 10px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
TOTAL
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 20px 10px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
{{order.totalFormat}}
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
{% if order.shipping_pickup_type == 'ship' %}
<p>
Ya estamos preparando tu pedido para enviártelo. <strong>¡Te vamos a avisar cuando esté en camino!</strong>
</p>
<h3>Datos de envío:</h3>
<p>Dirección: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Piso: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Localidad: {{order.shipping_locality}}<br>
{% endif %}
Ciudad: {{order.shipping_city}}<br>
Código Postal: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Provincia/Estado: {{order.shipping_province}}</p>
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
<h3>Dirección de retiro:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% endif %}
{% if order.statusPageUrl %}
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ order.statusPageUrl }}" style="height:26px;v-text-anchor:middle;width:220px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Seguí el estado de tu pedido</center>
</v:roundrect>
<![endif]-->
<a href="{{ order.statusPageUrl }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;mso-hide:all;">Seguí el estado de tu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no hiciste esta compra o simplemente estabas probando nuestro sitio,<br> por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Confirmación de compra
Text
Gracias por comprar en {{store_name}}
Tu pedido: #{{order.id}}
{% for product in order.products %}{{ product.quantity }} x {{product.name ~ product.variationName}} por {{ product.priceFormat }} cada uno.
{% endfor %}
{% for promotion in order.promotional_discount.promotions_applied %}
{% if promotion.discount_script_type == "NAtX%off" %}{{ promotion.selected_threshold.discount_decimal_percentage * 100 }}% OFF{% else %}Promoción {{ promotion.discount_script_type }}{% endif %} {% if promotion.scope_value_name %}en {{ promotion.scope_value_name }}{% endif %} {% if promotion.discount_script_type == "NAtX%off" %}comprando {{ promotion.selected_threshold.quantity }} o más.{% endif %}: -{{promotion.total_discount_amount_short}}
{% endfor %}
{% if order.shipping_pickup_type != 'non-shippable' %}
{% if order.shipping_pickup_type == 'ship' %}Costo de envío: {% else %}Costo de entrega: {% endif %}{% if order.show_shipping_price %}{% if order.shipping == 0 %}Gratis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A convenir{% endif %}
{% endif %}
{% if order.discountCoupon > 0 %}
Descuento ({{order.coupon}}): {{order.discountCouponFormat}}
{% endif %}
{% if order.discountGateway > 0 %}
Descuento por {{order.paymentMethod}}: {{order.discountGatewayFormat}}
{% endif %}
Total: {{order.totalFormat}}
Estamos esperando la confirmación del pago, que puede demorar hasta 72hs hábiles (esto puede variar dependiendo del medio de pago elegido. La validación del pago con tarjeta de crédito suele ser instantánea).
No te preocupes, te vamos a enviar un mensaje cuando esto suceda.
{% if order.shipping_pickup_type == 'non-shippable' %}
{% elseif order.shipping_pickup_type == 'ship' %}
Datos de envío:
Dirección: {{order.shipping_address}}
{% if order.shipping_floor %}
Piso: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Localidad: {{order.shipping_locality}}
{% endif %}
Ciudad: {{order.shipping_city}}
Código Postal: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Provincia/Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
Dirección de retiro:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Seguí el estado de tu pedido desde este link:
{{ order.statusPageUrl }}
{% endif %}
Saludos,
{{store_name}}
* * *
Si no hiciste esta compra o simplemente estabas probando nuestro sitio, por favor desconsiderá este e-mail.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Gracias por comprar en {{store_name}}</h1>
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding-top: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;padding: 10px;border-bottom: 1px solid #e8e8e8;">
Tu pedido
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;padding: 10px;border-bottom: 1px solid #e8e8e8;">
orden: <strong>#{{order.id}}</strong>
</td>
</tr>
{% for product in order.products %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;">
<strong>{{product.name ~ product.variationName}}</strong> x <small>{{ product.quantity }}</small>
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;">
<strong>{{ product.priceFormat }}</strong> <small>cada uno</small>
</td>
</tr>
{% endfor %}
{% for promotion in order.promotional_discount.promotions_applied %}
{% if promotion.discount_script_type == "NAtX%off" %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
{{ promotion.selected_threshold.discount_decimal_percentage * 100 }}% OFF {% if promotion.scope_value_name %}en <strong>{{ promotion.scope_value_name }}</strong>{% endif %} {% if promotion.discount_script_type == "NAtX%off" %}comprando {{ promotion.selected_threshold.quantity }} o más.{% endif %}:
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
-{{promotion.total_discount_amount_short}}
</td>
</tr>
{% else %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
Promoción <strong>{{ promotion.discount_script_type }}</strong> {% if promotion.scope_value_name %}en <strong>{{ promotion.scope_value_name }}</strong>{% endif %} {% if promotion.discount_script_type == "NAtX%off" %}comprando {{ promotion.selected_threshold.quantity }} o más.{% endif %}:
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; line-height: 24px; padding: 15px 10px;border-top: 1px solid #e8e8e8;">
-{{promotion.total_discount_amount_short}}
</td>
</tr>
{% endif %}
{% endfor %}
{% if order.shipping_pickup_type != 'non-shippable' %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
{% if order.shipping_pickup_type == 'ship' %}Costo de envío: {% else %}Costo de entrega: {% endif %}
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
{% if order.show_shipping_price %}{% if order.shipping == 0 %}Gratis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A convenir{% endif %}
</td>
</tr>
{% endif %}
{% if order.discountCoupon > 0 %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
Descuento (<strong>{{order.coupon}}</strong>):
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
{{order.discountCouponFormat}}
</td>
</tr>
{% endif %}
{% if order.discountGateway > 0 %}
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
Descuento por <strong>{{order.paymentMethod}}</strong>:
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; line-height: 24px; padding: 10px;border-top: 1px solid #e8e8e8;">
{{order.discountGatewayFormat}}
</td>
</tr>
{% endif %}
</table>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="65%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 20px 10px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
TOTAL
</td>
<td width="35%" align="left" style="font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 20px 10px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
{{order.totalFormat}}
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<p>Estamos esperando la confirmación del pago, que puede demorar hasta 72hs hábiles (esto puede variar dependiendo del medio de pago elegido. La validación del pago con tarjeta de crédito suele ser instantánea).</p>
<p>No te preocupes, te vamos a enviar un mensaje cuando esto suceda.</p>
{% if order.shipping_pickup_type == 'non-shippable' %}
{% elseif order.shipping_pickup_type == 'ship' %}
<h3>Datos de envío:</h3>
<p>Dirección: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Piso: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Localidad: {{order.shipping_locality}}<br>
{% endif %}
Ciudad: {{order.shipping_city}}<br>
Código Postal: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Provincia/Estado: {{order.shipping_province}}</p>
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
<h3>Dirección de retiro:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
<p>{{ order.shipping_option }}</p>
{% endif %}
{% if order.statusPageUrl %}
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ order.statusPageUrl }}" style="height:26px;v-text-anchor:middle;width:220px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Seguí el estado de tu pedido</center>
</v:roundrect>
<![endif]-->
<a href="{{ order.statusPageUrl }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;mso-hide:all;">Seguí el estado de tu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no hiciste esta compra o simplemente estabas probando nuestro sitio,<br> por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>Confirmación de envío
Text
{% if order.shipping_pickup_type == 'ship' %}
{{ order.shipping_name }} ¡enviamos tu pedido!
Ya hicimos el envío de tu pedido a través de {{ order.shippingMethod }} a esta dirección:
Dirección: {{order.shipping_address}}
{% if order.shipping_floor %}
Piso: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Localidad: {{order.shipping_locality}}
{% endif %}
Ciudad: {{order.shipping_city}}
Código Postal: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Provincia/Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' %}
{{ order.shipping_name }} ¡enviamos tu pedido al punto de retiro!
Dirección de retiro:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.tracking_number %}
El código de seguimiento de tu pedido es: {{ order.tracking_number }}.
{% endif %}
{% if order.statusPageUrl %}
También podés seguir tu pedido desde este link:
{{ order.statusPageUrl }}
{% elseif order.tracking_url %}
Podés ver su estado en la siguiente URL:
{{ order.tracking_url | raw }}
Es posible que el pedido demore un poco en aparecer en la página de seguimiento.
{% endif %}
¡Muchas gracias por comprar en {{ store_name }}!
Saludos,
{{ store_name }}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#EDEDED;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:30px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:30px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
/*@editable*/ border-radius: 4px;
/*@editable*/ overflow: hidden;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:200%;
padding-top:30px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#EB4102;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent a.btn {
display: inline-block;
padding: 15px 45px;
margin: 10px 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
font-weight:700;
text-decoration:none;
color:#000000;
background-color: #ECEBEC;
border-radius: 5px;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ color: #9A9A9A;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#9A9A9A;
/*@editable*/ font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px){
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell{padding:10px !important;}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer{
max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/ font-size:24px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/ font-size:16px !important;
/*@editable*/ line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
{% if order.shipping_pickup_type == 'ship' %}
<h1>{{ order.shipping_name }} ¡enviamos tu pedido!</h1>
<p>Ya hicimos el envío de tu pedido a través de {{ order.shippingMethod }} a esta dirección:<p>
<p>Dirección: <strong>{{order.shipping_address}}</strong><br>
{% if order.shipping_floor %}
Piso: <strong>{{order.shipping_floor}}</strong><br>
{% endif %}
{% if order.shipping_locality %}
Localidad: <strong>{{order.shipping_locality}}</strong><br>
{% endif %}
Ciudad: <strong>{{order.shipping_city}}</strong><br>
Código Postal: <strong>{{order.shipping_zipcode}}</strong><br>
País: <strong>{{order.shipping_country}}</strong><br>
Provincia/Estado: <strong>{{order.shipping_province}}</strong></p>
{% elseif order.shipping_pickup_type == 'pickup' %}
<h1>{{ order.shipping_name }} ¡enviamos tu pedido al punto de retiro!</h1>
<h3>Dirección de retiro:</h3>
<p><strong>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</strong></p>
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.tracking_number %}
<p>El código de seguimiento de tu pedido es:<br>
<strong>{{ order.tracking_number }}.</strong>
</p>
{% endif %}
{% if order.statusPageUrl %}
<p>También podés seguir tu pedido desde acá:</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBtn">
<tr>
<td valign="top" align="center" class="btnContent">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ order.statusPageUrl }}" style="height:26px;v-text-anchor:middle;width:220px;" arcsize="5%" strokecolor="#ECEBEC" fillcolor="#ECEBEC">
<w:anchorlock/>
<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Seguí el estado de tu pedido</center>
</v:roundrect>
<![endif]-->
<a href="{{ order.statusPageUrl }}" class="btn" target="_blank" style="background-color:#ECEBEC;border-radius: 6px;color:#000000;display:inline-block;font-family:sans-serif;font-size:16px;line-height: 22px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;mso-hide:all;">Seguí el estado de tu pedido</a>
</div>
</td>
</tr>
</table>
{% elseif order.tracking_url %}
<p>Podés ver su estado en la siguiente URL:<br>
<strong>{{ order.tracking_url | raw }}</strong><br>
Es posible que el pedido demore un poco en aparecer en la página de seguimiento.
</p>
{% endif %}
<p><strong>
¡Muchas gracias por comprar en {{ store_name }}!
</strong></p>
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Si no hiciste esta compra o simplemente estabas probando nuestro sitio, por favor desconsiderá este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>