d
Topic
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5853
December 31, 2014
g
6

Halfling -> Better email nofitications for Shopify

From our good friend Lance Sells:

http://www.halfling.co/

Fork the repo here: https://github.com/lancesells/Halfling

In two flavors.... Hobbiton:

 

And Dul Guldur:

http://shopifyplus.com ::: http://twitter.com/bacchus
i
Replies
Lance Sells Shopify Partner www.thwipster.com
Posts:
53
December 31, 2014
g
2
upvotes

Thanks Jamie!

Working with other Shopify stores I noticed I was recreating these emails quite a bit. So I decided to start on these templates for not only myself but share it with everyone else.

The trickiest thing is you need to remember to inline the CSS with the tool from Zurb. Otherwise nothing will look right.

Let me know if you have any questions about it. 

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
December 31, 2014

Also, I can not stress the importance of working on these transactional emails. Customers open them far greater than a newsletter so make them shine. I've done things in the past like add in upselling other products. This stuff works!

Posts:
151
January 04, 2015

Wow! Templates look great! Thanks for sharing, Lance!

If you allow a little off-topic. Do you use some kind of an app to track transactional email performance? I've been testing Spently app but they still have lots of work to do. Are there any other solutions?

Another question. How did you useв to add upsell recommendations? Manually?

Once more. Thanks for great emais! 

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
Lance Sells Shopify Partner www.thwipster.com
Posts:
53
January 04, 2015

For testing performance in a simple way I use Google Analytics. I actually added in campaign tags to the links in those templates so those notifications will show up in GA automatically for analyzing. What I did was use the name of the Shopify notification as the campaign name so you can see exactly which ones are which without any confusion.

As far as upsell I have always done them manually as I don't think there's logic to bring in similar products through these.

For other transactional emails though I use Klaviyo which can have more dynamic content in your emails.

 

Posts:
151
January 04, 2015

Thanks for your answer, Lance! 

Yep, taging links is a good idea.

But I was thinking of tracking open and click-through rates. Besides, if I want to a/b test two different email templates we need to know at least how many of each variant we've sent and counting them manually is not an easy task.

I agree that similar products won't do.

 

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
Lance Sells Shopify Partner www.thwipster.com
Posts:
53
January 05, 2015

Don't know how extensive you want to go but you could put a tracking pixel in the emails to track opens. Click-rates will show up in GA.

As far as A/B testing that would be awesome and I would love it but I have a feeling that's not in the Shopify Roadmap.

Posts:
151
January 06, 2015

Yep. Unfortunately, Shopify doesn't allow much freedom with email notifications. I'd basically be happy to be able to turn off native emails and send everything via Mandrill. 

 

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
Lance Sells Shopify Partner www.thwipster.com
Posts:
53
January 06, 2015

That would certainly be ideal and I've tried to figure out a hack for that myself. :)

Posts:
1
March 09, 2015

This is fantastic, thanks so much.

I've used one of your order confirmation templates and would really like to add some social media buttons to the bottom of the email, after lots of trying I have failed! Any pointers on how to do it would be much appreciated!

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
March 11, 2015

Hi Kate,

I can help you with that. Do you want to paste a code snippet of what you're trying to do? 

Marcus Member
Posts:
5
May 12, 2015

Thanks Lance for creating these!

I'm having a bit of trouble getting the product images to appear in the e-mails though.   Is it also possible to put the variant image they ordered as well?

Posts:
23
June 24, 2015

Does your shipping confirmation allow you to track multiple purchases? This is something that has been broken forever for me but can't seem to fix it.

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
June 25, 2015

Hi Andrea,

You mean with multiple tracking numbers in one email? I'm sure if that's possible in notificiations but let me have a look and try to get that updated in there.

Aaron Shopify Partner www.theshoppad.com
Posts:
26
June 26, 2015

Hi Andrea!

We have a new app called Tracktor that allows your customers to view the progress for multiple fulfillments with one link. It's easy to add into your transactional emails and if you want you'll also be able to let your customers check their order/shipping status right from your site.

https://apps.shopify.com/tracktor-2

lmk if you have any questions (aaron at theshoppad com)

roosbeach Member
Posts:
7
July 13, 2015

Hi there, great info here, thank you.
We are working on optimising our notifications, adding social media info and also a link to a post-purchase survey. Perhaps products as well, later down the line. 
I have tried adding images, and they show up in the preview, however, in the email they are showing as ? question marks? Amny ideas how to fix this? 
I've attached a bit of the code. 
Thank you!!

Screen shot 2015 07 13 at 10.57.33 thumb
Posts:
315
July 13, 2015

add http: before //cdn. So, it should be http://cdn...

www.spicydesign.ca  http://experts.shopify.com/spicydesign
roosbeach Member
Posts:
7
July 13, 2015

So simple. Thank you!! I really appreciate it! 

Posts:
53
August 01, 2015
g
1
upvotes

Would love to get this to but just cant figure it out im afreid...

Allt the best Peter
Posts:
45
August 31, 2015

Hi Guys,

I've added the custom email and it looks great! Question though, I sent a test email to myself and on my mobile phone, the prices are getting cut and smushed onto two-lines. Like this:

https://www.dropbox.com/s/8nbfslxpfxvf1d4/Screenshot%202015-08-31%2011.41.39.png?dl=0

Any help would be greatly appreciated.

Thanks!

Zach

Posts:
30
September 25, 2015

I love the template, but the line is not centered for me and I thought adding <hr align="center" /> would solve the line being pushed to the right, but I was wrong.  Any suggestions would be greatly appreciated. 

Posts:
45
November 11, 2015

Hi all,

I know Shopify is releasing an update to its email templates to include updates with the tracking information of a package when it is shipped. Does this template need to incorporate that update? Any help / guidance would be greatly appreciated. Thank you.

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
November 11, 2015

I didn't know they were updating it but I've planned on doing some fixes shortly. I'll incorporate anything new in the templates and post an update here!

Posts:
45
November 11, 2015

Awesome, thanks so much Lance. Look forward to seeing the update. Also, if by chance you can include some help with mobile funcitonality in the update (some of the numbers get cut off on my phone when loading the email), that'd be awesome. Let me know if you don't know the change I'm referencing that Shopify is releasing with tracking numbers.

Thanks!

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
November 12, 2015

Hey Zach,

Let me know what numbers are getting cut of on the phone/client with what template. It's all optimized for mobile but possibly something is broken.

BTW, gmail is terrible on the desktop and mobile and most likely you aren't seeing anything changing on a phone since they don't support media queries.

Posts:
45
November 12, 2015

Hi Lance,

Thanks so much for your reply. I'm attaching a picture of the font that gets cutoff on my phone. BUT!, I just resent myself another test email and this time the font showed up fine, not cutoff at all, looked perfect. So not sure why it was off the previous time. Maybe something got fixed automatically within the last 3 months? Let me know if that image doesn't come over.

Thanks!

Zach

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
January 11, 2016

Does anyone have a link to the new notifications docs? Haven't been able to find them. Going to get this updated!

Posts:
17
February 11, 2016

I followed the instructions - got it to work once for the order confirmation so moved onto the others and none now work. **shrug**

Would look great if I could figure it out!

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
February 11, 2016

Marion,

Did you run them through the css inliner? 

http://foundation.zurb.com/emails/inliner.html

Posts:
17
February 13, 2016

This is what I did -

Clicked on the github - opened hobbiton - open order confirmation - copy line 1 to 1010 (no changes to script) - opened http://foundation.zurb.com/emails/inliner.html - pasted into frame - click convert email - it does magical things!

pop-up appears with your template - copied by highlight right click copy  - opened shopify notifications - opened order conf email - click html email - removed all text - pasted new in place - click save

opened order conf email - preview - text is all squished together.

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
February 15, 2016

That sonuds right but something is definitely going wrong. Want to post your email before and after you use the inliner? I can check it out. 

Posts:
17
Last edited February 15, 2016

Before - copy + paste from your github

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";
<html xmlns=";
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>
	<style>
	/**********************************************
	* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
	**********************************************/
	
	/* Client-specific Styles & Reset */
	
	#outlook a { 
	  padding:0; 
	} 
	
	body{ 
	  width:100% !important; 
	  min-width: 100%;
	  -webkit-text-size-adjust:100%; 
	  -ms-text-size-adjust:100%; 
	  margin:0; 
	  padding:0;
	}
	
	.ExternalClass { 
	  width:100%;
	} 
	
	.ExternalClass, 
	.ExternalClass p, 
	.ExternalClass span, 
	.ExternalClass font, 
	.ExternalClass td, 
	.ExternalClass div { 
	  line-height: 100%; 
	} 
	
	#backgroundTable { 
	  margin:0; 
	  padding:0; 
	  width:100% !important; 
	  line-height: 100% !important; 
	}
	
	img { 
	  outline:none; 
	  text-decoration:none; 
	  -ms-interpolation-mode: bicubic;
	  width: auto;
	  max-width: 100%; 
	  float: left; 
	  clear: both; 
	  display: block;
	}
	
	center {
	  width: 100%;
	  min-width: 580px;
	}
	
	a img { 
	  border: none;
	}
	
	p {
	  margin: 0 0 0 10px;
	}
	
	table {
	  border-spacing: 0;
	  border-collapse: collapse;
	}
	
	td { 
	  word-break: break-word;
	  -webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  hyphens: auto;
	  border-collapse: collapse !important; 
	}
	
	table, tr, td {
	  padding: 0;
	  vertical-align: top;
	  text-align: left;
	}
	
	hr {
	  color: #d9d9d9; 
	  background-color: #d9d9d9; 
	  height: 1px; 
	  border: none;
	}
	
	/* Responsive Grid */
	
	table.body {
	  height: 100%;
	  width: 100%;
	}
	
	table.container {
	  width: 580px;
	  margin: 0 auto;
	  text-align: inherit;
	}
	
	table.row { 
	  padding: 0px; 
	  width: 100%;
	  position: relative;
	}
	
	table.container table.row {
	  display: block;
	}
	
	td.wrapper {
	  padding: 10px 20px 0px 0px;
	  position: relative;
	}
	
	table.columns,
	table.column {
	  margin: 0 auto;
	}
	
	table.columns td,
	table.column td {
	  padding: 0px 0px 10px; 
	}
	
	table.columns td.sub-columns,
	table.column td.sub-columns,
	table.columns td.sub-column,
	table.column td.sub-column {
	  padding-right: 10px;
	}
	
	td.sub-column, td.sub-columns {
	  min-width: 0px;
	}
	
	table.row td.last,
	table.container td.last {
	  padding-right: 0px;
	}
	
	table.one { width: 30px; }
	table.two { width: 80px; }
	table.three { width: 130px; }
	table.four { width: 180px; }
	table.five { width: 230px; }
	table.six { width: 280px; }
	table.seven { width: 330px; }
	table.eight { width: 380px; }
	table.nine { width: 430px; }
	table.ten { width: 480px; }
	table.eleven { width: 530px; }
	table.twelve { width: 580px; }
	
	table.one center { min-width: 30px; }
	table.two center { min-width: 80px; }
	table.three center { min-width: 130px; }
	table.four center { min-width: 180px; }
	table.five center { min-width: 230px; }
	table.six center { min-width: 280px; }
	table.seven center { min-width: 330px; }
	table.eight center { min-width: 380px; }
	table.nine center { min-width: 430px; }
	table.ten center { min-width: 480px; }
	table.eleven center { min-width: 530px; }
	table.twelve center { min-width: 580px; }
	
	table.one .panel center { min-width: 10px; }
	table.two .panel center { min-width: 60px; }
	table.three .panel center { min-width: 110px; }
	table.four .panel center { min-width: 160px; }
	table.five .panel center { min-width: 210px; }
	table.six .panel center { min-width: 260px; }
	table.seven .panel center { min-width: 310px; }
	table.eight .panel center { min-width: 360px; }
	table.nine .panel center { min-width: 410px; }
	table.ten .panel center { min-width: 460px; }
	table.eleven .panel center { min-width: 510px; }
	table.twelve .panel center { min-width: 560px; }
	
	.body .columns td.one,
	.body .column td.one { width: 8.333333%; }
	.body .columns td.two,
	.body .column td.two { width: 16.666666%; }
	.body .columns td.three,
	.body .column td.three { width: 25%; }
	.body .columns td.four,
	.body .column td.four { width: 33.333333%; }
	.body .columns td.five,
	.body .column td.five { width: 41.666666%; }
	.body .columns td.six,
	.body .column td.six { width: 50%; }
	.body .columns td.seven,
	.body .column td.seven { width: 58.333333%; }
	.body .columns td.eight,
	.body .column td.eight { width: 66.666666%; }
	.body .columns td.nine,
	.body .column td.nine { width: 75%; }
	.body .columns td.ten,
	.body .column td.ten { width: 83.333333%; }
	.body .columns td.eleven,
	.body .column td.eleven { width: 91.666666%; }
	.body .columns td.twelve,
	.body .column td.twelve { width: 100%; }
	
	td.offset-by-one { padding-left: 50px; }
	td.offset-by-two { padding-left: 100px; }
	td.offset-by-three { padding-left: 150px; }
	td.offset-by-four { padding-left: 200px; }
	td.offset-by-five { padding-left: 250px; }
	td.offset-by-six { padding-left: 300px; }
	td.offset-by-seven { padding-left: 350px; }
	td.offset-by-eight { padding-left: 400px; }
	td.offset-by-nine { padding-left: 450px; }
	td.offset-by-ten { padding-left: 500px; }
	td.offset-by-eleven { padding-left: 550px; }
	
	td.expander {
	  visibility: hidden;
	  width: 0px;
	  padding: 0 !important;
	}
	
	table.columns .text-pad,
	table.column .text-pad {
	  padding-left: 10px;
	  padding-right: 10px;
	}
	
	table.columns .left-text-pad,
	table.columns .text-pad-left,
	table.column .left-text-pad,
	table.column .text-pad-left {
	  padding-left: 10px;
	}
	
	table.columns .right-text-pad,
	table.columns .text-pad-right,
	table.column .right-text-pad,
	table.column .text-pad-right {
	  padding-right: 10px;
	}
	
	/* Block Grid */
	
	.block-grid {
	  width: 100%;
	  max-width: 580px;
	}
	
	.block-grid td {
	  display: inline-block;
	  padding:10px;
	}
	
	.two-up td {
	  width:270px;
	}
	
	.three-up td {
	  width:173px;
	}
	
	.four-up td {
	  width:125px;
	}
	
	.five-up td {
	  width:96px;
	}
	
	.six-up td {
	  width:76px;
	}
	
	.seven-up td {
	  width:62px;
	}
	
	.eight-up td {
	  width:52px;
	}
	
	/* Alignment & Visibility Classes */
	
	table.center, td.center {
	  text-align: center;
	}
	
	h1.center,
	h2.center,
	h3.center,
	h4.center,
	h5.center,
	h6.center {
	  text-align: center;
	}
	
	span.center {
	  display: block;
	  width: 100%;
	  text-align: center;
	}
	
	img.center {
	  margin: 0 auto;
	  float: none;
	}
	
	.show-for-small,
	.hide-for-desktop {
	  display: none;
	}
	
	.right {
		text-align: right;
	}
	.left {
		text-align: left;
	}
	
	td.lesspadding {
		padding-top: 6px;
	}
	table.columns td.lesspadding, table.column td.lesspadding {
		padding-bottom: 0px;
	}
	p.margintop8 {
		margin-top: 8px;
	}
	td.line hr {
		margin: 0px;
	}
	
	/* Typography */
	
	body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
	  color: #222222;
	  /* font-family: "Helvetica", "Arial", sans-serif; */
	  font-family: "Georgia", "Times", serif;
	  font-weight: normal; 
	  padding:0; 
	  margin: 0;
	  text-align: center; 
	  line-height: 1.3;
	}
	
	h1, h2, h3, h4, h5, h6 {
	  word-break: normal;
	  text-align: center;
	}
	
	h1 {font-size: 40px;}
	h2 {font-size: 36px;}
	h3 {font-size: 32px;}
	h4 {font-size: 28px;}
	h5 {font-size: 24px;}
	h6 {font-size: 20px;}
	body, table.body, p, td {font-size: 14px;line-height:19px;}
	
	p.lead, p.lede, p.leed {
	  font-size: 18px;
	  line-height:21px;
	}
	
	p { 
	  margin-bottom: 10px;
	  text-align: center; 
	  color: #606060;
	}
	
	small {
	  font-size: 10px;
	}
	
	a {
	  color: #e85e00; 
	  text-decoration: none;
	}
	
	a:hover { 
	  color: #fc7418 !important;
	}
	
	a:active { 
	  color: #fc7418 !important;
	}
	
	a:visited { 
	  color: #fc7418 !important;
	}
	
	h1 a, 
	h2 a, 
	h3 a, 
	h4 a, 
	h5 a, 
	h6 a {
	  color: #e85e00;
	}
	
	h1 a:active, 
	h2 a:active,  
	h3 a:active, 
	h4 a:active, 
	h5 a:active, 
	h6 a:active { 
	  color: #fc7418 !important; 
	} 
	
	h1 a:visited, 
	h2 a:visited,  
	h3 a:visited, 
	h4 a:visited, 
	h5 a:visited, 
	h6 a:visited { 
	  color: #fc7418 !important; 
	} 
	
	.small {
		font-size: 12px; 
		}
	.strong {
		font-weight: bold;
	}
	.emphasis {
		font-style: italic;
	}
	.red {
		color: red;
	}
	.light {
		color: #7d7d7d;
	}
	
	/* Panels */
	
	.panel {
	  background: #f2f2f2;
	  padding: 16px !important;
	}
	
	.sub-grid table {
	  width: 100%;
	}
	
	.sub-grid td.sub-columns {
	  padding-bottom: 0;
	}
	
	/* Buttons */
	
	table.button,
	table.tiny-button,
	table.small-button,
	table.medium-button,
	table.large-button {
	  width: 100%;
	  overflow: hidden;
	}
	
	table.button td,
	table.tiny-button td,
	table.small-button td,
	table.medium-button td,
	table.large-button td {
	  display: block;
	  width: auto !important;
	  text-align: center;
	  background: #e85e00;
	  color: #ffffff;
	  padding: 14px 0;
	}
	
	table.tiny-button td {
	  padding: 5px 0 4px;
	}
	
	table.small-button td {
	  padding: 8px 0 7px;
	}
	
	table.medium-button td {
	  padding: 12px 0 10px;
	}
	
	table.large-button td {
	  padding: 21px 0 18px;
	}
	
	table.button td a,
	table.tiny-button td a,
	table.small-button td a,
	table.medium-button td a,
	table.large-button td a {
	  font-weight: bold;
	  text-decoration: none;
	  font-family: Helvetica, Arial, sans-serif;
	  font-family: Georgia, Times, serif;
	  color: #ffffff !important;
	  font-size: 16px;
	}
	
	table.tiny-button td a {
	  font-size: 12px;
	  font-weight: normal;
	}
	
	table.small-button td a {
	  font-size: 16px;
	}
	
	table.medium-button td a {
	  font-size: 20px;
	}
	
	table.large-button td a {
	  font-size: 24px;
	}
	
	table.button:hover td,
	table.button:visited td,
	table.button:active td {
	  background: #fc7418 !important;
	}
	
	table.button:hover td a,
	table.button:visited td a,
	table.button:active td a {
	  color: #fff !important;
	}
	
	table.button:hover td,
	table.tiny-button:hover td,
	table.small-button:hover td,
	table.medium-button:hover td,
	table.large-button:hover td {
	  background: #fc7418 !important;
	}
	
	table.button:hover td a,
	table.button:active td a,
	table.button td a:visited,
	table.tiny-button:hover td a,
	table.tiny-button:active td a,
	table.tiny-button td a:visited,
	table.small-button:hover td a,
	table.small-button:active td a,
	table.small-button td a:visited,
	table.medium-button:hover td a,
	table.medium-button:active td a,
	table.medium-button td a:visited,
	table.large-button:hover td a,
	table.large-button:active td a,
	table.large-button td a:visited {
	  color: #ffffff !important; 
	}
	
	table.secondary td {
	  background: #e9e9e9;
	  border-color: #d0d0d0;
	  color: #555;
	}
	
	table.secondary td a {
	  color: #555;
	}
	
	table.secondary:hover td {
	  background: #d0d0d0 !important;
	  color: #555;
	}
	
	table.secondary:hover td a,
	table.secondary td a:visited,
	table.secondary:active td a {
	  color: #555 !important;
	}
	
	table.success td {
	  background: #5da423;
	  border-color: #457a1a;
	}
	
	table.success:hover td {
	  background: #457a1a !important;
	}
	
	table.alert td {
	  background: #c60f13;
	  border-color: #970b0e;
	}
	
	table.alert:hover td {
	  background: #970b0e !important;
	}
	
	table.radius td {
	  -webkit-border-radius: 3px;
	  -moz-border-radius: 3px;
	  border-radius: 3px;
	}
	
	table.round td {
	  -webkit-border-radius: 500px;
	  -moz-border-radius: 500px;
	  border-radius: 500px;
	}
	
	/* Outlook First */
	
	body.outlook p {
	  display: inline !important;
	}
	
	.preheader{
			margin-top: 8px;
		}
		
	.header {
		margin-top: 0px;
	}
		
	/*  Media Queries */
	
	@media only screen and (max-width: 600px) {
	
	  table[class="body"] img {
	    width: auto !important;
	    height: auto !important;
	  }
	
	  table[class="body"] center {
	    min-width: 0 !important;
	  }
	
	  table[class="body"] .container {
	    width: 95% !important;
	  }
	
	  table[class="body"] .row {
	    width: 100% !important;
	    display: block !important;
	  }
	
	  table[class="body"] .wrapper {
	    display: block !important;
	    padding-right: 0 !important;
	  }
	
	  table[class="body"] .columns,
	  table[class="body"] .column {
	    table-layout: fixed !important;
	    float: none !important;
	    width: 100% !important;
	    padding-right: 0px !important;
	    padding-left: 0px !important;
	    display: block !important;
	  }
	
	  table[class="body"] .wrapper.first .columns,
	  table[class="body"] .wrapper.first .column {
	    display: table !important;
	  }
	
	  table[class="body"] table.columns td,
	  table[class="body"] table.column td {
	    width: 100% !important;
	  }
	
	  table[class="body"] .columns td.one,
	  table[class="body"] .column td.one { width: 8.333333% !important; }
	  table[class="body"] .columns td.two,
	  table[class="body"] .column td.two { width: 16.666666% !important; }
	  table[class="body"] .columns td.three,
	  table[class="body"] .column td.three { width: 25% !important; }
	  table[class="body"] .columns td.four,
	  table[class="body"] .column td.four { width: 33.333333% !important; }
	  table[class="body"] .columns td.five,
	  table[class="body"] .column td.five { width: 41.666666% !important; }
	  table[class="body"] .columns td.six,
	  table[class="body"] .column td.six { width: 50% !important; }
	  table[class="body"] .columns td.seven,
	  table[class="body"] .column td.seven { width: 58.333333% !important; }
	  table[class="body"] .columns td.eight,
	  table[class="body"] .column td.eight { width: 66.666666% !important; }
	  table[class="body"] .columns td.nine,
	  table[class="body"] .column td.nine { width: 75% !important; }
	  table[class="body"] .columns td.ten,
	  table[class="body"] .column td.ten { width: 83.333333% !important; }
	  table[class="body"] .columns td.eleven,
	  table[class="body"] .column td.eleven { width: 91.666666% !important; }
	  table[class="body"] .columns td.twelve,
	  table[class="body"] .column td.twelve { width: 100% !important; }
	
	  table[class="body"] td.offset-by-one,
	  table[class="body"] td.offset-by-two,
	  table[class="body"] td.offset-by-three,
	  table[class="body"] td.offset-by-four,
	  table[class="body"] td.offset-by-five,
	  table[class="body"] td.offset-by-six,
	  table[class="body"] td.offset-by-seven,
	  table[class="body"] td.offset-by-eight,
	  table[class="body"] td.offset-by-nine,
	  table[class="body"] td.offset-by-ten,
	  table[class="body"] td.offset-by-eleven {
	    padding-left: 0 !important;
	  }
	
	  table[class="body"] table.columns td.expander {
	    width: 1px !important;
	  }
	
	  table[class="body"] .right-text-pad,
	  table[class="body"] .text-pad-right {
	    padding-left: 10px !important;
	  }
	
	  table[class="body"] .left-text-pad,
	  table[class="body"] .text-pad-left {
	    padding-right: 10px !important;
	  }
	
	  table[class="body"] .hide-for-small,
	  table[class="body"] .show-for-desktop {
	    display: none !important;
	  }
	
	  table[class="body"] .show-for-small,
	  table[class="body"] .hide-for-desktop {
	    display: inherit !important;
	  }
	}
	</style>
</head>
<body>
  	<table class="body">
	    <tr>
	      	<td class="center" align="center" valign="top">
		        <center>
		        	<table class="container">
						<tr>
							<td>
							<!-- Preheader -->
							<table class="row">
								<tr>
									<td class="wrapper last lesspadding">
										<table class="twelve columns">
											<tr>
												<td class="lesspadding">
												<p class="small">
													Your order has been received.
												</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Header -->
							<table class="row header">
								<tr>
									<td class="wrapper last header">
										<table class="twelve columns">
											<tr>
												<td>
												<!-- Use either a logo or your shop name as text. -->
												<!-- Shop Name -->
												<h1><a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ shop.name }}</a></h1>											<!-- Logo -->
											<!-- 	<a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ 'logo.png' | asset_url | img_tag: shop.name }}</a> -->
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Order Details -->
							<table class="row header">
								<tr>
									<td class="wrapper last">
										<table class="twelve columns">
											<tr>
												<td>
												<h4 class="center">Thank you for your order.</h4>
												<p class="margintop8">{% if billing_address.first_name %}Hi {{ billing_address.first_name }},<br />{% endif %}This is confirmation that we've received your order. Thank you!<br />Order {{ name }} | {{ date | date: "%B %d, %Y at %I:%M%p" }}</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Shipping & Billing Address -->
							<table class="row">
								<tr>
									<td class="wrapper">
										<table class="six columns">
											<tr>
												<td class="center">
												<span class="small strong">Shipping Here</span><br />
												{% if requires_shipping %} 
												{{ shipping_address.name }}<br />
												{{ shipping_address.street }}<br />
												{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}<br />
												{{ shipping_address.country }}
												{% else %}
												No shipping required.
												{% endif %}
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
									<td class="wrapper last">
										<table class="six columns">
											<tr>
												<td class="center">
												<span class="small strong">Paid By</span><br />
												{{ billing_address.name }}<br />
												{{ billing_address.street }}<br />
												{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}<br />
												{{ billing_address.country }}
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Line -->	
							<table class="row">
						        <tr>
						          <td class="wrapper last line">
									  <table class="twelve columns">
										  <tr>
											  <td>
												  <hr />
											  </td>
											  <td class="expander"></td>
										  </tr>
									  </table>
						          </td>
						        </tr>
						    </table>
							<!-- Product Details -->
							<table class="row">
								<tr>
									<td class="wrapper">
										<table class="twelve columns lineitems">
											<tr class="lineitems">
												<td class="two sub-columns small left hide-for-small">
												</td>
												<td class="five sub-columns small left">
												Product
												</td>
												<td class="four sub-columns small">
												Quantity
												</td>
												<td class="one sub-columns last left">
												Price
												</td>
											</tr>
											
											{% for line in line_items %}
											<tr class="lineitems">
												<td class="two sub-columns hide-for-small">
													{% if line.line_item.product.featured_image %}<img src="{{ line.line_item.product.featured_image | product_img_url: 'thumb' }}" />{% endif %}
												</td>
												<td class="five sub-columns left">
									
												<!-- If your product has a '-' in the title this will mess it up. -->
												{% assign productTitle = line.title | split: '-' %}
													<strong>{{ productTitle[0] }}</strong><br />
													<span class="light">{{ productTitle[1] }}</span>
												</td>
												<td class="four sub-columns center">{{ line.quantity }}</td>
												<td class="one sub-columns left">{{ line.line_price | money }}</td>
											</tr>
											{% endfor %}
											
											{% if discounts %}
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong red right">
													Discount
												</td>
												<td class="one sub-columns red left">
													{{ discounts_savings | money }}
												</td>
											</tr>
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong right">
													Subtotal
												</td>
												<td class="one sub-columns left">{{ subtotal_price | money }}</td>
											</tr>
											{% else %}
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong right">
													Subtotal
												</td>
												<td class="one sub-columns left">{{ subtotal_price | money }}</td>
											</tr>
											{% endif %}
											
											{% for tax_line in tax_lines %}
											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right small strong">
													{{ tax_line.title }}
												</td>
												<td class="one sub-columns left">{{ tax_line.price | money }}</td>
											</tr>
											{% endfor %}
											
											{% if requires_shipping %} 
											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right small strong">
													Shipping
												</td>
												<td class="one sub-columns left">{{ shipping_price | money }}</td>
											</tr>
											{% endif %}
											
											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right">
													<h5 class="right">Total</h5>
													
												</td>
												<td class="one sub-columns">
													<h5 class="left">{{ total_price | money }}</h5>
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>			
							<!-- Line -->	
							<table class="row">
						        <tr>
						          <td class="wrapper last line">
									  <table class="twelve columns">
										  <tr>
											  <td>
												  <hr />
											  </td>
											  <td class="expander"></td>
										  </tr>
									  </table>
						          </td>
						        </tr>
						    </table>
							<!-- Customer Service -->
							<table class="row">
								<tr>
									<td class="wrapper last">
										<table class="twelve columns">
											<tr>
												<td>
													<p><span class="strong">Questions about your order?</span><br />Simply reply to this email and we'll answer any questions you have.</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>	
							<!-- Footer -->
							<table class="row">
								<tr>
									<td class="wrapper last lesspadding">
										<table class="twelve columns">
											<tr>
												<td class="lesspadding"><p class="emphasis small"><span class="strong">Thank you.</span><br />{{ shop.name }}</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							</td>
						</tr>
					</table>
		        </center>
	      	</td>
	    </tr>
  	</table>
</body>
</html>

And then the inline

Your order has been received.

{{ shop.name }}
Thank you for your order.
{% if billing_address.first_name %}Hi {{ billing_address.first_name }},
{% endif %}This is confirmation that we've received your order. Thank you!
Order {{ name }} | {{ date | date: "%B %d, %Y at %I:%M%p" }}

Shipping Here
{% if requires_shipping %} {{ shipping_address.name }}
{{ shipping_address.street }}
{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}
{{ shipping_address.country }} {% else %} No shipping required. {% endif %}	
Paid By
{{ billing_address.name }}
{{ billing_address.street }}
{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}
{{ billing_address.country }}	
{% for line in line_items %} {% endfor %} {% if discounts %} {% else %} {% endif %} {% for tax_line in tax_lines %} {% endfor %} {% if requires_shipping %} {% endif %}
Product	Quantity	Price
{% if line.line_item.product.featured_image %}{% endif %}	{% assign productTitle = line.title | split: '-' %} {{ productTitle[0] }}
{{ productTitle[1] }}	{{ line.quantity }}	{{ line.line_price | money }}
Discount	{{ discounts_savings | money }}
Subtotal	{{ subtotal_price | money }}
Subtotal	{{ subtotal_price | money }}
{{ tax_line.title }}	{{ tax_line.price | money }}
Shipping	{{ shipping_price | money }}
Total
{{ total_price | money }}
Questions about your order?
Simply reply to this email and we'll answer any questions you have.

Thank you.
{{ shop.name }}


But then ... =================

vincent Member
Posts:
3
Last edited 12 months ago

Hey, just a heads up. There's the Spently app you can use to track transactional email performance: # sent, opens, clicks, ROI. 

They've updated the app and you can also include dynamic product recommendations and discounts in the templates.

Hope this helps!

Lance Sells Shopify Partner www.thwipster.com
Posts:
53
7 months ago

I went to update Halfling tonight with the newish notifications and realized it's pretty much not needed anymore. Default email notifications are solid and responsive. Everyone in agreement?

Posts:
2
13 days ago

Hi!!!

I hope ypu can help me!! Im looking to format my Order Confirmation Email so that my official website (xinu.mx) is featured inside of the green button that currently features VISIT THE STORE. I cant find where i  the template,,, 

 

Thanks!!