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.
- Confirmación de entrega: Se envía a tus clientes cuando confirmás que el envío fue entregado.
- Listo para retirar: Se envía a tus clientes cuando confirmás que el pedido está listo para retirar.
- Edición de compra: Se envía a tus clientes cuando cuando el pedido fue actualizado.
- Nota fiscal: Se envía a tus clientes cuando la factura electrónica del pedido es emitida y queda disponible para su descarga.
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
Subject
Pedido #{{order.id}} cancelado
Text
Hola, {{contact_name}}.
{% if reason == 'customer' %}Cancelamos tu pedido #{{order.id}} de acuerdo a tu solicitud.{% elseif reason == 'inventory' %}Cancelamos tu pedido #{{order.id}} porque no tenemos stock suficiente.{% elseif reason == 'fraud' %}Cancelamos tu pedido #{{order.id}} por falta de aprobación de los datos.{% elseif reason == 'expired' %}Cancelamos tu pedido #{{order.id}} porque el tiempo de pago expiró.{% elseif reason == 'automatic' %}Cancelamos tu pedido #{{order.id}} porque el tiempo para completar el pago expiró.{% elseif reason == 'refund' %}Cancelamos tu pedido #{{order.id}} porque se realizó un reembolso total.{% elseif reason == 'other' and custom_reason %}Cancelamos tu pedido #{{order.id}} por el siguiente motivo registrado por {{store_name}}: {{custom_reason}}{% else %}Cancelamos tu pedido #{{order.id}} por razones ajenas a la tienda.{% endif %}
{% if payment_status == 'voided' %}No te preocupes, el pago fue cancelado.{% endif %}
{% if payment_status == 'refunded' %}{% for refund in refunds %}{% if refund.type == 'store_credit' %}Vas a recibir {{refund.amount}} como crédito en la tienda.
Este crédito es exclusivo para usar en {{store_name}}.
Si no tenés una cuenta, registrate acá: {{customer_urls.register}}.
Para acceder a tu saldo en el checkout vas a tener que iniciar sesión desde acá: {{customer_urls.login}}.{% elseif refund.card_last_digits %}Vas a recibir el reembolso de {{refund.amount}} en tu tarjeta terminada en {{refund.card_last_digits}}, según las políticas del emisor.{% else %}Vas a recibir el reembolso de {{refund.amount}} en el medio que usaste para tu compra, según la política de tu banco.{% endif %}{% endfor %}{% endif %}
Saludos,
{{store_name}}
* * *
Este es un e-mail automático. No es necesario responderlo.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode:bicubic;}
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;}
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
body, #bodyTable{background-color:#EDEDED;}
#bodyCell{border-top:4px solid #BBBBBB;}
h1{color:#202020 !important; display:block; font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size:30px; font-style:normal; font-weight:bold; line-height:100%; letter-spacing:-1px; margin:0; text-align:left;}
#templateBody{background-color:#FFFFFF; border-top:4px solid #BBBBBB;}
.bodyContent{color:#505050; font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size:14px; line-height:150%; padding:20px; text-align:left;}
.bodyContent a:link, .bodyContent a:visited, .bodyContent a .yshortcuts {color:#336699; font-weight:normal; text-decoration:underline;}
.bodyContent img{display:inline; height:auto; max-width:560px;}
#templateFooter{background-color:#FFFFFF; border-top:4px solid #BBBBBB;}
.footerContent{color:#808080; font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-size:10px; line-height:150%; padding:20px; text-align:center;}
@media only screen and (max-width: 480px){
body{width:100% !important; min-width:100% !important;}
#bodyCell{padding:10px !important;}
#templateContainer{max-width:600px !important; width:100% !important;}
h1{font-size:24px !important; line-height:100% !important;}
.bodyContent{font-size:18px !important; line-height:125% !important;}
.footerContent{font-size:14px !important; line-height:115% !important;}
}
</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">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<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 pedido fue cancelado</h1>
<p>{% if reason == 'customer' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> de acuerdo a tu solicitud.{% elseif reason == 'inventory' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> porque no tenemos stock suficiente.{% elseif reason == 'fraud' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> por falta de aprobación de los datos.{% elseif reason == 'expired' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> porque el tiempo de pago expiró.{% elseif reason == 'automatic' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> porque el tiempo para completar el pago expiró.{% elseif reason == 'refund' %}Cancelamos tu pedido <strong>#{{order.id}}</strong> porque se realizó un reembolso total.{% elseif reason == 'other' and custom_reason %}Cancelamos tu pedido <strong>#{{order.id}}</strong> por el siguiente motivo registrado por {{store_name}}: {{custom_reason}}{% else %}Cancelamos tu pedido <strong>#{{order.id}}</strong> por razones ajenas a la tienda.{% endif %}</p>
{% if payment_status == 'voided' %}<p>No te preocupes, el pago fue cancelado.</p>{% endif %}
{% if payment_status == 'refunded' %}{% for refund in refunds %}{% if refund.type == 'store_credit' %}<p>Vas a recibir {{refund.amount}} como crédito en la tienda.<br>Este crédito es exclusivo para usar en {{store_name}}.<br>Si no tenés una cuenta, registrate acá: <a href="{{customer_urls.register}}">{{customer_urls.register}}</a>.<br>Para acceder a tu saldo en el checkout vas a tener que iniciar sesión desde acá: <a href="{{customer_urls.login}}">{{customer_urls.login}}</a>.</p>{% elseif refund.card_last_digits %}<p>Vas a recibir el reembolso de {{refund.amount}} en tu tarjeta terminada en {{refund.card_last_digits}}, según las políticas del emisor.</p>{% else %}<p>Vas a recibir el reembolso de {{refund.amount}} en el medio que usaste para tu compra, según la política de tu banco.</p>{% endif %}{% endfor %}{% endif %}
<p>
Saludos,<br>
<strong>{{store_name}}</strong>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p>Este es un e-mail automático. No es necesario responderlo.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</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>
Confirmación de entrega
Text
{% if order.fulfillmentShippingType == 'ship' %}
{% if order.fulfillmentTotal > 1 %}
{{ order.shipping_name }} ¡un paquete de tu pedido fue entregado!
{% else %}
{{ order.shipping_name }} ¡tu pedido fue entregado!
{% endif %}
Tu pedido fue entregado en 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}}
{% if order.statusPageUrl %}
También podés seguir tu pedido desde este link:
{{ order.statusPageUrl }}
{% endif %}
{% elseif order.fulfillmentShippingType == 'pickup' %}
{% if order.fulfillmentTotal > 1 %}
{{ order.shipping_name }} ¡un paquete de tu pedido fue entregado en el punto de retiro!
{% else %}
{{ order.shipping_name }} ¡tu pedido fue entregado en el punto de retiro!
{% endif %}
{% if 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 %}
También podés seguir tu pedido desde este link:
{{ order.statusPageUrl }}
{% endif %}
{% endif %}
¡Muchas gracias por comprar en {{ store_name }}!
Saludos,
{{ store_name }}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* ///////// 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 ///////// */
#bodyCell { padding: 20px; border-top: 4px solid #BBBBBB; }
#templateContainer { width: 600px; }
body, #bodyTable { background-color: #EDEDED; }
h1 {
color: #202020 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 30px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 10px 0 30px 0;
text-align: left;
}
h2 {
color: #404040 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h3 {
color: #606060 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h4 {
color: #808080 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
/* ========== Body Styles ========== */
#templateBody {
background-color: #ffffff;
border-radius: 4px;
overflow: hidden;
}
.bodyContent {
color: #505050;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 200%;
padding: 30px 40px 20px 40px;
text-align: left;
}
.bodyContent a:link, .bodyContent a:visited, .bodyContent a .yshortcuts {
color: #EB4102;
font-weight: normal;
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 ========== */
#templateFooter { color: #9A9A9A; }
.footerContent {
color: #9A9A9A;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
line-height: 150%;
padding: 20px;
text-align: center;
}
.footerContent a:link, .footerContent a:visited, .footerContent a .yshortcuts, .footerContent a span {
color: #606060;
font-weight: normal;
text-decoration: underline;
}
/* ///////// MOBILE STYLES ///////// */
@media only screen and (max-width: 480px) {
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: none !important; }
body { width: 100% !important; min-width: 100% !important; }
#bodyCell { padding: 10px !important; }
#templateContainer { max-width: 600px !important; width: 100% !important; }
h1 { font-size: 24px !important; line-height: 100% !important; }
h2 { font-size: 20px !important; line-height: 100% !important; }
h3 { font-size: 18px !important; line-height: 100% !important; }
h4 { font-size: 16px !important; line-height: 100% !important; }
#templatePreheader { display: none !important; }
#headerImage { height: auto !important; max-width: 600px !important; width: 100% !important; }
.headerContent { font-size: 20px !important; line-height: 125% !important; }
.bodyContent { font-size: 18px !important; line-height: 125% !important; }
.footerContent { font-size: 14px !important; line-height: 115% !important; }
.footerContent a { display: block !important; }
}
</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.fulfillmentShippingType == 'ship' %}
{% if order.fulfillmentTotal > 1 %}
<h1>{{ order.shipping_name }} ¡un paquete de tu pedido fue entregado!</h1>
{% else %}
<h1>{{order.shipping_name}} ¡tu pedido fue entregado!</h1>
{% endif %}
<p>Tu pedido fue entregado en 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.fulfillmentShippingType == 'pickup' %}
{% if order.fulfillmentTotal > 1 %}
<h1>{{ order.shipping_name }} ¡un paquete de tu pedido fue entregado en el punto de retiro!</h1>
{% else %}
<h1>{{ order.shipping_name }} ¡tu pedido fue entregado en el punto de retiro!</h1>
{% endif %}
{% if order.shipping_extra.store_branch %}
<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 %}
{% 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>
{% 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>
Listo para retirar
Text
{% if fulfillment.fulfillment_total > 1 %}
Hola {{fulfillment.pickup_shipping_name}}, Tu paquete {{fulfillment.fulfillment_number}} de {{fulfillment.fulfillment_total}} del pedido #{{order.id}} en {{store_name}} está listo para retirar.
{% else %}
Hola {{fulfillment.pickup_shipping_name}}, Tu pedido #{{order.id}} en {{store_name}} está listo para retirar.
{% endif %}
Punto de retiro: {{fulfillment.pickup_name}}
Dirección y horarios de atención: {{fulfillment.pickup_street}} {{fulfillment.pickup_number}}{% if fulfillment.pickup_floor %}, {{ fulfillment.pickup_floor }}{% endif %}, {{fulfillment.pickup_locality}}, {{fulfillment.pickup_city}}, {{fulfillment.pickup_country}} (Código postal {{fulfillment.pickup_zipcode}}) {{fulfillment.pickup_hours}}
Muchas gracias por tu compra.
Saludos
{{store_name}}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* ///////// 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 ///////// */
#bodyCell { padding: 20px; border-top: 4px solid #BBBBBB; }
#templateContainer { width: 600px; }
body, #bodyTable { background-color: #EDEDED; }
h1 {
color: #202020 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 30px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 10px 0 35px 0;
text-align: left;
}
h2 {
color: #404040 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h3 {
color: #606060 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h4 {
color: #808080 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
/* ========== Body Styles ========== */
#templateBody {
background-color: #ffffff;
border-radius: 4px;
overflow: hidden;
}
.bodyContent {
color: #505050;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 200%;
padding: 30px 40px 20px 40px;
text-align: left;
}
.bodyContent a:link, .bodyContent a:visited, .bodyContent a .yshortcuts {
color: #EB4102;
font-weight: normal;
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;
}
.bodyContent p {
color: #0A0A0A;
font-size: 14px;
font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
margin: 5px 0px;
font-weight: 400;
}
.bodyContent .divider-text {
margin: 25px 0px;
}
.bodyContent span {
color: #5D5D5D;
font-size: 14px;
font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ========== Footer Styles ========== */
#templateFooter { color: #9A9A9A; }
.footerContent {
color: #9A9A9A;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
line-height: 150%;
padding: 20px;
text-align: center;
}
.footerContent a:link, .footerContent a:visited, .footerContent a .yshortcuts, .footerContent a span {
color: #606060;
font-weight: normal;
text-decoration: underline;
}
/* ///////// MOBILE STYLES ///////// */
@media only screen and (max-width: 480px) {
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: none !important; }
body { width: 100% !important; min-width: 100% !important; }
#bodyCell { padding: 10px !important; }
#templateContainer { max-width: 600px !important; width: 100% !important; }
h1 { font-size: 24px !important; line-height: 100% !important; }
h2 { font-size: 20px !important; line-height: 100% !important; }
h3 { font-size: 18px !important; line-height: 100% !important; }
h4 { font-size: 16px !important; line-height: 100% !important; }
#templatePreheader { display: none !important; }
#headerImage { height: auto !important; max-width: 600px !important; width: 100% !important; }
.headerContent { font-size: 20px !important; line-height: 125% !important; }
.bodyContent { font-size: 18px !important; line-height: 125% !important; }
.footerContent { font-size: 14px !important; line-height: 115% !important; }
.footerContent a { display: block !important; }
}
</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 fulfillment.fulfillment_total > 1 %}
<h1>Hola {{fulfillment.pickup_shipping_name}},</h1>
<span class="text-gray">Tu paquete {{fulfillment.fulfillment_number}} de {{fulfillment.fulfillment_total}} del pedido #{{order.id}} en {{store_name}} está listo para retirar.</span>
{% else %}
<h1>Hola {{fulfillment.pickup_shipping_name}},</h1>
<span class="text-gray">Tu pedido #{{order.id}} en {{store_name}} está listo para retirar.</span>
{% endif %}
<p>Punto de retiro: <br>
<span class="text-gray">{{fulfillment.pickup_name}}</span>
</p>
<p>Dirección y horarios de atención:<br>
<span class="text-gray">
{{fulfillment.pickup_street}} {{fulfillment.pickup_number}}{% if fulfillment.pickup_floor %}, {{fulfillment.pickup_floor}}{% endif %}, {{fulfillment.pickup_locality}}, {{fulfillment.pickup_city}}, {{fulfillment.pickup_country}} (Código postal {{fulfillment.pickup_zipcode}}) <br>
{{fulfillment.pickup_hours}}
</span>
</p>
<p class="divider-text">
<span class="text-gray">Muchas gracias por tu compra.</span>
</p>
<p class="text-gray">
<span class="text-gray">Saludos</span><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>
Edición de compra
Text
Hola {{contact_name}}, tu pedido #{{order.id}} en {{store_name}} fue actualizado.
{% for item in order.items %}
{% if item.is_kit %}
{{ item.quantity }} x {{item.name}} por {{ item.priceFormat }} cada uno.
{% for component in item.components %}
{{ component.name }} {{ component.variationName }} x {{ component.total_quantity }}
{% endfor %}
{% else %}
{{ item.quantity }} x {{item.name ~ item.variationName}} por {{ item.priceFormat }} cada uno.
{% endif %}
{% endfor %}
{% for promotion in order.promotional_discount.promotions_applied %}
{% if promotion.discount_script_type == "NAtX%off" %}
{{ promotion.selected_threshold.discount_decimal_percentage * 100 }}% OFF
{% elseif promotion.discount_script_type == "CrossSelling" %}
Descuento
{% elseif promotion.discount_script_type == "%off" %}
Descuento {{ promotion.percentage_off }}% OFF
{% elseif promotion.coupon_activated %}
Descuento del cupón
{% elseif promotion.is_cart_discount %}
{% if promotion.cart_discount.is_percentage %}
Descuento {{ promotion.cart_discount.value | round }}% OFF
{% else %}
Descuento
{% endif %}
{% else %}
Promoción {{ promotion.discount_script_type }}
{% endif %}
{% if promotion.scope_value_name and not promotion.is_cart_discount %}
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}}
{% 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* ///////// 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 ///////// */
#bodyCell { padding: 20px; border-top: 4px solid #BBBBBB; }
#templateContainer { width: 600px; }
body, #bodyTable { background-color: #EDEDED; }
h1 {
color: #202020 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 30px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 10px 0 30px 0;
text-align: left;
}
h2 {
color: #202020 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h3 {
color: #202020 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
h4 {
color: #808080 !important;
display: block;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
line-height: 100%;
letter-spacing: normal;
margin: 0 0 10px 0;
text-align: left;
}
/* ========== Body Styles ========== */
#templateBody {
background-color: #ffffff;
border-radius: 4px;
overflow: hidden;
}
.bodyContent {
color: #505050;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 200%;
padding: 30px 40px 20px 40px;
text-align: left;
}
.bodyContent a:link, .bodyContent a:visited, .bodyContent a .yshortcuts {
color: #EB4102;
font-weight: normal;
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 ========== */
#templateFooter { color: #9A9A9A; }
.footerContent {
color: #9A9A9A;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
line-height: 150%;
padding: 20px;
text-align: center;
}
.footerContent a:link, .footerContent a:visited, .footerContent a .yshortcuts, .footerContent a span {
color: #606060;
font-weight: normal;
text-decoration: underline;
}
/* ///////// MOBILE STYLES ///////// */
@media only screen and (max-width: 480px) {
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: none !important; }
body { width: 100% !important; min-width: 100% !important; }
#bodyCell { padding: 10px !important; }
#templateContainer { max-width: 600px !important; width: 100% !important; }
h1 { font-size: 24px !important; line-height: 100% !important; }
h2 { font-size: 20px !important; line-height: 100% !important; }
h3 { font-size: 18px !important; line-height: 100% !important; }
h4 { font-size: 16px !important; line-height: 100% !important; }
#templatePreheader { display: none !important; }
#headerImage { height: auto !important; max-width: 600px !important; width: 100% !important; }
.headerContent { font-size: 20px !important; line-height: 125% !important; }
.bodyContent { font-size: 18px !important; line-height: 125% !important; }
.footerContent { font-size: 14px !important; line-height: 115% !important; }
.footerContent a { display: block !important; }
}
</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 pedido #{{order.id}} en {{store_name}} fue actualizado.</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;">
Pedido #{{order.id}}
</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;">
</td>
</tr>
{% for item in order.items %}
{% if item.is_kit %}
<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>{{item.name}}</strong> x <small>{{ item.quantity }}</small><br>
{% for component in item.components %}
<span style="font-size: 12px; color: #505050;">{{ component.name }} {{ component.variationName }} x {{ component.total_quantity }}</span><br>
{% endfor %}
</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>{{ item.priceFormat }}</strong> <small>cada uno</small>
</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;">
<strong>{{ item.name }} {{ item.variationName }}</strong> x <small>{{ item.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>{{ item.priceFormat }}</strong> <small>cada uno</small>
</td>
</tr>
{% endif %}
{% 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 %}
comprando {{ promotion.selected_threshold.quantity }} o más.:
</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;">
{% if promotion.discount_script_type == "CrossSelling" %}
Descuento
{% elseif promotion.discount_script_type == "%off" %}
Descuento <strong>{{ promotion.percentage_off }}% OFF</strong>
{% elseif promotion.coupon_activated %}
Descuento del cupón
{% elseif promotion.is_cart_discount %}
{% if promotion.cart_discount.is_percentage %}
Descuento <strong>{{ promotion.cart_discount.value | round }}% OFF</strong>
{% else %}
Descuento
{% endif %}
{% else %}
Descuento
{% endif %}
{% if promotion.scope_value_name and not promotion.is_cart_discount %}
en <strong>{{ promotion.scope_value_name }}</strong>
{% 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]-->
{% 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>
Nota fiscal
Text
Hola, {{ cart.contact_name }}.
La factura electrónica de tu compra en {{ store_name }} ya está disponible. Podés acceder y descargarla en los enlaces de abajo:
- PDF: {{ invoice_pdf_url }}
- XML: {{ invoice_xml_url }}
Pedido #{{ order.id }} por {{ order.totalFormat }}
{% for product in order.products %}
{{ product.quantity }} x {{ product.name ~ product.variationName }} por {{ product.priceFormat }} cada uno
{% endfor %}
Saludos cordiales,
{{ store_name }}
Este es un email automático. No es necesario responderlo.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>¡Tu factura está disponible!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
margin: 0;
padding: 0;
background-color: #e5e5e5;
font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.container {
max-width: 600px;
width: 100%;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-text {
color: #212121;
font-size: 20px;
line-height: 1.5;
margin: 0 0 20px 0;
text-align: center;
font-weight: bold;
}
.body-text {
color: #505050;
font-size: 14px;
line-height: 1.5;
margin: 0 0 15px 0;
}
.order-summary-title {
font-weight: bold;
color: #212121;
font-size: 14px;
line-height: 1.5;
margin: 0 0 10px 0;
}
.button {
display: block;
width: 100%;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 12px 20px;
margin: 0 auto 10px;
text-decoration: none;
color: #212121;
font-weight: 500;
}
.button.primary {
background-color: #007bff;
border-color: #007bff;
color: #ffffff;
}
.disclaimer-text {
color: #768192;
font-size: 12px;
line-height: 1.5;
margin: 0;
text-align: center;
}
.divider {
border-bottom: 1px solid #e0e0e0;
margin: 20px 0;
}
@media only screen and (max-width: 620px) {
.container { width: 100% !important; }
.content-padding { padding: 20px !important; }
.button {
width: auto;
padding-left: 15px;
padding-right: 15px;
}
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#e5e5e5; font-family:Roboto, -apple-system, BlinkMacSystemFont, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#e5e5e5;">
<tr>
<td align="center" style="padding:20px 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container" style="background-color:#ffffff; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1); max-width:600px; width:100%;">
<tr>
<td style="padding:40px;" class="content-padding">
<p class="header-text" style="color:#212121; font-size:20px; line-height:1.5; margin:0 0 20px 0; text-align:center; font-weight:bold;">
¡Tu factura está disponible!
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 15px 0;">
Hola, {{ cart.contact_name }}.
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 15px 0;">
La factura electrónica de tu compra en {{ store_name }} ya está disponible.
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 20px 0;">
Podés acceder y descargarla en los botones de abajo:
</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
<tr>
<td align="center" style="padding: 0 0 10px 0;">
<a href="{{ invoice_pdf_url }}" target="_blank" class="button" style="display:inline-block; width:auto; background-color:#f0f0f0; border:1px solid #ccc; border-radius:4px; text-align:center; padding:12px 20px; text-decoration: none; color:#212121; font-weight:700;">
Acceder a la Factura
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="{{ invoice_xml_url }}" target="_blank" style="display:inline-block; width:auto; border: none; text-align:center; text-decoration: underline; color:#212121; font-weight:500;">
Descargar XML
</a>
</td>
</tr>
</table>
<p class="body-text" style="color:#212121; font-size:14px; line-height:1.5; margin:0 0 10px 0;">
Pedido #{{ order.id }} por {{ order.totalFormat }}
</p>
<hr class="divider" style="border:none; border-bottom:1px solid #e0e0e0; margin:20px 0;">
{% for product in order.products %}
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 5px;">
<tr>
<td class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0; padding:0; width:70%;">
<span style="font-weight:bold">{{ product.name }} {{ product.variationName }}</span> x {{ product.quantity }}
</td>
<td class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0; padding:0; text-align:right; width:30%;">
<span style="font-weight:bold">{{ product.priceFormat }}</span> cada uno
</td>
</tr>
</table>
<hr class="divider" style="border:none; border-bottom:1px solid #e0e0e0; margin:20px 0;">
{% endfor %}
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:30px 0 15px 0;">
Saludos cordiales,
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0;">
<strong>{{ store_name }}</strong>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p class="disclaimer-text" style="color:#768192; font-size:12px; line-height:1.5; margin:0; text-align:center;">
Este es un email automático. No es necesario responderlo.
</p>
</body>
</html>