Shopify Default Merchant Order Notification

A duplicate of Shopify's standard merchant / staff notification template

Template

This template is perfect for anyone who wants to conditionally send an additional merchant / staff / fulfilment notification email but wants it to look exactly like Shopify's template.

<!DOCTYPE html><html lang="en" style="font-size: 14px; font-weight: 400; line-height: 20px; text-transform: initial; letter-spacing: initial; color: #202223; font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; margin: 0; padding: 0;"><head>
  <title>
    New order placed
</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width"/>


  <style data-premailer="ignore">
    .button__cell { background: #ca0a07; }
    a, a:hover, a:active, a:visited { color: #ca0a07; }
    @media print{
      body {
        color: black !important;
      }

      .subtitle-lines,
      .subtotal-line__title,
      .subtotal-line__value {
        padding: 0 !important;
        margin: 0 !important;
      }

      .subtotal-table {
        margin: 0 !important;
      }
    }
  </style>
<style>body {
margin: 0 !important; padding: 0;
}
body {
height: 100%; width: 100%;
}
img {
border: 0; height: auto; line-height: 0; outline: none; text-decoration: none; vertical-align: top; -ms-interpolation-mode: bicubic;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
body {
-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
font-size: 14px; font-weight: 400; line-height: 20px; text-transform: initial; letter-spacing: initial; color: #202223; font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.mail-button:hover {
background-color: #007658; border-color: #007658;
}
@media (max-width: 600px) {
  .mail-body__content {
    padding: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: none !important; border-radius: 0 !important; width: 100% !important; margin-top: 0 !important;
  }
  .container.section {
    margin-top: 16px !important;
  }
  .banner-container {
    margin-top: 8px !important;
  }
  .main-action-cell {
    float: none !important; margin-right: 0 !important;
  }
  .secondary-action-cell {
    text-align: center; width: 100%;
  }
  .row.content {
    width: 100% !important; padding: 20px !important;
  }
  .customer-info__item {
    display: block; width: 100% !important;
  }
  .subtotal-spacer {
    display: none;
  }
  .banner-alert__table {
    margin-top: 16px !important; margin-bottom: 16px !important;
  }
}
@media screen and (min-width: breakpoint(display-text)) {
  .mail-button {
    font-size: 14px;
  }
}
</style>
</head>

    <body style="height: 100%; width: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 14px; font-weight: 400; line-height: 20px; text-transform: initial; letter-spacing: initial; color: #202223; font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; margin: 0; padding: 0;">
        <table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
            <tbody><tr class="mail-priority-indicator mail-priority-indicator--low" style="margin-top: 0; margin-bottom: 0; padding: 0;">
                <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; border-top-style: solid; height: 0; border-top-color: #C9CCCF; padding: 0; border-width: 5px 0 0;"></td>
            </tr>
        </tbody></table>
        <table class="body" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
            <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
                <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">


                    <table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="section__cell" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <center>
        <table class="container section" style="width: 100%; border-collapse: initial; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; max-width: 470px; text-align: left; border-radius: 8px; margin: 32px auto 0; padding: 0 20px; border: 1px solid #c9cccf;" cellpadding="0" cellspacing="0">
          <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
            <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

                        <table class="row content" style="width: 100%; border-collapse: initial !important; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 20px 4px;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="content__cell " style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <center>
        <table class="container" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
          <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
            <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

                            <table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
                                <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
                                    <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

{% assign current_date = created_at | date: "%b %d" %}
{% assign current_time = created_at | date: "%l:%M %P" %}

{% if customer.name %}
                                            {{ customer.name }} placed order {{ name }}  on {{ current_date }} at {{ current_time | strip }}.
                                        {% else %}
                                            Someone placed order {{ name }}  on {{ current_date }} at {{ current_time | strip }}.
                                        {% endif %}

                                        <table class="row actions" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 20px; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="empty-line" style="line-height: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;"> </td>
  </tr>
  <tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="actions__cell" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <table class="button main-action-cell" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; float: left; margin-right: 16px; padding: 0;" cellpadding="0" cellspacing="0">
        <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
          <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

<a href="https://{{ shop.domain }}/admin/orders/{{ id }}" class="mail-button" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; margin-top: 0; margin-bottom: 0; color: white; text-decoration: none; font-weight: 400; text-transform: initial; letter-spacing: initial; display: inline-block; font-size: 14px; line-height: 1.41; background-color: #008060; border-radius: 4px; padding: 0; border-color: #008060; border-style: solid; border-width: 8px 16px;">View order</a></td>
        </tr>
      </tbody></table>
    </td>
  </tr>
</tbody></table>

                                    </td>
                                </tr>
                            </tbody></table>

            </td>
          </tr>
        </tbody></table>
      </center>
    </td>
  </tr>
</tbody></table>
                        <table class="row content" style="width: 100%; border-collapse: initial !important; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; border-top-width: 1px; border-top-color: #C9CCCF; border-top-style: solid; padding: 20px 4px;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="content__cell " style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <center>
        <table class="container" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
          <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
            <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

                            <strong class="order-list__summary-title" style="color: #202223; font-weight: 600; font-size: 16px;">Order summary</strong>
                            <br/>
                            <br/>

<table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">

{% for line in line_items %}

  <tbody><tr class="order-list__item" style="margin-top: 0; margin-bottom: 0; width: 100%; padding: 0;">
    <td class="order-list__item__cell" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0 0 20px; border: 0;">
      <table style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
        <tbody><tr><td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
{% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image" style="height: 50px; line-height: 0; outline: none; text-decoration: none; vertical-align: top; -ms-interpolation-mode: bicubic; width: 50px; margin-right: 16px; border-radius: 4px; border: 1px solid #c9cccf;"/>
 {% endif %}
        </td>
        <td class="order-list__product-description-cell" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; width: 100%; padding: 0; border: 0;">

{% if line.quantity < line.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.quantity  %}
          {% endif %}


          <span class="order-list__item-title" style="font-size: 14px; line-height: 1.42; color: #202223;">

             {% if line.product.title == blank %}
              {{ line.title }}</span><br/>
            {% else %}
              {{ line.product.title }}
            {% endif %}

          </span><br/>


{% if line.quantity %}
            {% if line.original_line_price != line.final_line_price %}
              <span><del class="order-list__item-original-price">{{ line.original_price | money }}</del></span>
            {% endif %}
             <span>{{ line.final_price | money }} × {{ line.quantity }} </span><br/>
          {% endif %}

{% if line.variant.title != 'Default Title' %}
            <span class="order-list__item-variant" style="font-size: 14px; line-height: 1.42; color: #6D7175;">{{ line.variant.title }}</span>

{% if line.sku != blank %}
              <span class="order-list__item-variant" style="font-size: 14px; line-height: 1.42; color: #6D7175;">• </span>

        {% endif %}
          {% endif %}
{% if line.sku != blank %}
            <span class="order-list__item-variant" style="font-size: 14px; line-height: 1.42; color: #6D7175;">SKU: {{ line.sku }}</span>
{% endif %}



        </td>
          <td class="order-list__price-cell" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; white-space: nowrap; padding: 0; border: 0;">
            <p class="order-list__item-price" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 20px; font-weight: 400; margin: 0 0 0 16px; padding: 0;" align="right">

{% assign final_line_price = line.final_line_price | plus: 0 %}

             {% if final_line_price > 0 %}
                {{ line.final_line_price | money }}
              {% else %}
                Free
              {% endif %}
            </p>
          </td>
      </tr></tbody></table>
    </td>
  </tr>{% endfor %}
</tbody></table>

                            <table class="row subtotal-lines" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <table class="row subtotal-table" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">





<tbody><tr class="subtotal-line" style="margin-top: 0; margin-bottom: 0; padding: 0;">
  <td class="subtotal-line__title" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
    <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 1.42em; margin: 0; padding: 0;">

        <span>Subtotal</span>

    </p>
  </td>
  <td class="subtotal-line__value" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;" align="right">

      {{ subtotal_price | money }}

  </td>
</tr>






<tr class="subtotal-line" style="margin-top: 0; margin-bottom: 0; padding: 0;">
  <td class="subtotal-line__title" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
    <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 1.42em; margin: 0; padding: 0;">

        <span>Shipping</span>

        <span class="subtotal-line__discount" style="margin-left: 4px;">
          <span class="subtotal-line__discount-title" style="line-height: 1.42em; color: #6D7175;">({{ shipping_method.title }})</span>
        </span>
    </p>
  </td>
  <td class="subtotal-line__value" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;" align="right">

      {{ shipping_price | money }}

  </td>
</tr>



{% for tax_line in tax_lines %}

<tr class="subtotal-line" style="margin-top: 0; margin-bottom: 0; padding: 0;">
  <td class="subtotal-line__title" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
    <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 1.42em; margin: 0; padding: 0;">

        <span>Tax</span>

        <span class="subtotal-line__discount" style="margin-left: 4px;">
          <span class="subtotal-line__discount-title" style="line-height: 1.42em; color: #6D7175;">{% if tax_line.title.size > 0 %}({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%){% endif %}</span>
        </span>
    </p>
  </td>
  <td class="subtotal-line__value" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;" align="right">

      {{ tax_line.price | money }}

  </td>
</tr>

{% endfor %}

      </tbody></table>
      <table class="row subtotal-table subtotal-table--total" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">

<tbody><tr class="subtotal-line" style="margin-top: 0; margin-bottom: 0; padding: 0;">
  <td class="subtotal-line__title" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; font-weight: bold; padding: 20px 0 0; border: 0;">
    <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 1.42em; margin: 0; padding: 0;">

        <span>Total</span>

    </p>
  </td>
  <td class="subtotal-line__value" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; font-weight: bold; padding: 20px 0 0; border: 0;" align="right">

      {{ total_price | money_with_currency }}
  </td>
</tr>

      </tbody></table>
    </td>
  </tr>
</tbody></table>


            </td>
          </tr>
        </tbody></table>
      </center>
    </td>
  </tr>
</tbody></table>
                        <table class="row content" style="width: 100%; border-collapse: initial !important; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; border-top-width: 1px; border-top-color: #C9CCCF; border-top-style: solid; padding: 20px 4px;" cellpadding="0" cellspacing="0">
  <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
    <td class="content__cell " style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">
      <center>
        <table class="container" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
          <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
            <td style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0; border: 0;">

{% if gateway %}
                                <table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
                                    <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
                                        <td class="customer-info__item customer-info__item--last" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; width: 50%; padding: 0; border: 0;">
                                            <strong style="color: #202223;">Payment processing method</strong>
                                            <br/>
                                            <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 20px; margin: 0; padding: 0;">{{ gateway }}</p>
                                        </td>
                                    </tr>
                                </tbody></table>

{% endif %}

                     <br/>
                                <table class="row" style="width: 100%; border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding: 0;" cellpadding="0" cellspacing="0">
                                    <tbody><tr style="margin-top: 0; margin-bottom: 0; padding: 0;">
                                        <td class="customer-info__item customer-info__item--last" style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; width: 50%; padding: 0; border: 0;">
                                            <strong style="color: #202223;">Shipping address</strong>
                                            <br/>
                                            <p style="-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #202223; line-height: 20px; margin: 0; padding: 0;">
                                                {{ shipping_address.name }}<br>
                                                {{ shipping_address.address1 }}<br>
                                                {% unless shipping_address.address2  == blank %}
                                                {{ shipping_address.address2 }}<br>
                                                {% endunless %}
                                                {{ shipping_address.city }},
                                                {{ shipping_address.province }}
                                                {{ shipping_address.zip }}<br>
                                                {{ shipping_address.country }}<br>
                                                {{ shipping_address.phone }}<br>
                                            </p>
                                        </td>
                                    </tr>
                                </tbody></table>

            </td>
          </tr>
        </tbody></table>
      </center>
    </td>
  </tr>
</tbody></table>

            </td>
          </tr>
        </tbody></table>
      </center>
    </td>
  </tr>
</tbody></table>


                </td>
            </tr>
        </tbody></table>


</body></html>

Last updated