Shopify Default Customer Order Notification
A duplicate of Shopify's standard customer notification.

Template

This template is perfect for anyone who wants to conditionally send an additional customer email notification but wants it to look exactly like Shopify's template. This is the default template we provide when you create a new immediate notification in Smart Order Notifications.
1
{% capture email_title %}Thank you for your purchase! {% endcapture %}
2
{% capture email_body %}Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.{% endcapture %}
3
4
<!DOCTYPE html>
5
<html lang="en">
6
<head>
7
<title>{{ email_title }}</title>
8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
9
<meta name="viewport" content="width=device-width">
10
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
11
<style>
12
.button__cell { background: {{ shop.email_accent_color }}; }
13
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
14
</style>
15
</head>
16
17
<body>
18
<table class="body">
19
<tr>
20
<td>
21
22
<table class="header row">
23
<tr>
24
<td class="header__cell">
25
<center>
26
27
<table class="container">
28
<tr>
29
<td>
30
31
<table class="row">
32
<tr>
33
<td class="shop-name__cell">
34
{% if shop.email_logo_url %}
35
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
36
{% else %}
37
<h1 class="shop-name__text">
38
<a href="{{shop.url}}">{{ shop.name }}</a>
39
</h1>
40
{% endif %}
41
</td>
42
43
<td class="order-number__cell">
44
<span class="order-number__text">
45
Order {{ order_name }}
46
</span>
47
</td>
48
</tr>
49
</table>
50
51
</td>
52
</tr>
53
</table>
54
55
</center>
56
</td>
57
</tr>
58
</table>
59
60
<table class="row content">
61
<tr>
62
<td class="content__cell">
63
<center>
64
<table class="container">
65
<tr>
66
<td>
67
68
<h2>{{ email_title }}</h2>
69
<p>{{ email_body }}</p>
70
{% if order_status_url %}
71
<table class="row actions">
72
<tr>
73
<td class="actions__cell">
74
<table class="button main-action-cell">
75
<tr>
76
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
77
</tr>
78
</table>
79
{% if shop.url %}
80
<table class="link secondary-action-cell">
81
<tr>
82
<td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
83
</tr>
84
</table>
85
{% endif %}
86
87
</td>
88
</tr>
89
</table>
90
91
{% else %}
92
{% if shop.url %}
93
<table class="row actions">
94
<tr>
95
<td class="actions__cell">
96
<table class="button main-action-cell">
97
<tr>
98
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
99
</tr>
100
</table>
101
</td>
102
</tr>
103
</table>
104
{% endif %}
105
106
{% endif %}
107
108
</td>
109
</tr>
110
</table>
111
</center>
112
</td>
113
</tr>
114
</table>
115
116
<table class="row section">
117
<tr>
118
<td class="section__cell">
119
<center>
120
<table class="container">
121
<tr>
122
<td>
123
<h3>Order summary</h3>
124
</td>
125
</tr>
126
</table>
127
<table class="container">
128
<tr>
129
<td>
130
131
132
<table class="row">
133
{% for line in line_items %}
134
135
{% if item_count == 1 %}
136
{% assign columnWrapperClass = 'order-list__item--single' %}
137
{% elsif forloop.first == true %}
138
{% assign columnWrapperClass = 'order-list__item--first' %}
139
{% elsif forloop.last == true %}
140
{% assign columnWrapperClass = 'order-list__item--last' %}
141
{% else %}
142
{% assign columnWrapperClass = '' %}
143
{% endif %}
144
<tr class="order-list__item {{columnWrapperClass}}">
145
<td class="order-list__item__cell">
146
<table>
147
<td>
148
{% if line.image %}
149
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
150
{% endif %}
151
</td>
152
<td class="order-list__product-description-cell">
153
{% if line.product.title %}
154
{% assign line_title = line.product.title %}
155
{% else %}
156
{% assign line_title = line.title %}
157
{% endif %}
158
<span class="order-list__item-title">{{ line_title }} × {{ line.quantity }}</span><br/>
159
{% if line.variant.title != 'Default Title' %}
160
<span class="order-list__item-variant">{{ line.variant.title }}</span>
161
{% endif %}
162
</td>
163
<td class="order-list__price-cell">
164
{% if line.original_line_price != line.line_price %}
165
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
166
{% endif %}
167
<p class="order-list__item-price">{{ line.line_price | money }}</p>
168
</td>
169
</table>
170
</td>
171
</tr>{% endfor %}
172
</table>
173
174
<table class="row subtotal-lines">
175
<tr>
176
<td class="subtotal-spacer"></td>
177
<td>
178
<table class="row subtotal-table">
179
{% if discounts %}
180
{% capture discount_title %}Discount {% if discounts.first.code %}({{ discounts.first.code }}){% endif %}{% endcapture %}
181
182
<tr class="subtotal-line">
183
<td class="subtotal-line__title">
184
<p>
185
<span>{{ discount_title }}</span>
186
</p>
187
</td>
188
<td class="subtotal-line__value">
189
<strong>{{ discounts_savings | money }}</strong>
190
</td>
191
</tr>
192
193
{% endif %}
194
195
196
<tr class="subtotal-line">
197
<td class="subtotal-line__title">
198
<p>
199
<span>Subtotal</span>
200
</p>
201
</td>
202
<td class="subtotal-line__value">
203
<strong>{{ subtotal_price | money }}</strong>
204
</td>
205
</tr>
206
207
208
<tr class="subtotal-line">
209
<td class="subtotal-line__title">
210
<p>
211
<span>Shipping</span>
212
</p>
213
</td>
214
<td class="subtotal-line__value">
215
<strong>{{ shipping_price | money }}</strong>
216
</td>
217
</tr>
218
219
220
{% for line in tax_lines %}
221
222
<tr class="subtotal-line">
223
<td class="subtotal-line__title">
224
<p>
225
<span>{{ line.title }}</span>
226
</p>
227
</td>
228
<td class="subtotal-line__value">
229
<strong>{{ line.price | money }}</strong>
230
</td>
231
</tr>
232
233
{% endfor %}
234
</table>
235
<table class="row subtotal-table subtotal-table--total">
236
237
<tr class="subtotal-line">
238
<td class="subtotal-line__title">
239
<p>
240
<span>Total</span>
241
</p>
242
</td>
243
<td class="subtotal-line__value">
244
<strong>{{ total_price | money_with_currency }}</strong>
245
</td>
246
</tr>
247
248
</table>
249
250
{% assign transaction_size = 0 %}
251
{% for transaction in transactions %}
252
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
253
{% assign transaction_size = transaction_size | plus: 1 %}
254
{% endunless %}
255
{% endfor %}
256
257
{% if transaction_size > 1 %}
258
<table class="row subtotal-table">
259
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
260
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
261
262
{% for transaction in transactions %}
263
{% if (transaction.status == "success") and (transaction.kind == "authorization" or transaction.kind == "sale") %}
264
{% if transaction.payment_details.credit_card_company %}
265
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
266
{% else %}
267
{% capture transaction_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
268
{% endif %}
269
270
271
<tr class="subtotal-line">
272
<td class="subtotal-line__title">
273
<p>
274
<span>{{transaction_name}}</span>
275
</p>
276
</td>
277
<td class="subtotal-line__value">
278
<strong>{{ transaction.amount | money }}</strong>
279
</td>
280
</tr>
281
282
{% endif %}
283
{% if transaction.kind == 'refund' %}
284
{% if transaction.payment_details.credit_card_company %}
285
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
286
{% else %}
287
{% assign refund_method_title = transaction.gateway %}
288
{% endif %}
289
290
291
<tr class="subtotal-line">
292
<td class="subtotal-line__title">
293
<p>
294
<span>Refund</span>
295
<br>
296
<small>{{ refund_method_title | capitalize }}</small>
297
</p>
298
</td>
299
<td class="subtotal-line__value">
300
<strong>- {{ transaction.amount | money }}</strong>
301
</td>
302
</tr>
303
304
{% endif %}
305
{% endfor %}
306
</table>
307
{% endif %}
308
</td>
309
</tr>
310
</table>
311
312
313
</td>
314
</tr>
315
</table>
316
</center>
317
</td>
318
</tr>
319
</table>
320
321
<table class="row section">
322
<tr>
323
<td class="section__cell">
324
<center>
325
<table class="container">
326
<tr>
327
<td>
328
<h3>Customer information</h3>
329
</td>
330
</tr>
331
</table>
332
<table class="container">
333
<tr>
334
<td>
335
336
<table class="row">
337
<tr>
338
{% if requires_shipping and shipping_address %}
339
<td class="customer-info__item">
340
<h4>Shipping address</h4>
341
<p>
342
{{ shipping_address.name }}<br/>
343
{{ shipping_address.address1 }}
344
{% if shipping_address.address2 %}
345
<br/>{{ shipping_address.address2 }}
346
{% endif %}
347
<br/>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}
348
<br/>{{ shipping_address.country }}
349
</p>
350
351
</td>
352
{% endif %}
353
{% if billing_address %}
354
<td class="customer-info__item">
355
<h4>Billing address</h4>
356
<p>
357
{{ billing_address.name }}<br/>
358
{{ billing_address.address1 }}
359
{% if billing_address.address2 %}
360
<br/>{{ billing_address.address2 }}
361
{% endif %}
362
<br/>{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}
363
<br/>{{ billing_address.country }}
364
</p>
365
366
</td>
367
{% endif %}
368
</tr>
369
</table>
370
<table class="row">
371
<tr>
372
<td class="customer-info__item">
373
<h4>Shipping method</h4>
374
<p>{{ shipping_method.title }}</p>
375
</td>
376
<td class="customer-info__item">
377
<h4>Payment method</h4>
378
{% for transaction in transactions %}
379
{% if (transaction.status == "success") and (transaction.kind == "authorization" or transaction.kind == "sale") %}
380
<p class="customer-info__item-content">
381
{% if transaction.payment_details.credit_card_company %}
382
{% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase }}.png{% endcapture %}
383
<img src="{{ credit_card_url | shopify_asset_url }}" class="customer-info__item-credit" height="24">
384
<span>Ending in {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ total_price | money }}</strong></span>
385
{% else %}
386
{{ transaction.gateway | replace: "_", " " | capitalize }} — <strong>{{ transaction.amount | money }}</strong>
387
{% endif %}
388
</p>
389
{% endif %}
390
{% endfor %}
391
</td>
392
</tr>
393
</table>
394
395
</td>
396
</tr>
397
</table>
398
</center>
399
</td>
400
</tr>
401
</table>
402
403
<table class="row footer">
404
<tr>
405
<td class="footer__cell">
406
<center>
407
<table class="container">
408
<tr>
409
<td>
410
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
411
</td>
412
</tr>
413
</table>
414
</center>
415
</td>
416
</tr>
417
</table>
418
419
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
420
421
</td>
422
</tr>
423
</table>
424
</body>
425
</html>
Copied!
Copy link