E-mails automáticos

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.

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

Text

Olá {{contact_name}}, seu pedido foi cancelado

{% if reason == 'customer' %}Cancelamos seu pedido #{{order.id}} conforme a sua solicitação.{% elseif reason == 'inventory' %}Tivemos que cancelar seu pedido #{{order.id}} porque não temos estoque suficiente para completá-lo.{% elseif reason =='fraud' %}Tivemos que cancelar seu pedido #{{order.id}} porque não houve aprovação cadastral.{% elseif reason =='expired' %}}Cancelamos seu pedido #{{order.id}} porque ele expirou.{% else %}Tivemos que cancelar seu pedido #{{order.id}} por razões alheias à empresa.{% endif %}

{% if payment_status == 'voided' %}Não se preocupe, nós cancelamos seu pagamento.{% elseif payment_status == 'refunded' %}Não se preocupe, devolvemos seu dinheiro integralmente.{% endif %}

Diante de qualquer dúvida, não deixe de responder essa mensagem. 
Estamos à sua disposição!

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>Olá {{contact_name}}, seu pedido foi cancelado</h1>

                                                <p>{% if reason == 'customer' %}Cancelamos seu pedido <strong>#{{order.id}}</strong> conforme a sua solicitação.{% elseif reason == 'inventory' %}Tivemos que cancelar seu pedido <strong>#{{order.id}}</strong> porque não temos estoque suficiente para completá-lo.{% elseif reason =='fraud' %}Tivemos que cancelar seu pedido <strong>#{{order.id}}</strong> porque não houve aprovação cadastral.{% elseif reason =='expired' %}}Cancelamos seu pedido <strong>#{{order.id}}</strong> porque ele expirou.{% else %}Tivemos que cancelar seu pedido <strong>#{{order.id}}</strong> por razões alheias à empresa.{% endif %}</p>
                                                {% if payment_status == 'voided' %}<p>Não se preocupe, nós cancelamos seu pagamento.{% elseif payment_status == 'refunded' %}<p>Não se preocupe, devolvemos seu dinheiro integralmente.</p>{% endif %}
                                                <p>Diante de qualquer dúvida, não deixe de responder essa mensagem.<br>Estamos à sua disposição!</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 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>