June 21, 2022

How to add a custom Shopify Notification Email template - Order Confirmation

Posted on June 21, 2022  (Last modified on June 23, 2022 )
9368 words

In this tutorial we will be replacing the default email Order confirmation template with a custom one that is modern and unique. Also you will be able to add your logo, colors and images plus a discount code! All this without the need of an app. So let’s get started

  1. Go to Settings > Notifications then click on Order confirmation under Orders section
  2. Copy and paste the following code inside Email body (HTML):
   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169
 170
 171
 172
 173
 174
 175
 176
 177
 178
 179
 180
 181
 182
 183
 184
 185
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224
 225
 226
 227
 228
 229
 230
 231
 232
 233
 234
 235
 236
 237
 238
 239
 240
 241
 242
 243
 244
 245
 246
 247
 248
 249
 250
 251
 252
 253
 254
 255
 256
 257
 258
 259
 260
 261
 262
 263
 264
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384
 385
 386
 387
 388
 389
 390
 391
 392
 393
 394
 395
 396
 397
 398
 399
 400
 401
 402
 403
 404
 405
 406
 407
 408
 409
 410
 411
 412
 413
 414
 415
 416
 417
 418
 419
 420
 421
 422
 423
 424
 425
 426
 427
 428
 429
 430
 431
 432
 433
 434
 435
 436
 437
 438
 439
 440
 441
 442
 443
 444
 445
 446
 447
 448
 449
 450
 451
 452
 453
 454
 455
 456
 457
 458
 459
 460
 461
 462
 463
 464
 465
 466
 467
 468
 469
 470
 471
 472
 473
 474
 475
 476
 477
 478
 479
 480
 481
 482
 483
 484
 485
 486
 487
 488
 489
 490
 491
 492
 493
 494
 495
 496
 497
 498
 499
 500
 501
 502
 503
 504
 505
 506
 507
 508
 509
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521
 522
 523
 524
 525
 526
 527
 528
 529
 530
 531
 532
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548
 549
 550
 551
 552
 553
 554
 555
 556
 557
 558
 559
 560
 561
 562
 563
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616
 617
 618
 619
 620
 621
 622
 623
 624
 625
 626
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636
 637
 638
 639
 640
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651
 652
 653
 654
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682
 683
 684
 685
 686
 687
 688
 689
 690
 691
 692
 693
 694
 695
 696
 697
 698
 699
 700
 701
 702
 703
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727
 728
 729
 730
 731
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741
 742
 743
 744
 745
 746
 747
 748
 749
 750
 751
 752
 753
 754
 755
 756
 757
 758
 759
 760
 761
 762
 763
 764
 765
 766
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776
 777
 778
 779
 780
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800
 801
 802
 803
 804
 805
 806
 807
 808
 809
 810
 811
 812
 813
 814
 815
 816
 817
 818
 819
 820
 821
 822
 823
 824
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834
 835
 836
 837
 838
 839
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853
 854
 855
 856
 857
 858
 859
 860
 861
 862
 863
 864
 865
 866
 867
 868
 869
 870
 871
 872
 873
 874
 875
 876
 877
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904
 905
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925
 926
 927
 928
 929
 930
 931
 932
 933
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944
 945
 946
 947
 948
 949
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959
 960
 961
 962
 963
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978
 979
 980
 981
 982
 983
 984
 985
 986
 987
 988
 989
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
{% assign banner_image = "http://placehold.jp/600x427.png" %}
{% assign discount_image = "http://placehold.jp/1181x1280.png" %}
{% assign amount_off = "$10 OFF" %}
{% assign discount_code = "DISCOUNT10" %}

{% capture email_title %}
  Thanks for your purchase!
{% endcapture %}

{% capture hero_title %}
  <strong style="box-sizing: border-box;">Thanks for your</strong><br>
  <strong style="box-sizing: border-box;">purchase!</strong>
{% endcapture %}

{% capture hero_description %}
  {% if requires_shipping %}
    {% case delivery_method %}
      {% when 'pick-up' %}
        You’ll receive an email when your order is ready for pickup.
      {% when 'local' %}
        Hi {{ customer.first_name }}, we're getting your order ready for delivery.
      {% else %}
        Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been
        sent.
    {% endcase %}
    {% if delivery_instructions != blank %}
      <p>
        <b>Delivery information:</b>
        {{ delivery_instructions }}
      </p>
    {% endif %}
    {% if consolidated_estimated_delivery_time %}
      <p>
        Estimated delivery
        <b>{{ consolidated_estimated_delivery_time }}</b>
      </p>
    {% endif %}
  {% endif %}
{% endcapture %}

<!doctype html>
<html style="box-sizing: border-box;">
  <head style="box-sizing: border-box;">
    <meta charset="utf-8" style="box-sizing: border-box;">
    <meta name="viewport" content="width=device-width" style="box-sizing: border-box;">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" style="box-sizing: border-box;">
    <meta name="x-apple-disable-message-reformatting" style="box-sizing: border-box;">
    <title style="box-sizing: border-box;"></title>
    <style style="box-sizing: border-box;">
      @media all {
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%;
        }
        .apple-link a {
          color: inherit !important;
          font-family: inherit !important;
          font-size: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
          text-decoration-line: none !important;
          text-decoration-thickness: initial !important;
          text-decoration-style: initial !important;
          text-decoration-color: initial !important;
        }
        #MessageViewBody a {
          color: inherit;
          text-decoration-line: none;
          text-decoration-thickness: initial;
          text-decoration-style: initial;
          text-decoration-color: initial;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        .btn-primary table td:hover {
          background-color: rgb(52, 73, 94) !important;
        }
        .btn-primary a:hover {
          background-color: rgb(52, 73, 94) !important;
          border-top-color: rgb(52, 73, 94) !important;
          border-right-color: rgb(52, 73, 94) !important;
          border-bottom-color: rgb(52, 73, 94) !important;
          border-left-color: rgb(52, 73, 94) !important;
        }
      }
      @media only screen and (min-width: 768px) {
        .mobile-only table,
        .mobile-only td {
          padding-top: 0px !important;
          padding-bottom: 0px !important;
          padding-left: 0px !important;
          padding-right: 0px !important;
          padding: 0px !important;
          mso-padding-alt: 0px 0px 0px 0px !important;
        }
      }
      @media (max-width: 767px) {
        .mb-center {
          text-align: center !important;
        }
        .pr-0 {
          padding-right: 0px !important;
        }
        .pl-0 {
          padding-left: 0px !important;
        }
        .row-wrap>td {
          display: table !important;
          width: 100% !important;
        }
        .desktop-only table,
        .desktop-only td,
        .desktop-only tr,
        .desktop-only th {
          display: none !important;
        }
        .mobile-only table {
          display: table !important;
        }
        .mobile-only td {
          display: table-cell !important;
        }
        .mobile-only tr {
          display: table-row !important;
        }
        .mobile-only .button-container td a {
          display: block;
          padding: 10px 60px;
        }
        .mobile-only .divider-padding {
          padding: 15px 0px;
          mso-padding-alt: 15px 0px;
        }
        .mobile-only td.divider-line-2 {
          font-size: 2px;
          height: 2px;
          line-height: 2px;
        }
        .mobile-only .coupon-container td {
          padding: 10px 0px !important;
          mso-padding-alt: 10px 0px !important;
        }
        .mobile-only .coupon-container {
          border-width: 3px;
          border-style: dashed;
        }
        .mobile-only tr.row-hidden {
          display: none !important;
        }
      }
      @media only screen and (max-width: 699px) {
        table.table-640,
        div.row {
          width: 100% !important;
          max-width: 100% !important;
        }
        img.mo-img-full {
          width: 100% !important;
        }
        td.mo-text-center {
          text-align: center !important;
        }
        table.mo-link td {
          width: 100% !important;
          display: block !important;
          text-align: center !important;
        }
        table.mo-link td a,
        td.mo-link a {
          display: block !important;
          text-align: center !important;
          padding-bottom: 15px !important;
          border-bottom-width: 2px !important;
          border-bottom-style: solid !important;
          border-bottom-color: rgb(241, 241, 241) !important;
        }
      }
      @media only screen and (max-width: 620px) {
        table[class="body"] h1 {
          font-size: 28px !important;
          margin-bottom: 10px !important;
        }
        table[class="body"] p,
        table[class="body"] ul,
        table[class="body"] ol,
        table[class="body"] td,
        table[class="body"] span,
        table[class="body"] a {
          font-size: 16px !important;
        }
        table[class="body"] .wrapper,
        table[class="body"] .article {
          padding-top: 10px !important;
          padding-right: 10px !important;
          padding-bottom: 10px !important;
          padding-left: 10px !important;
        }
        table[class="body"] .content {
          padding-top: 0px !important;
          padding-right: 0px !important;
          padding-bottom: 0px !important;
          padding-left: 0px !important;
        }
        table[class="body"] .container {
          padding-top: 0px !important;
          padding-right: 0px !important;
          padding-bottom: 0px !important;
          padding-left: 0px !important;
          width: 100% !important;
        }
        table[class="body"] .main {
          border-left-width: 0px !important;
          border-top-left-radius: 0px !important;
          border-top-right-radius: 0px !important;
          border-bottom-right-radius: 0px !important;
          border-bottom-left-radius: 0px !important;
          border-right-width: 0px !important;
        }
        table[class="body"] .btn table {
          width: 100% !important;
        }
        table[class="body"] .btn a {
          width: 100% !important;
        }
        table[class="body"] .img-responsive {
          height: auto !important;
          max-width: 100% !important;
          width: auto !important;
        }
      }
      @media (max-width: 600px) {
        .row-wrap>td {
          display: table !important;
          width: 100% !important;
        }
      }
    </style>
  </head>

  <body class="" style="box-sizing: border-box; margin: 0;">
    <body style="background-color: undefined; box-sizing: border-box; margin: 0;">
      <meta charset="utf-8" style="box-sizing: border-box;">
      <meta name="viewport" content="width=device-width" style="box-sizing: border-box;">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" style="box-sizing: border-box;">
      <meta name="x-apple-disable-message-reformatting" style="box-sizing: border-box;">
      <title style="box-sizing: border-box;"></title>
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" style="box-sizing: border-box;">
      <!--
        [if(mso)|(mso 16)]>
        <style type="text/css">
        a {text-decoration: none;}
        </style>
        <![endif]
      -->
      <center bgcolor="#ffffff" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #ffffff; background-image: none; box-sizing: border-box; color: rgba(0,0,0,.4); font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 auto; mso-line-height-rule: exactly; padding: 50px 0px; padding-top: 0px; width: 100%;">
        <table cellpadding="0" align="center" width="100%" bgcolor="#ffffff" class="wrapper-inner" style="background: #ffffff; border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; max-width: 100%; mso-padding-alt: 50px 0px; padding: 50px 0px;" border="0" cellspacing="0">
          <tbody style="box-sizing: border-box;">
            <tr style="box-sizing: border-box;">
              <td align="center" style="box-sizing: border-box;">
                <table cellpadding="0" align="center" width="600" bgcolor="#ffffffff" class="table-640" style="background: #FFFFFF; background-image: none; border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; max-width: 600px;" border="0" cellspacing="0">
                  <tbody bgcolor="#ffffffff" style="background-color: #FFFFFF; background-image: none; box-sizing: border-box;">
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td valign="middle" align="center" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px;">
                        <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td valign="middle" align="center" class="logo" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                <a href="{{ shop.url }}" target="_blank" style="box-sizing: border-box; max-width: 100%;">
                                  {%- if shop.email_logo_url %}
                                    <img width="{{ shop.email_logo_width }}" src="{{ shop.email_logo_url }}" alt="{{ shop.name }}" style="-ms-interpolation-mode: bicubic; box-sizing: border-box; display: block; height: auto; margin: auto; outline: none; text-decoration: none;">
                                  {%- else %}
                                    <h1 style="font-weight: normal; font-size: 30px; color: #333; margin: 0;">
                                      {{ shop.name }}
                                    </h1>
                                  {%- endif %}
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="100%">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                              <td align="center" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                                <a alt="" target="_blank" class="image-link-wrapper" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; display: block; height: auto; max-width: 100%; width: 100%;"><img src="{{ banner_image }}" align="top" width="600" height="auto" border="0" loading="lazy" style="box-sizing: border-box; height: auto; width: 100%;"></a>
                                              </td>
                                            </tr>
                                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                              <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                                <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                                  <tbody style="box-sizing: border-box;">
                                                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                                      <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                                        <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                                          <tbody style="box-sizing: border-box;">
                                                            <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                                              <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="100%">
                                                                <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                                                  <tbody style="box-sizing: border-box;">
                                                                    <tr style="box-sizing: border-box; color: #000;">
                                                                      <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 30px 10px 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 30px;">
                                                                        <div style="box-sizing: border-box; color: #000000; font-size: 16px; font-weight: 400; line-height: normal; text-align: center;">
                                                                          <p style="box-sizing: border-box; margin: 0;">
                                                                            <span style="box-sizing: border-box; color: #434343; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; font-size: 30px;">
                                                                              <strong style="box-sizing: border-box;">
                                                                                {{ hero_title }}
                                                                              </strong> </span><br style="box-sizing: border-box;">
                                                                          </p>
                                                                        </div>
                                                                      </td>
                                                                    </tr>
                                                                    <tr style="box-sizing: border-box; color: #000;">
                                                                      <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 40px 10px 40px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; padding-top: 10px;">
                                                                        <div style="box-sizing: border-box; line-height: normal;">
                                                                          <p style="box-sizing: border-box; margin: 0; text-align: center;">
                                                                            <span style="box-sizing: border-box; color: #363636; font-size: 18px;">
                                                                              {{ hero_description }}
                                                                            </span>
                                                                          </p>
                                                                          <p style="box-sizing: border-box; margin: 0;">
                                                                            &nbsp;
                                                                          </p>
                                                                        </div>
                                                                      </td>
                                                                    </tr>
                                                                  </tbody>
                                                                </table>
                                                              </td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f7f7f7; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 15px 15px 0px 15px; padding: 15px 15px 0px 15px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Order number
                                                  </span>
                                                </h2>

                                                <p class="mb-center" style="color: {{ shop.email_accent_color }}; font-size: 16px; box-sizing: border-box; line-height: 1.2; margin: 0; text-align: left;">
                                                  <span>{{ order_name }}</span>
                                                </p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 15px 15px 0px 15px; padding: 15px 15px 0px 15px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Order date
                                                  </span>
                                                </h2>
                                                <p class="mb-center" style="color: {{ shop.email_accent_color }}; font-size: 16px; box-sizing: border-box; line-height: 1.2; margin: 0; text-align: left;">
                                                  <span> {{ created_at | date: format: 'abbreviated_date' }}</span>
                                                </p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table valign="top" role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 15px 15px 0px 15px; padding: 15px 15px 0px 15px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Shipping method
                                                  </span>
                                                </h2>

                                                {% if requires_shipping and shipping_address %}
                                                  <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                    <span>{{ shipping_method.title }}</span>
                                                  </p>
                                                {% endif %}
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f7f7f7; box-sizing: border-box;">
                      <td style="padding-top: 10px;-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 0px 10px 15px; padding-bottom: 10px; padding-left: 15px; padding-right: 0px; padding-top: 0px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Shipping address
                                                  </span>
                                                </h2>
                                                {% if requires_shipping %}
                                                  <p class="mb-center" style="color: {{ shop.email_accent_color }}; font-size: 16px; box-sizing: border-box; line-height: 1.2; margin: 0; text-align: left;">
                                                    {% if shipping_address.name %}
                                                      <span>{{ shipping_address.name }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                    {% if shipping_address.street %}
                                                      <span>{{ shipping_address.street }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                    {% if shipping_address.city %}
                                                      <span>{{ shipping_address.city }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                    {% if shipping_address.province %}
                                                      <span>{{ shipping_address.province }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                    {% if shipping_address.zip %}
                                                      <span>{{ shipping_address.zip }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                    {% if shipping_address.country %}
                                                      <span>{{ shipping_address.country }}</span><br style="box-sizing: border-box;">
                                                    {% endif %}
                                                  </p>
                                                {% endif %}
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 0px 10px 15px; padding-bottom: 10px; padding-left: 15px; padding-right: 0px; padding-top: 0px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Billing address
                                                  </span>
                                                </h2>
                                                <p class="mb-center" style="color: {{ shop.email_accent_color }}; font-size: 16px; box-sizing: border-box; line-height: 1.2; margin: 0; text-align: left;">
                                                  {% if billing_address.name %}
                                                    <span>{{ billing_address.name }}</span><br style="box-sizing: border-box;">
                                                  {% endif %}
                                                  {% if billing_address.street %}
                                                    <span>{{ billing_address.street }}</span><br style="box-sizing: border-box;">
                                                  {% endif %}
                                                  {% if billing_address.city %}
                                                    <span>{{ billing_address.city }}</span><br style="box-sizing: border-box;">
                                                  {% endif %}
                                                  {% if billing_address.province %}
                                                    <span>{{ billing_address.province }}</span><br style="box-sizing: border-box;">
                                                  {% endif %}
                                                  {% if billing_address.zip %}
                                                    <span>{{ billing_address.zip }}</span><br style="box-sizing: border-box;">
                                                  {% endif %}
                                                  {% if billing_address.country %}
                                                    <span>{{ billing_address.country }}</span><br style="box-sizing: border-box;">
                                                  {%- endif %}
                                                </p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px;" width="33.33%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td align="center" style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 0px 10px 15px; padding-bottom: 10px; padding-left: 15px; padding-right: 0px; padding-top: 0px;">
                                                <h2 class="mb-center" style="margin: 0 0 12px 0; box-sizing: border-box; line-height: 1; text-align: left;">
                                                  <span style="box-sizing: border-box; color: #434343; font-size: 16px;">
                                                    Payment method
                                                  </span>
                                                </h2>
                                                {% for transaction in transactions %}
                                                  {% if transaction.status == "success" or transaction.status == "pending" %}
                                                    {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                                                      {% if transaction.payment_details.credit_card_company %}
                                                        <table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;margin: 0; text-align: left; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                          <tr>
                                                            <td valign="top" style="padding:0;width:24px;">
                                                              <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url }}" style="height: 24px;display: inline-block;" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                                                            </td>
                                                            <td style="padding:0 0 0 10px;">
                                                              <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: left; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                                <span>
                                                                  ending with
                                                                  {{ transaction.payment_details.credit_card_last_four_digits }}
                                                                  &mdash;
                                                                  <strong>{{ transaction.amount | money }}</strong>
                                                                </span>
                                                              </p>
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      {% elsif transaction.gateway_display_name == "Gift card" %}
                                                        <table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;margin: 0; text-align: left; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                          <tr>
                                                            <td style="padding:0;width:24px;">
                                                              <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-' | payment_type_img_url }}" style="height: 24px;display: inline-block;margin-right: 10px;margin-top: 5px;margin-bottom: -6px;" height="24">
                                                            </td>
                                                            <td style="padding:0 0 0 10px;">
                                                              <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: left; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                                <span>
                                                                  ending with
                                                                  {{ transaction.payment_details.gift_card.last_four_characters | upcase }}
                                                                  &mdash;
                                                                  <strong>{{ transaction.amount | money }}</strong>
                                                                </span>
                                                                <br>
                                                                &emsp;&emsp;&emsp;&nbsp;Gift card balance:
                                                                {{ transaction.payment_details.gift_card.balance | money }}
                                                              </p>
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      {% else %}
                                                        <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: left; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                          {{ transaction.gateway_display_name }} &mdash;
                                                          <strong>{{ transaction.amount | money }}</strong>
                                                        </p>
                                                      {% endif %}
                                                    {% endif %}
                                                  {% endif %}
                                                {% endfor %}
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    <!-- Product item Info -->
                    {% for line in subtotal_line_items %}
                      {% if line.product.title %}
                        {% assign line_title = line.product.title %}
                      {% else %}
                        {% assign line_title = line.title %}
                      {% endif %}

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

                      <tr class="mobile-only" style="box-sizing: border-box; mso-hide: all;">
                        <td style="background: #ffffff; box-sizing: border-box; display: none; font-size: 15px; line-height: 15px;" height="41"></td>
                      </tr>

                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                        <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                          <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                  <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                    <tbody style="box-sizing: border-box;">
                                      <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; padding-top: 45px;" width="25%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr class="show-all" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                                <td class="mb-center" align="left" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                                  {% if line.image %}
                                                    <a alt="" target="_blank" class="image-link-wrapper" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; display: block; height: auto; max-width: 100%; width: 100%;">
                                                      <img src="{{ line | img_url: 'compact_cropped' }}" align="top" width="104" border="0" style="box-sizing: border-box; height: auto; width: 104px; border-radius: 8px; border: 1px solid #e5e5e5;">
                                                    </a>
                                                  {% endif %}
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; padding-top: 45px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr class="show-all" style="box-sizing: border-box; color: #000;">
                                                <td class="pr-0" style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 10px 10px 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 10px; padding-top: 10px;">
                                                  {% if line.product.title %}
                                                    {% assign line_title = line.product.title %}
                                                  {% else %}
                                                    {% assign line_title = line.title %}
                                                  {% endif %}

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

                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify;" class="mb-center">
                                                      <span style="box-sizing: border-box; color: rgb(0,0,0); font-size: 16px;">
                                                        {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}
                                                      </span>
                                                    </p>

                                                    {% if line.variant.title != 'Default Title' %}
                                                      <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify;" class="mb-center">
                                                        <span style="box-sizing: border-box; color: #8A8A8A; font-size: 14px;">
                                                          {{ line.variant.title }}
                                                        </span>
                                                      </p>
                                                    {% endif %}

                                                    {% if line.selling_plan_allocation %}
                                                      <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify;" class="mb-center">
                                                        <span style="box-sizing: border-box; color: #8A8A8A; font-size: 14px;">
                                                          {{ line.selling_plan_allocation.selling_plan.name }}
                                                        </span>
                                                      </p>
                                                    {% endif %}

                                                    {% if line.refunded_quantity > 0 %}
                                                      <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify;" class="mb-center">
                                                        <span style="box-sizing: border-box; color: #8A8A8A; font-size: 14px;">
                                                          Refunded
                                                        </span>
                                                      </p>
                                                    {% endif %}

                                                    {% if line.discount_allocations %}
                                                      {% for discount_allocation in line.discount_allocations %}
                                                        {% if discount_allocation.discount_application.target_selection != 'all' %}
                                                          <p style="color: #8A8A8A; font-size: 14px; box-sizing: border-box; line-height: 1.5; margin: 0; text-align: justify;" class="mb-center">
                                                            <img style="vertical-align: middle; margin-right: 6px;" src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18">
                                                            <span>
                                                              {{ discount_allocation.discount_application.title | upcase }}
                                                              (-{{ discount_allocation.amount | money }})
                                                            </span>
                                                          </p>
                                                        {% endif %}
                                                      {% endfor %}
                                                    {% endif %}
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; padding-top: 45px;" width="25%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr class="show-all" style="box-sizing: border-box; color: #000;">
                                                <td class="pl-0" style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 0px 10px 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    {% if line.original_line_price != line.final_line_price %}
                                                      <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: right;">
                                                        <span style="box-sizing: border-box; color: #8A8A8A; font-size: 14px;">
                                                          <s style="box-sizing: border-box;">
                                                            {{- line.original_line_price | money -}}
                                                          </s>
                                                        </span>
                                                      </p>
                                                    {% endif %}

                                                    <p class="mb-center" style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: right;">
                                                      {% if line.final_line_price > 0 %}
                                                        <strong style="box-sizing: border-box;">
                                                          {{- line.final_line_price | money -}}
                                                        </strong>
                                                      {% else %}
                                                        <strong style="box-sizing: border-box;">Free</strong>
                                                      {% endif %}
                                                    </p>

                                                    <p style="box-sizing: border-box; margin: 0;">&nbsp;</p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr style="box-sizing: border-box; max-width: 100%;">
                        <td align="center" class="divider-padding" style="box-sizing: border-box; mso-padding-alt: 15px 0px; padding: 15px 0px;">
                          <table cellspacing="0" cellpadding="0" align="center" width="66%" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                <td align="center" class="divider-line-2" style="background: #F1F1F1; box-sizing: border-box; font-size: 2px; line-height: 2px;" height="2"></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    {% endfor %}

                    <!-- Products total prices -->
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 10px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; margin: 0;">
                                                    <span style="box-sizing: border-box; color: #363636; font-size: 16px;">Subtotal</span>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 10px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                    <strong style="box-sizing: border-box;">
                                                      {{- subtotal_price | money -}}
                                                    </strong>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    {% if delivery_method == 'pick-up' %}
                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                        <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                          <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                  <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                    <tbody style="box-sizing: border-box;">
                                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0;">
                                                      <span style="box-sizing: border-box; color: #363636;">Pickup</span>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                      <strong style="box-sizing: border-box;">
                                                        {{- shipping_price | money -}}
                                                      </strong>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    {% else %}
                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                        <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                          <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                  <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                    <tbody style="box-sizing: border-box;">
                                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0;">
                                                      <span style="box-sizing: border-box; color: #363636;">Shipping</span>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                      <strong style="box-sizing: border-box;">
                                                        {{- shipping_price | money -}}
                                                      </strong>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    {% endif %}

                    {% if total_duties %}
                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                        <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                          <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                  <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                    <tbody style="box-sizing: border-box;">
                                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0;">
                                                      <span style="box-sizing: border-box; color: #363636;">Duties</span>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                      <strong style="box-sizing: border-box;">
                                                        {{- total_duties | money -}}
                                                      </strong>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    {% endif %}

                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; margin: 0;">
                                                    <span style="box-sizing: border-box; color: #363636;">Taxes</span>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                    <strong style="box-sizing: border-box;">
                                                      {{- tax_price | money -}}
                                                    </strong>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    {% if total_tip and total_tip > 0 %}
                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                        <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                          <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                  <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                    <tbody style="box-sizing: border-box;">
                                      <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0;">
                                                      <span style="box-sizing: border-box; color: #363636;">Tip</span>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                        <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px;" width="50%" align="left">
                                          <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                            <tbody style="box-sizing: border-box;">
                                              <tr style="box-sizing: border-box; color: #000;">
                                                <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px;">
                                                  <div style="box-sizing: border-box; line-height: normal;">
                                                    <p style="box-sizing: border-box; margin: 0; text-align: right;">
                                                      <strong style="box-sizing: border-box;">
                                                        {{- total_tip | money -}}
                                                      </strong>
                                                    </p>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    {% endif %}

                    <tr style="box-sizing: border-box; max-width: 100%;">
                      <td align="center" class="divider-padding" style="box-sizing: border-box; mso-padding-alt: 15px 0px; padding: 15px 0px;">
                        <table cellspacing="0" cellpadding="0" align="center" width="66%" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="box-sizing: border-box;">
                              <td align="center" class="divider-line-2" style="background: #F1F1F1; box-sizing: border-box; font-size: 2px; line-height: 2px;" height="2"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="50%">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr class="show-all" style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 40px; padding-top: 0px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; margin: 0;">
                                                    <span style="box-sizing: border-box; font-size: 20px;">Total</span>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="50%">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr class="show-all" style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 15px; padding-top: 0px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; line-height: 1.15; margin: 0; text-align: right;">
                                                    <span style="box-sizing: border-box; font-size: 20px;"><strong style="box-sizing: border-box;">
                                                        {{- total_price | money_with_currency -}}
                                                      </strong></span>
                                                  </p>
                                                  <p style="color: #8A8A8A; font-size: 14px; box-sizing: border-box; line-height: 1.5; margin: 0;" align="right">
                                                    You saved
                                                    <span>
                                                      {{ total_discounts | money }}
                                                    </span>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>

                    {% assign transaction_size = 0 %}
                    {% assign transaction_amount = 0 %}
                    {% for transaction in transactions %}
                      {% unless transaction.kind == "capture" or transaction.kind == "void" %}
                        {% assign transaction_size = transaction_size | plus: 1 %}
                        {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
                      {% endunless %}
                    {% endfor %}

                    {% if transaction_size > 1 or transaction_amount < total_price %}
                      <!-- Horizontal line -->
                      <tr style="box-sizing: border-box; max-width: 100%;">
                        <td align="center" class="divider-padding" style="box-sizing: border-box; mso-padding-alt: 15px 0px; padding: 15px 0px;">
                          <table cellspacing="0" cellpadding="0" align="center" width="100%" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0">
                            <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                <td align="center" class="divider-line-2" style="background: #F1F1F1; box-sizing: border-box; font-size: 2px; line-height: 2px;" height="2"></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>

                      {% for transaction in transactions %}
                        {% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
                          {% if transaction.payment_details.credit_card_company %}
                            {% capture transaction_name -%}
                              {{- transaction.payment_details.credit_card_company }} (ending in
                              {{ transaction.payment_details.credit_card_last_four_digits }})
                            {%- endcapture %}
                          {% else %}
                            {% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
                          {% endif %}

                          <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tbody style="box-sizing: border-box;">
                                  <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;" width="100%">
                                      <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                        <tbody style="box-sizing: border-box;">
                                          <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 0px 0px;" width="50%" valign="middle" align="left">
                                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tbody style="box-sizing: border-box;">
                                                  <tr style="box-sizing: border-box; color: #000;">
                                                    <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding: 0px 40px 0px 15px;">
                                                      <div style="box-sizing: border-box; line-height: normal;">
                                                        <p style="box-sizing: border-box; margin: 0;">
                                                          <span style="box-sizing: border-box; color: #363636;">
                                                            {{- transaction_name -}}
                                                          </span>
                                                        </p>
                                                      </div>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 0px 0px;" width="50%" valign="middle" align="left">
                                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tbody style="box-sizing: border-box;">
                                                  <tr style="box-sizing: border-box; color: #000;">
                                                    <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding: 0px 15px 0px 40px;">
                                                      <div style="box-sizing: border-box; line-height: normal;">
                                                        <p style="box-sizing: border-box; margin: 0;" align="right">
                                                          <strong style="box-sizing: border-box;">
                                                            {{- transaction.amount | money -}}
                                                          </strong>
                                                        </p>
                                                      </div>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        {% endif %}

                        {% if transaction.kind == 'refund' %}
                          {% if transaction.payment_details.credit_card_company %}
                            {% assign refund_method_title = transaction.payment_details.credit_card_company %}
                          {% else %}
                            {% assign refund_method_title = transaction.gateway %}
                          {% endif %}

                          <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tbody style="box-sizing: border-box;">
                                  <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;" width="100%">
                                      <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                        <tbody style="box-sizing: border-box;">
                                          <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 0px 0px;" width="50%" valign="middle" align="left">
                                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tbody style="box-sizing: border-box;">
                                                  <tr style="box-sizing: border-box; color: #000;">
                                                    <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 40px 0px 15px; padding: 0px 40px 0px 15px;">
                                                      <div style="box-sizing: border-box; line-height: normal;">
                                                        <p style="box-sizing: border-box; margin: 0; color: #363636;">
                                                          <span>Refund</span><br>
                                                          <small>{{ refund_method_title | capitalize }}</small>
                                                        </p>
                                                      </div>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                            <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 0px 0px;" width="50%" valign="middle" align="left">
                                              <table role="presentation" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin: 0 auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tbody style="box-sizing: border-box;">
                                                  <tr style="box-sizing: border-box; color: #000;">
                                                    <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 0px 15px 0px 40px; padding: 0px 15px 0px 40px;">
                                                      <div style="box-sizing: border-box; line-height: normal;">
                                                        <p style="box-sizing: border-box; margin: 0;" align="right">
                                                          <strong style="box-sizing: border-box;">- {{ transaction.amount | money -}}
                                                          </strong>
                                                        </p>
                                                      </div>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        {% endif %}
                      {% endfor %}
                    {% endif %}
                    <!-- Discount offer -->
                    <tr style="box-sizing: border-box;">
                      <td style="box-sizing: border-box; font-size: 15px; line-height: 15px;" height="30"></td>
                    </tr>
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f7f7f7; box-sizing: border-box;">
                      <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                        <table role="presentation" cellspacing="0" border="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
                                <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                                  <tbody style="box-sizing: border-box;">
                                    <tr class="row-wrap" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="50%">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                                              <td align="center" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                                <a alt="" target="_blank" class="image-link-wrapper" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; display: block; height: auto; max-width: 100%; width: 100%;"><img src="{{ discount_image }}" align="top" width="100%" height="auto" loading="lazy" border="0" style="box-sizing: border-box; height: auto; width: 100%;"></a>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td valign="middle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="50%">
                                        <table role="presentation" border="0" cellspacing="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellpadding="0">
                                          <tbody style="box-sizing: border-box;">
                                            <tr style="box-sizing: border-box; color: #000;">
                                              <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 30px 0px 0px 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 30px;">
                                                <div style="box-sizing: border-box; line-height: normal;">
                                                  <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: center;">
                                                    <span style="box-sizing: border-box; color: #636363; font-size: 18px;"><strong style="box-sizing: border-box;">FOR YOUR NEXT PURCHASE</strong></span>
                                                  </p>
                                                  <p style="box-sizing: border-box; line-height: 1.5; margin: 5px 0; text-align: center;">
                                                    <span style="box-sizing: border-box; color: #414141; font-size: 48px;"><strong style="box-sizing: border-box;">
                                                        {{- amount_off -}}
                                                      </strong></span>
                                                  </p>
                                                  <p style="box-sizing: border-box; line-height: 1.5; margin: 0; text-align: center;">
                                                    <span style="box-sizing: border-box; color: #636363; font-size: 16px;">USE THE CODE: &nbsp;</span><span style="box-sizing: border-box; color: {{ shop.email_accent_color }}; font-size: 16px;">
                                                      {{- discount_code -}}
                                                    </span>
                                                  </p>
                                                </div>
                                              </td>
                                            </tr>
                                            <tr style="box-sizing: border-box;">
                                              <td style="box-sizing: border-box; font-size: 15px; line-height: 15px;" height="30"></td>
                                            </tr>
                                            <tr style="box-sizing: border-box;">
                                              <td align="center" style="box-sizing: border-box;">
                                                <table cellpadding="0" align="center" width="100%" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0" cellspacing="0">
                                                  <tbody style="box-sizing: border-box;">
                                                    <tr style="box-sizing: border-box;">
                                                      <td align="center" style="box-sizing: border-box;">
                                                        <table cellspacing="0" cellpadding="0" align="center" class="button-container" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0">
                                                          <tbody style="box-sizing: border-box;">
                                                            <tr style="box-sizing: border-box;">
                                                              <td align="center" style="background: #333333; border-radius: 20px; border-style: solid; border-width: 0px; box-sizing: border-box; display: block; mso-padding-alt: 10px 45px 10px 45px;">
                                                                <a target="_blank" href="{{ shop.url }}" style="box-sizing: border-box; color: #ffffff; display: block; font-size: 13px; font-weight: 400; letter-spacing: 1px; padding-bottom: 10px; padding-left: 45px; padding-right: 45px; padding-top: 10px; text-decoration: none; white-space: nowrap;">
                                                                  SHOP SOME MORE</a>
                                                              </td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                            <tr style="box-sizing: border-box;">
                                              <td style="box-sizing: border-box; font-size: 15px; line-height: 15px;" height="30"></td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr style="box-sizing: border-box;">
                      <td style="box-sizing: border-box; font-size: 15px; line-height: 15px;" height="30"></td>
                    </tr>
                    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                      <td valign="middle" align="center" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px;">
                        <table role="presentation" border="0" cellpadding="0" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed;" cellspacing="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box;">
                              <td valign="middle" align="center" class="logo" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                <a href="{{ shop.url }}" target="_blank" style="box-sizing: border-box; max-width: 100%;">
                                  {%- if shop.email_logo_url %}
                                    <img width="{{ shop.email_logo_width }}" src="{{ shop.email_logo_url }}" alt="{{ shop.name }}" style="-ms-interpolation-mode: bicubic; box-sizing: border-box; display: block; height: auto; margin: auto; outline: none; text-decoration: none;">
                                  {%- else %}
                                    <h2 style="font-weight: normal; font-size: 30px; color: #333; margin: 0;">
                                      {{ shop.name }}
                                    </h2>
                                  {%- endif %}
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr style="box-sizing: border-box;">
                      <td align="center" class="divider-padding" style="box-sizing: border-box; mso-padding-alt: 15px 0px; padding: 15px 0px;">
                        <table cellspacing="0" cellpadding="0" align="center" width="66%" style="border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;" border="0">
                          <tbody style="box-sizing: border-box;">
                            <tr style="box-sizing: border-box;">
                              <td align="center" class="divider-line-2" style="background: #F1F1F1; box-sizing: border-box; font-size: 2px; line-height: 2px;" height="2"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr style="box-sizing: border-box; color: #000;">
                      <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 40px 10px 40px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; padding-top: 10px;">
                        <div style="box-sizing: border-box; line-height: normal;">
                          <p style="box-sizing: border-box; margin: 0; text-align: center;">
                            <span style="box-sizing: border-box; color: #999999; font-size: 12px;">If you have any questions, reply to this email or <br>
                              contact us at
                            </span>
                            <span style="box-sizing: border-box; color: {{ shop.email_accent_color }}; font-size: 12px;">
                              <a style="text-decoration: underline; color: {{ shop.email_accent_color }};font-size: 12px;" href="mailto:{{ shop.email }}" target="_blank">
                                {{ shop.email }}
                              </a>
                            </span>
                          </p>
                        </div>
                      </td>
                    </tr>
                    <tr style="box-sizing: border-box;">
                      <td align="center" class="divider-padding" style="box-sizing: border-box; mso-padding-alt: 15px 0px; padding: 15px 0px;"></td>
                    </tr>

                    <tr style="box-sizing: border-box; background-color: #333333">
                      <td style="box-sizing: border-box; font-family: Roboto, Tahoma, Verdana, Segoe, sans-serif; mso-padding-alt: 10px 40px 10px 40px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; padding-top: 10px;">
                        <div style="box-sizing: border-box; line-height: normal;">
                          <p style="box-sizing: border-box; margin: 0; text-align: center;">
                            <span style="box-sizing: border-box; color: #bbbbbb; font-size: 12px;">Designed and developed by
                            </span>
                            <span style="box-sizing: border-box; color: {{ shop.email_accent_color }}; font-size: 12px;">
                              <a style="text-decoration: underline; color: #ffffff;font-size: 12px;" href="https://www.doudmine.com/" target="_blank">
                                Doudmine
                              </a>
                            </span>
                          </p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </center>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" style="box-sizing: border-box;">
    </body>
  </body>
</html>
  1. Upload your logo and 2 image assets in Settings > Files. One image for banner and other for a Discount offer
  2. Watch the video below to see how you can customize the new email Order Confirmation template

That’s it! I hope this tutorial has been helpful and if you need something don’t hesitate to contact me