Transactional Email Templates

The below email HTML templates can be copied and pasted into Ordergroove to use as a starting point when designing and developing your subscription transactional emails.

  • Bulk Subscription Started
  • Credit Card Expiration Warning
  • Item Out of Stock Day 1
  • Item Out of Stock Day 15
  • Item Out of Stock Day 30
  • Order Not Placed Credit Card Expired
  • Order Not Placed Credit Card Issue
  • Order Not Placed Generic Issue
  • Order Reminder
  • Reactivated Subscription
  • Subscription Canceled Item Discontinued
  • Subscription Canceled By Customer

Bulk Subscription Started

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Welcome! Thank you for joining the <!---Place your companies subscription service name here --->Your Company Subscription Serivce.
While being a subscriber you will enjoy the following benefits:
<!---Place your companies subscription service name here --->
Your Subscription Program benefits go here.
</p>
<p>
Access to your account can be found <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">here</a>.
</p>
</td>
</tr>
</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Subscription Summary
</th>
</tr>
<tr><td>{{#subscriptions}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<a href="{{this.product.url}}"><img src="{{this.product.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<strong>Product:</strong><a href="{{this.product.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.product.name}}</a><br>
<strong>Qty:</strong> {{this.quantity}}<br>
<strong>Frequency:</strong> {{this.frequency}}<br>
<strong>Price:</strong> ${{this.unit_price}}<br>
</td>
</tr>
<tr><td>{{/subscriptions}}</td></tr>
</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Credit Card Expiration Warning


<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Thank you for being a valued customer.
We wanted to let you know that the credit card we have on file for your order will expire soon.
</p>
<p>
To ensure there are no delays in your future shipment(s), please take a moment to update the payment information in your account <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">here</a>.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>
<tr><td>{{#items}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{this.url}}"><img src="{{this.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{this.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.name}}</a><br>
<strong>Qty:</strong> {{this.qty}}<br>
<!-- <strong>Frequency:</strong> {{this.frequency}}<br> -->
<!-- <strong>Price:</strong> ${{this.subscription_price}}<br> -->
</td>

</tr>

<tr><td>{{/items}}</td></tr>
<!-- <tr>
<td class="mob3" width="40%" style="padding-top:5px"></td>
<td class="mob3" width="60%" style="padding-top:5px; padding-left:10px">
<strong>Order Subtotal*:</strong> ${{order.subtotal}}<br>
<em><span style="font-size: 12px">*Taxes may apply</span></em>
</td>
</tr> -->

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Item Out of Stock Day 1

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Thank you for being a valued customer.
</p>
<p>
Unfortunately, your subscription product is currently out of stock and we cannot process your order today.
We will process the order as soon as the product is back in stock or send you an update in 15 days.
</p>
<p>
The following item is out of stock:
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{item.url}}"><img src="{{item.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{item.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{item.name}}</a><br>
<strong>Qty:</strong> {{item.qty}}<br>

</td>

</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Item Out of Stock Day 15

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Thank you for being a valued customer.
</p>
<p>
Unfortunately, your subscription product remains out of stock and we cannot process your order today.
We will process the order as soon as the product is back in stock.
If the product does not become available within the next 15 days, we will cancel this order and process the order on your next delivery date (if the product is available at that time).
</p>
<p>
The following item remains out of stock:
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{item.url}}"><img src="{{item.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{item.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{item.name}}</a><br>
<strong>Qty:</strong> {{item.qty}}<br>

</td>

</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Item Out of Stock Day 30

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Thank you for participating in our Subscription program.
Unfortunately, your order could not be processed because your product is still out of stock.
We have cancelled this order. <em>Your subscription for this item will remain active and we will include this item on your next order, if the product is available at that time</em>.
You will receive an Order Reminder email before your next shipment.
</p>
<p>
The following order has been cancelled for:
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{item.url}}"><img src="{{item.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{item.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{item.name}}</a><br>
<strong>Qty:</strong> {{item.qty}}<br>

</td>

</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Luckily, many of our other great products are still available.
Please visit <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">companywebsite.com</a> if you would like to set up a Subscription for an alternate product.
</p>
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer service at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Order Not Placed Credit Card Expired

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Unfortunately, we were unable to process your order with the credit card, ending in {{payment.last4}}, we have on file.
Please update your account information as soon as possible to avoid any interuption in receiving your subscription item(s).
</p>
<p>
You can update your payment details <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">here</a> and
then hit ‘send now’ to process your current order with the updated information.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>
<tr><td>{{#items}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{this.url}}"><img src="{{this.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{this.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.name}}</a><br>
<strong>Qty:</strong> {{this.qty}}<br>
<!-- <strong>Frequency:</strong> {{this.frequency}}<br> -->
<!-- <strong>Price:</strong> ${{this.subscription_price}}<br> -->
</td>

</tr>

<tr><td>{{/items}}</td></tr>
<!-- <tr>
<td class="mob3" width="40%" style="padding-top:5px"></td>
<td class="mob3" width="60%" style="padding-top:5px; padding-left:10px">
<strong>Order Subtotal*:</strong> ${{order.subtotal}}<br>
<em><span style="font-size: 12px">*Taxes may apply</span></em>
</td>
</tr> -->

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Order Not Placed Credit Card Issue

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Unfortunately, we were unable to process your order because of issues with your payment information.
Please update your account information as soon as possible to avoid any interuption with your subscription item(s) below.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>
<tr><td>{{#items}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{this.url}}"><img src="{{this.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{this.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.name}}</a><br>
<strong>Qty:</strong> {{this.qty}}<br>
<!-- <strong>Frequency:</strong> {{this.frequency}}<br> -->
<!-- <strong>Price:</strong> ${{this.subscription_price}}<br> -->
</td>

</tr>

<tr><td>{{/items}}</td></tr>
<!-- <tr>
<td class="mob3" width="40%" style="padding-top:5px"></td>
<td class="mob3" width="60%" style="padding-top:5px; padding-left:10px">
<strong>Order Subtotal*:</strong> ${{order.subtotal}}<br>
<em><span style="font-size: 12px">*Taxes may apply</span></em>
</td>
</tr> -->

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Please review and correct your payment information in the My Subscription section of our <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a>.
In particular, please review the following:
</p>
<ul>
<li>Shipping Address</li>
<li>Billing Address</li>
<li>Payment Information</li>
</ul>
<p>
If you did find issues and were able to correct them, you will need to take the following action for us to reprocess your order:
</p>
<ul>
<li>Go to the My Subscription section of our <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a></li>
<li>Click the ‘Send Now’ button to process your current order with the updated information</li>
</ul>
<p>
Please allow up to 24 hours for the changes to process.
</p>
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Order Not Placed Generic Issue

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Unfortunately, we were unable to process your order because of issues with your account information.
Please update your account information as soon as possible to avoid any interuption with your subscription item(s) below.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>
<tr><td>{{#items}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{this.url}}"><img src="{{this.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{this.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.name}}</a><br>
<strong>Qty:</strong> {{this.qty}}<br>
<!-- <strong>Frequency:</strong> {{this.frequency}}<br> -->
<!-- <strong>Price:</strong> ${{this.subscription_price}}<br> -->
</td>

</tr>

<tr><td>{{/items}}</td></tr>
<!-- <tr>
<td class="mob3" width="40%" style="padding-top:5px"></td>
<td class="mob3" width="60%" style="padding-top:5px; padding-left:10px">
<strong>Order Subtotal*:</strong> ${{order.subtotal}}<br>
<em><span style="font-size: 12px">*Taxes may apply</span></em>
</td>
</tr> -->

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Please review and correct your account information in the My Subscription section of our <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a>.
In particular, please review that the following are up to date:
</p>
<ul>
<li>Shipping Address</li>
<li>Billing Address</li>
<li>Payment Information</li>
</ul>
<p>
If you did find issues and were able to correct them, you will need to take the following action for us to reprocess your order:
</p>
<ul>
<li>Go to the My Subscription section of our <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a></li>
<li>Click the ‘Send Now’ button to process your current order with the updated information</li>
</ul>
<p>
Please allow up to 24 hours for the changes to process.
</p>
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
We apologize for the inconvenience and look forward to shipping your product(s) soon!
<p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Order Reminder

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Good news! Your next subscription order will be placed on {{order.place_date_long}}.
If you’d like to make adjustments or add additional items, please log into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>

<!-- <fieldset style="color: #000000; border-top: 1px solid #cecece;">
<legend style=" padding: 0px 10px; text-align: left; font-weight: 600;">
Order Details
</legend>
</fieldset> -->
</td>
</tr>
</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Order Details
</th>

</tr>
<tr><td>{{#items}}</td></tr>
<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<a href="{{this.url}}"><img src="{{this.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0;">
<strong>Product:</strong><a href="{{this.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{this.name}}</a><br>
<strong>Qty:</strong> {{this.qty}}<br>
<!-- <strong>Frequency:</strong> {{this.frequency}}<br> -->
<strong>Price:</strong> ${{this.subscription_price}}<br>
</td>

</tr>

<tr><td>{{/items}}</td></tr>
<tr>
<td class="mob3" width="40%" style="padding-top:5px"></td>
<td class="mob3" width="60%" style="padding-top:5px; padding-left:10px">
<strong>Order Subtotal*:</strong> ${{order.subtotal}}<br>
<em><span style="font-size: 12px">*Taxes may apply</span></em>
</td>
</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 10px 10px 0px 10px">
<tr>
<th style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Shipping Address
</th>
</tr>
<tr>
<td style="border-bottom: 1px solid #cecece">
<p>{{shipping_address.address_1}} {{shipping_address.address_2}}<br>
{{shipping_address.town}}, {{shipping_address.state}} {{shipping_address.zip}}
</p>
</td>
</tr>
</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Reactivated Subscription

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
Welcome back! Your <!---Place your companies subscription service name here --->Your Company Subscription Serivce has been successfully reactivated.
While being a subscriber you will enjoy the following benefits:
<!---Place your companies subscription service name here --->
Your Subscription Program benefits go here.
</p>
<p>
Access to your account can be found <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">here</a>.
</p>
</td>
</tr>
</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Subscription Summary
</th>
</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<a href="{{this.product.url}}"><img src="{{this.product.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<strong>Product:</strong><a href="{{subscription.product.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{subscription.product.name}}</a><br>
<strong>Qty:</strong> {{subscription.quantity}}<br>
<strong>Frequency:</strong> {{subscription.frequency}}<br>
<strong>Price:</strong> ${{subscription.price}}<br>
</td>
</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Manage your subscriptions and view your upcoming orders by logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Subscription Canceled Item Discontinued

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
We’re sorry to inform you that {{subscription.product.name}} is no longer available for subscription,
so we have cancelled your associated <!---Place your companies subscription service name here --->Your Comapany Subscripiton Serive subscription.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Item Discontinued
</th>
</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<a href="{{this.product.url}}"><img src="{{this.product.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<strong>Product:</strong> <a href="{{subscription.product.url}}" style="color:#000000; text-decoration:none;" target="_blank">{{subscription.product.name}}</a><br>
<!-- <strong>Qty:</strong> {{subscription.quantity}}<br>
<strong>Frequency:</strong> {{subscription.frequency}}<br>
<strong>Price:</strong> ${{subscription.price}}<br> -->
</td>
</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
Fortunately, We have many other products that are available for subscription, so please visit <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> today to find another product that you'll love.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>

Subscription Canceled By Customer

<!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="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">

fieldset {
border: #ffffff;
}

.wrapper {
background: #cecece;
}

td, table {
font-family: lato, sans-serif;
background: #ffffff;
/* border-collapse: collapse !important; */

}

@media (max-width: 480px) {
.mob {
display: inline-block !important;
width: 100% !important;
padding: 5px !important;
border-bottom: none !important;
/* text-align: center !important; */
}

.mob2 {
display: block !important;
width: 100% !important;
text-align: left !important;
/* padding: 5px !important; */
}
.mob3 {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0px 5px 5px 10px !important;
}
}
</style>
</head>
<table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="width: 600px; padding: 20px 20px">
<tr>
<td>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="550" style="width: 550px; padding: 5px 20px">
<tr>
<td>
<!------------------ HEADER GOES HERE ----------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 30px 10px 10px 10px; text-align:center; border-bottom: 1px solid #cecece">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/header_logo.png" width="500"></a>
</td>
</tr>
</table>

<!-------------------- END HEADER ------------------------------->

<!-------------------- START BODY ------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px">
<p>
Hello {{first_name}},
</p>
<p>
You have successfully cancelled your <!---Place your companies subscription service name here --->Your Company Subscription Serivce.
No new shippments associated with this item will be delivered.
</p>

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

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%; padding: 0px 10px 10px 10px">
<tr>
<th colspan="2" style="padding-bottom: 5px; text-align:left; border-bottom: 1px solid #cecece">
Subscription Cancelled
</th>
</tr>

<tr>
<td class="mob" width="40%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<a href="{{this.product.url}}"><img src="{{this.product.img_url}}" width="150" style="width:150px" /></a>
</td>
<td class="mob2" width="60%" style="padding: 10px 10px; border-bottom: 1px solid #f0f0f0">
<strong>Product:</strong><a href="{{subscription.product.url}}" style="color:#000000; text-decoration:none;" target="_blank"> {{subscription.product.name}}</a><br>
<!-- <strong>Qty:</strong> {{subscription.quantity}}<br>
<strong>Frequency:</strong> {{subscription.frequency}}<br>
<strong>Price:</strong> ${{subscription.price}}<br> -->
</td>
</tr>

</table>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 10px; border-bottom: 1px solid #cecece">
<p>
We’d love to have you back.
You can reactivate your subscription at any time by visiting the Your Company Subscription Service section of <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a>
and logging into your <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">account</a>.
</p>
<p>
If you have any additional questions regarding the Your Company Subscription Service, please visit our
<a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">website</a> or contact customer serivce at <a href="#" target="_blank" style="text-decoration: none; color: #000000; font-weight: bold">yourcompanyemail@sample.com</a>
</p>
<p>
Thank you,
</p>
<p>
The Your Company Team
</p>
</td>
</tr>
</table>

<!------------------------- END EMAIL BODY --------------------------------------------->

<!------------------------- START FOOTER ---------------------------------------------->

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%">
<tr>
<td style="padding: 20px 10px 10px 10px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; text-align:center">

<tr>
<td width="25%" style="padding: 0px 5px" >
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/facebook_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/instagram_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/twitter_black.png" width="35"></a>
</td>
<td width="25%" style="padding: 0px 5px">
<a href="#" target="_blank"><img src="https://storage.googleapis.com/ordergroove-static-assets/essentials/pinterest_black.png" width="35"></a>
</td>
</tr>
<tr>
<td colspan="4" >
<p>
FOLLOW US
</p>
<p style="font-size: 12px">
<a href="#" target="_blank" style="text-decoration:none; color: #000000;">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="text-decoration:none; color: #000000;">Terms & Conditions</a>
</p>
<p style="font-size: 10px">
Your Company INC. 555 Some st, Brooklyn, NY 11221
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!------------------------------- END FOOTER --------------------------------------->

</td>
</tr>
</table>
</td>
</tr>
</table>
</html>