Em seguida, compartilharemos os e-mails enviados aos clientes durante os diferentes estados dos pedidos e do registro do usuário. Eles são configurados em "Configurações> E-mails".
- Carrinhos abandonados: enviados aos clientes quando eles abandonam as compras na sua loja.
- Ativação da conta: enviada aos clientes quando eles criam uma conta em sua loja, para ativá-la.
- Alteração de senha: enviada aos clientes registrados quando eles desejam alterar a senha de suas contas na sua loja.
- Bem-vindo: enviado aos clientes quando eles ativam suas contas na sua loja.
- Cancelamento de compra: enviado aos clientes quando as compras são canceladas.
- Confirmação de pagamento: é enviada aos clientes quando os pagamentos das suas compras são creditados.
- Confirmação de compra: enviada aos seus clientes quando eles fazem uma compra em sua loja.
- Confirmação de envio: É enviada aos seus clientes quando você confirma o envío do pedido.
- Confirmação de entrega: É enviada aos seus clientes quando você confirma a entrega do pedido.
- Pronto para retirada: É enviada aos seus clientes quando o pedido estiver pronto para retirada.
- Edição de compra: É enviada aos seus clientes quando o pedido for atualizado.
- Nota fiscal: É enviada aos clientes quando a NF-e do pedido estiver disponível.
Carrinhos abandonados
Text
Olá {{ cart.contact_name }}. Salvamos seu carrinho de compras na loja {{ store_name }} e ele está esperando por você.
Estes são os produtos que você adicionou:
{% for product in cart.contents %}
{{product.quantity}} {{product.name}}
{% endfor %}
Você pode concluir sua compra! Clique no seguinte link:
{{ cart.abandoned_checkout_url }}
Atenciosamente,
{{ store_name }}
* * *
Se você não criou um carrinho em nosso site, desconsidere 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="pt">
<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>Você ainda pode fazer sua compra</h1>
<p>Olá {{ cart.contact_name }}. Salvamos seu carrinho de compras na loja {{ store_name }} e ele está esperando por você.</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 um</small>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<p>
<strong>Você pode concluir sua compra!</strong> Clique no seguinte botão:
</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;">Concluir a 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;">Concluir a compra</a>
</div>
</td>
</tr>
</table>
<p>
Atenciosamente,<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>Se você não criou um carrinho em nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Ativação da conta
Text
Olá {{contact_name}}, este é o último passo para ativar sua conta.
Clique no seguinte link:
{{ url }}
Atenciosamente,
{{store_name}}
* * *
Se você não criou uma conta em nosso site, desconsidere 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="pt">
<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>Ative sua conta em {{ store_name }}</h1>
<p>Olá {{contact_name}}, este é o último passo para ativar sua conta.</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;">Ativar minha conta</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;">Ativar minha conta</a>
</div>
</td>
</tr>
</table>
<p>
Atenciosamente,<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>Se você não criou uma conta em nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Alteração de senha
Text
Você mudará sua senha em {{ store_name }}
Olá {{contact_name}}. Para alterar sua senha, clique neste link:
{{ url }}
Atenciosamente,
{{store_name}}
* * *
Se você não solicitou uma alteração de senha, desconsidere 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="pt">
<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>Você mudará sua senha em {{ store_name }}</h1>
<p>Olá {{contact_name}}. Para alterar sua senha, clique neste botão:</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;">Mudar senha</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;">Mudar senha</a>
</div>
</td>
</tr>
</table>
<p>
Atenciosamente,<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>Se você não solicitou uma alteração de senha, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Bem-vindo
Text
Olá {{ customer.name }}. Você já criou sua conta em {{store_name}}!
Na sua próxima compra, você poderá usar sua conta e economizar tempo tendo todos os seus dados já registrados.
Atenciosamente,
{{ store_name }}
* * *
Se você não criou uma conta em nosso site, desconsidere 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="pt">
<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>Bem-vindo ao {{store_name}}</h1>
<p>Olá {{ customer.name }}. Você já criou sua conta em {{store_name}}!</p>
<p>Na sua próxima compra, você poderá usar sua conta e economizar tempo tendo todos os seus dados já registrados.
</p>
<p>
Atenciosamente,<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>Se você não criou uma conta em nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Cancelamento de compra
Subject
Pedido #{{order.id}} cancelado
Text
Olá, {{contact_name}}.
{% if reason == 'customer' %}Cancelamos seu pedido #{{order.id}} conforme sua solicitação.{% elseif reason == 'inventory' %}Cancelamos seu pedido #{{order.id}} porque não temos estoque suficiente.{% elseif reason == 'fraud' %}Cancelamos seu pedido #{{order.id}} por falta de aprovação cadastral.{% elseif reason == 'expired' %}Cancelamos seu pedido #{{order.id}} porque o tempo para o pagamento expirou.{% elseif reason == 'automatic' %}Cancelamos seu pedido #{{order.id}} porque o tempo para concluir o pagamento expirou.{% elseif reason == 'refund' %}Cancelamos seu pedido #{{order.id}} porque um estorno total foi realizado.{% elseif reason == 'other' and custom_reason %}Cancelamos seu pedido #{{order.id}} pelo seguinte motivo registrado por {{store_name}}: {{custom_reason}}{% else %}Cancelamos seu pedido #{{order.id}} por razões externas à loja.{% endif %}
{% if payment_status == 'voided' %}Não se preocupe, seu pagamento foi cancelado.{% endif %}
{% if payment_status == 'refunded' %}{% for refund in refunds %}{% if refund.type == 'store_credit' %}Você receberá {{refund.amount}} como crédito na loja.
Este crédito é exclusivo para uso na {{store_name}}.
Se você não tem uma conta, cadastre-se aqui: {{customer_urls.register}}.
Para usar seu saldo no checkout, você deve fazer login em: {{customer_urls.login}}.{% elseif refund.card_last_digits %}Você receberá o estorno de {{refund.amount}} no seu cartão final {{refund.card_last_digits}}, conforme a política da administradora do cartão.{% else %}Você receberá o estorno de {{refund.amount}} no mesmo meio que usou para a compra, conforme a política do seu banco.{% endif %}{% endfor %}{% endif %}
Atenciosamente,
{{store_name}}
* * *
Este é um e-mail automático. Não é necessário respondê-lo.
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="pt">
<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>Olá {{contact_name}}, seu pedido foi cancelado</h1>
<p>{% if reason == 'customer' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> conforme sua solicitação.{% elseif reason == 'inventory' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> porque não temos estoque suficiente.{% elseif reason == 'fraud' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> por falta de aprovação cadastral.{% elseif reason == 'expired' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> porque o tempo para o pagamento expirou.{% elseif reason == 'automatic' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> porque o tempo para concluir o pagamento expirou.{% elseif reason == 'refund' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> porque um estorno total foi realizado.{% elseif reason == 'other' and custom_reason %}Cancelamos seu pedido <strong>#{{order.id}}</strong> pelo seguinte motivo registrado por {{store_name}}: {{custom_reason}}{% else %}Cancelamos seu pedido <strong>#{{order.id}}</strong> por razões externas à loja.{% endif %}</p>
{% if payment_status == 'voided' %}<p>Não se preocupe, seu pagamento foi cancelado.</p>{% endif %}
{% if payment_status == 'refunded' %}{% for refund in refunds %}{% if refund.type == 'store_credit' %}<p>Você receberá {{refund.amount}} como crédito na loja.<br>Este crédito é exclusivo para uso na {{store_name}}.<br>Se você não tem uma conta, cadastre-se aqui: <a href="{{customer_urls.register}}">{{customer_urls.register}}</a>.<br>Para usar seu saldo no checkout, você deve fazer login em: <a href="{{customer_urls.login}}">{{customer_urls.login}}</a>.</p>{% elseif refund.card_last_digits %}<p>Você receberá o estorno de {{refund.amount}} no seu cartão final {{refund.card_last_digits}}, conforme a política da administradora do cartão.</p>{% else %}<p>Você receberá o estorno de {{refund.amount}} no mesmo meio que usou para a compra, conforme a política do seu banco.</p>{% endif %}{% endfor %}{% endif %}
<p>
Atenciosamente,<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 é um e-mail automático. Não é necessário respondê-lo.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Confirmação de pagamento
Text
Olá {{contact_name}}, recebemos seu pagamento!
Excelente! Confirmamos o pagamento da sua compra em {{store_name}}.
Seu pedido #{{order.id}}
{% for product in order.products %}{{ product.quantity }} x {{product.name ~ product.variationName}}.
{% endfor %}
{% if order.shipping_pickup_type == 'pickup' %}
Você já pode retirar o seu pedido em {{ order.shipping_extra.store_branch.name }} ({{ order.shipping_extra.store_branch.extra }}).
{% else %}
Já estamos preparando seu pedido para enviá-lo a você. Avisaremos quando ele estiver a caminho!
{% endif %}
{% if order.shipping_pickup_type == 'ship' %}
Dados de envio:
Endereço: {{order.shipping_address}}
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}
{% endif %}
Cidade: {{order.shipping_city}}
CEP: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
Endereço de retirada:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Siga o status do seu pedido neste link:
{{ order.statusPageUrl }}
{% endif %}
Atenciosamente,
{{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="pt">
<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>Olá {{contact_name}}, recebemos seu pagamento!</h1>
<p>Excelente! Confirmamos o pagamento da sua compra em <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;">
Seu 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;">
<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 um</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>Já estamos preparando seu pedido para enviá-lo a você. <strong>Avisaremos quando ele estiver a caminho!</strong></p>
{% endif %}
{% if order.shipping_pickup_type == 'ship' %}
<p>
Já estamos preparando seu pedido para enviá-lo a você. <strong>Avisaremos quando ele estiver a caminho!</strong>
</p>
<h3>Dados de envio:</h3>
<p>Endereço: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}<br>
{% endif %}
Cidade: {{order.shipping_city}}<br>
CEP: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Estado: {{order.shipping_province}}</p>
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
<h3>Endereço de retirada:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% 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;">Siga o status do seu 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;">Siga o status do seu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p>
Atenciosamente,<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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Confirmação de compra
Text
Obrigado por comprar em {{store_name}}
Seu pedido: #{{order.id}}
{% for product in order.products %}{{ product.quantity }} x {{product.name ~ product.variationName}} por {{ product.priceFormat }} cada um.{% 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 %}Promoção {{ promotion.discount_script_type }}{% endif %} {% if promotion.scope_value_name %}em {{ promotion.scope_value_name }}{% endif %} {% if promotion.discount_script_type == "NAtX%off" %}comprando {{ promotion.selected_threshold.quantity }} ou mais un.{% endif %}: -{{promotion.total_discount_amount_short}}
{% endfor %}
{% if order.shipping_pickup_type != 'non-shippable' %}
{% if order.shipping_pickup_type == 'ship' %}Custo de frete: {% else %}Custo de entrega: {% endif %}{% if order.show_shipping_price %}{% if order.shipping == 0 %}Grátis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A combinar{% endif %}
{% endif %}
{% if order.discountCoupon > 0 %}
Desconto ({{order.coupon}}): {{order.discountCouponFormat}}
{% endif %}
{% if order.discountGateway > 0 %}
Desconto por {{order.paymentMethod}}: {{order.discountGatewayFormat}}
{% endif %}
Total: {{order.totalFormat}}
{% if order.boleto_url %}
Você poderá imprimir seu boleto bancário clicando no link ao lado: {{order.boleto_url}}
{% endif %}
Estamos aguardando confirmação de pagamento, que pode demorar até 72 horas (isso pode variar dependendo do meio de pagamento escolhido. A validação de pagamento com cartão de crédito geralmente é instantânea).
Não se preocupe, nós lhe enviaremos uma mensagem quando isso acontecer.
{% if order.shipping_pickup_type == 'non-shippable' %}
{% elseif order.shipping_pickup_type == 'ship' %}
Dados de envio:
Endereço: {{order.shipping_address}}
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}
{% endif %}
Cidade: {{order.shipping_city}}
CEP: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
Endereço de retirada:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Siga o status do seu pedido neste link:
{{ order.statusPageUrl }}
{% endif %}
Atenciosamente,
{{store_name}}
* * *
Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere 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="pt">
<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>Obrigado por comprar em {{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;">
Seu 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;">
<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 um</small>
</td>
</tr>
{% endfor %}
{% for promotion in order.promotional_discount.promotions_applied %}
<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 == "NAtX%off" %}
{{ promotion.selected_threshold.discount_decimal_percentage * 100 }}% OFF
{% else %}Promoção {{ promotion.discount_script_type }}
{% endif %}
{% if promotion.scope_value_name %}em {{ promotion.scope_value_name }}{% endif %} {% if promotion.discount_script_type == "NAtX%off" %}comprando {{ promotion.selected_threshold.quantity }} ou mais un.{% 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>
{% 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' %}Custo de frete: {% else %}Custo 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 %}Grátis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A combinar{% 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;">
Desconto (<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;">
Desconto 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.boleto_url %}
<p>Você poderá imprimir seu boleto bancário clicando no link ao lado: <br>
{{order.boleto_url}}</p>
{% endif %}
<p>Estamos aguardando confirmação de pagamento, que pode demorar até 72 horas (isso pode variar dependendo do meio de pagamento escolhido. A validação de pagamento com cartão de crédito geralmente é instantânea).</p>
<p>Não se preocupe, nós lhe enviaremos uma mensagem quando isso acontecer.</p>
{% if order.shipping_pickup_type == 'non-shippable' %}
{% elseif order.shipping_pickup_type == 'ship' %}
<h3>Dados de envio:</h3>
<p>Endereço: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}<br>
{% endif %}
Cidade: {{order.shipping_city}}<br>
CEP: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Estado: {{order.shipping_province}}</p>
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
<h3>Endereço de retirada:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
<h3>{{ order.shipping_option }}</h3>
{% 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;">Siga o status do seu 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;">Siga o status do seu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p>
Atenciosamente,<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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Confirmação de envío
Text
{% if order.shipping_pickup_type == 'ship' %}
{{ order.shipping_name }}, enviamos seu pedido!
Já enviamos seu pedido via {{ order.shippingMethod }} para este endereço:
Endereço: {{order.shipping_address}}
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}
{% endif %}
Cidade: {{order.shipping_city}}
CEP: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' %}
{{ order.shipping_name }}, enviamos seu pedido para o ponto de retirada!
Endereço de retirada:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.tracking_number %}
O código de rastreamento do seu pedido é: {{ order.tracking_number }}
{% endif %}
{% if order.statusPageUrl %}
Acompanhe a entrega da compra na página de status do pedido:
{{ order.statusPageUrl }}
{% elseif order.tracking_url %}
Você pode ver seu status no seguinte URL:
{{ order.tracking_url | raw }}
É possível que o pedido demore um pouco para aparecer na página de rastreamento.
{% endif %}
Obrigado por comprar em {{store_name}}!
Atenciosamente,
{{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="pt">
<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 seu pedido!</h1>
<p>Já enviamos seu pedido via {{ order.shippingMethod }} para este endereço:</p>
<p>Endereço: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}<br>
{% endif %}
Cidade: {{order.shipping_city}}<br>
CEP: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Estado: {{order.shipping_province}}</p>
{% elseif order.shipping_pickup_type == 'pickup' %}
<h1>{{order.shipping_name}}, enviamos seu pedido para o ponto de retirada!</h1>
<h3>Endereço de retirada:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
<h3>{{ order.shipping_option }}</h3>
{% endif %}
{% if order.tracking_number %}
<p>O código de rastreamento do seu pedido é:<br>
<strong>{{ order.tracking_number }}.</strong>
</p>
{% endif %}
{% if order.statusPageUrl %}
<p>Acompanhe a entrega da compra na página de status do pedido:</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;">Siga o status do seu 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;">Siga o status do seu pedido</a>
</div>
</td>
</tr>
</table>
{% elseif order.tracking_url %}
<p>Você pode ver seu status no seguinte URL:<br>
<strong>{{ order.tracking_url | raw }}</strong><br>
É possível que o pedido demore um pouco para aparecer na página de rastreamento.
</p>
{% endif %}
<p><strong>
Obrigado por comprar em {{ store_name }}!
</strong></p>
<p>
Atenciosamente,<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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Confirmação de entrega
Text
{% if order.fulfillmentShippingType == 'ship' %}
{% if order.fulfillmentTotal > 1 %}
{{ order.shipping_name }}, um pacote do seu pedido foi entregue!
{% else %}
{{ order.shipping_name }}, seu pedido foi entregue!
{% endif %}
Seu pedido foi entregue neste endereço:
Endereço: {{order.shipping_address}}
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}
{% endif %}
Cidade: {{order.shipping_city}}
CEP: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Estado: {{order.shipping_province}}
{% if order.statusPageUrl %}
Acompanhe a entrega da compra na página de status do pedido:
{{ order.statusPageUrl }}
{% endif %}
{% elseif order.fulfillmentShippingType == 'pickup' %}
{% if order.fulfillmentTotal > 1 %}
{{ order.shipping_name }}, um pacote do seu pedido foi entregue no ponto de retirada!
{% else %}
{{ order.shipping_name }}, seu pedido foi entregue no ponto de retirada!
{% endif %}
{% if order.shipping_extra.store_branch %}
Endereço de retirada:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Acompanhe a entrega da compra na página de status do pedido:
{{ order.statusPageUrl }}
{% endif %}
{% endif %}
Obrigado por comprar em {{store_name}}!
Atenciosamente,
{{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="pt">
<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 }}, um pacote do seu pedido foi entregue!</h1>
{% else %}
<h1>{{order.shipping_name}}, seu pedido foi entregue!</h1>
{% endif %}
<p>Seu pedido foi entregue neste endereço:</p>
<p>
Endereço: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}<br>
{% endif %}
Cidade: {{order.shipping_city}}<br>
CEP: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Estado: {{order.shipping_province}}
</p>
{% elseif order.fulfillmentShippingType == 'pickup' %}
{% if order.fulfillmentTotal > 1 %}
<h1>{{ order.shipping_name }}, um pacote do seu pedido foi entregue no ponto de retirada!</h1>
{% else %}
<h1>{{order.shipping_name}}, seu pedido foi entregue no ponto de retirada!</h1>
{% endif %}
{% if order.shipping_extra.store_branch %}
<h3>Endereço de retirada:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
<h3>{{ order.shipping_option }}</h3>
{% endif %}
{% endif %}
{% if order.statusPageUrl %}
<p>Acompanhe a entrega da compra na página de status do pedido:</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;">Siga o status do seu 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;">Siga o status do seu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p><strong> Obrigado por comprar em {{ store_name }}! </strong></p>
<p> Atenciosamente,<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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Pronto para retirada
Text
{% if fulfillment.fulfillment_total > 1 %}
Olá {{fulfillment.pickup_shipping_name}}, Seu pacote {{fulfillment.fulfillment_number}} de {{fulfillment.fulfillment_total}} do pedido #{{order.id}} em {{store_name}} está pronto para retirada.
{% else %}
Olá {{fulfillment.pickup_shipping_name}}, Seu pedido #{{order.id}} em {{store_name}} está pronto para retirada.
{% endif %}
Ponto de retirada: {{fulfillment.pickup_name}}
Endereço e horários de atendimento: {{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}}
Obrigado por comprar.
Atenciosamente,
{{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="pt">
<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;
}
.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>Olá {{fulfillment.pickup_shipping_name}},</h1>
<span class="text-gray">Seu pacote {{fulfillment.fulfillment_number}} de {{fulfillment.fulfillment_total}} do pedido #{{order.id}} em {{store_name}} está pronto para retirada.</span>
{% else %}
<h1>Olá {{fulfillment.pickup_shipping_name}}, </h1>
<span class="text-gray">Seu pedido #{{order.id}} em {{store_name}} está pronto para retirada.</span>
{% endif %}
<p>Ponto de retirada: <br>
<span class="text-gray">{{fulfillment.pickup_name}}</span>
</p>
<p>Endereço e horários de atendimento:<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">Obrigado por comprar.</span>
</p>
<p class="text-gray">
<span class="text-gray">Atenciosamente,</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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Edição de compra
Text
Olá {{contact_name}}, seu pedido #{{order.id}} em {{store_name}} foi atualizado.
{% for item in order.items %}
{% if item.is_kit %}
{{ item.quantity }} x {{item.name}} por {{ item.priceFormat }} cada um.
{% 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 um.
{% 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" %}
Desconto
{% elseif promotion.discount_script_type == "%off" %}
Desconto {{ promotion.percentage_off }}% OFF
{% elseif promotion.coupon_activated %}
Desconto do cupom
{% elseif promotion.is_cart_discount %}
{% if promotion.cart_discount.is_percentage %}
Desconto {{ promotion.cart_discount.value | round }}% OFF
{% else %}
Desconto
{% endif %}
{% else %}
Promoção {{ promotion.discount_script_type }}
{% endif %}
{% if promotion.scope_value_name and not promotion.is_cart_discount %}
em {{ promotion.scope_value_name }}
{% endif %}
{% if promotion.discount_script_type == "NAtX%off" %}
comprando {{ promotion.selected_threshold.quantity }} ou mais un.
{% endif %}: -{{promotion.total_discount_amount_short}}
{% endfor %}
{% if order.shipping_pickup_type != 'non-shippable' %}
{% if order.shipping_pickup_type == 'ship' %}Custo de frete: {% else %}Custo de entrega: {% endif %}{% if order.show_shipping_price %}{% if order.shipping == 0 %}Grátis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A combinar{% endif %}
{% endif %}
{% if order.discountCoupon > 0 %}
Desconto ({{order.coupon}}): {{order.discountCouponFormat}}
{% endif %}
{% if order.discountGateway > 0 %}
Desconto por {{order.paymentMethod}}: {{order.discountGatewayFormat}}
{% endif %}
Total: {{order.totalFormat}}
{% if order.shipping_pickup_type == 'non-shippable' %}
{% elseif order.shipping_pickup_type == 'ship' %}
Dados de envio:
Endereço: {{order.shipping_address}}
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}
{% endif %}
Cidade: {{order.shipping_city}}
CEP: {{order.shipping_zipcode}}
País: {{order.shipping_country}}
Estado: {{order.shipping_province}}
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
Endereço de retirada:
{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}
{% elseif order.shipping_option %}
{{ order.shipping_option }}
{% endif %}
{% if order.statusPageUrl %}
Siga o status do seu pedido neste link:
{{ order.statusPageUrl }}
{% endif %}
Atenciosamente,
{{store_name}}
* * *
Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere 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="pt">
<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>Olá {{contact_name}}, seu pedido #{{order.id}} em {{store_name}} foi atualizado.</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 um</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 um</small>
</td>
</tr>
{% endif %}
{% endfor %}
{% for promotion in order.promotional_discount.promotions_applied %}
<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 == "NAtX%off" %}
{{ promotion.selected_threshold.discount_decimal_percentage * 100 }}% OFF
{% elseif promotion.discount_script_type == "CrossSelling" %}
Desconto
{% elseif promotion.discount_script_type == "%off" %}
Desconto <strong>{{ promotion.percentage_off }}% OFF</strong>
{% elseif promotion.coupon_activated %}
Desconto do cupom
{% elseif promotion.is_cart_discount %}
{% if promotion.cart_discount.is_percentage %}
Desconto <strong>{{ promotion.cart_discount.value | round }}% OFF</strong>
{% else %}
Desconto
{% endif %}
{% else %}
Promoção {{ promotion.discount_script_type }}
{% endif %}
{% if promotion.scope_value_name and not promotion.is_cart_discount %}
em {{ promotion.scope_value_name }}
{% endif %}
{% if promotion.discount_script_type == "NAtX%off" %}
comprando {{ promotion.selected_threshold.quantity }} ou mais un.
{% 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>
{% 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' %}Custo de frete: {% else %}Custo 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 %}Grátis{% else %}{{order.shippingFormat}}{% endif %}{% else %}A combinar{% 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;">
Desconto (<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;">
Desconto 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>Dados de envio:</h3>
<p>
Endereço: {{order.shipping_address}}<br>
{% if order.shipping_floor %}
Complemento: {{order.shipping_floor}}<br>
{% endif %}
{% if order.shipping_locality %}
Bairro: {{order.shipping_locality}}<br>
{% endif %}
Cidade: {{order.shipping_city}}<br>
CEP: {{order.shipping_zipcode}}<br>
País: {{order.shipping_country}}<br>
Estado: {{order.shipping_province}}
</p>
{% elseif order.shipping_pickup_type == 'pickup' and order.shipping_extra.store_branch %}
<h3>Endereço de retirada:</h3>
<p>{{ order.shipping_extra.store_branch.name }} / {{ order.shipping_extra.store_branch.extra }}</p>
{% elseif order.shipping_option %}
<h3>{{ order.shipping_option }}</h3>
{% 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;">Siga o status do seu 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;">Siga o status do seu pedido</a>
</div>
</td>
</tr>
</table>
{% endif %}
<p>
Atenciosamente,<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>Se você não fez essa compra ou estava simplesmente testando nosso site, desconsidere este e-mail.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Nota fiscal
Text
Olá, {{ cart.contact_name }}.
A nota fiscal eletrônica (NF-e) da sua compra em {{ store_name }} já está disponível. Você pode acessar e baixar nos links abaixo:
- 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 um
{% endfor %}
Atenciosamente,
{{ store_name }}
Este é um e-mail automático. Não é necessário respondê-lo.
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="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sua nota fiscal está disponível!</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;">
Sua nota fiscal está disponível!
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 15px 0;">
Olá, {{ cart.contact_name }}.
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 15px 0;">
A nota fiscal eletrônica (NF-e) da sua compra em {{ store_name }} já está disponível.
</p>
<p class="body-text" style="color:#505050; font-size:14px; line-height:1.5; margin:0 0 20px 0;">
Você pode acessar e baixar nos botões abaixo:
</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;">
Acessar Nota Fiscal
</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;">
Baixar 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 um
</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;">
Atenciosamente,
</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 é um e-mail automático. Não é necessário respondê-lo.
</p>
</body>
</html>