├── .gitignore
├── src
    ├── new_order_mobile.liquid
    ├── assets
    │   └── notifications
    │   │   ├── inline-styles.css
    │   │   └── style.css
    ├── snippets
    │   ├── default-content.liquid
    │   ├── footer.liquid
    │   ├── header.liquid
    │   ├── shipment-items.liquid
    │   └── order-summary.liquid
    ├── contact_customer.liquid
    ├── order_refund.liquid
    ├── fulfillment_request.liquid
    ├── order_cancelled.liquid
    ├── new_order.liquid
    ├── customer_account_welcome.liquid
    ├── customer_account_password_reset.liquid
    ├── customer_account_activation.liquid
    ├── gift_card_created.liquid
    ├── shipping_update.liquid
    ├── shipping_confirmation.liquid
    ├── shipping_out_for_delivery.liquid
    ├── shipment_delivered.liquid
    ├── abandoned_checkout.liquid
    ├── draft_order_invoice.liquid
    └── order_confirmation.liquid
├── package.json
├── Gruntfile.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dest
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/src/new_order_mobile.liquid:
--------------------------------------------------------------------------------
1 | <p>{{ shop_name }},</p>
2 | 
3 | <p>{{ customer.name | default: "A customer" }} placed a new order with you today ({{ date | date: "%b %d %I:%M%p" }}).</p>
4 | 
5 | 


--------------------------------------------------------------------------------
/src/assets/notifications/inline-styles.css:
--------------------------------------------------------------------------------
1 | /*
2 |  * Custom styles
3 |  * - instead of directly overwriting style.css (Shopify's default email stylesheet)
4 |  * we use this separate stylesheet
5 |  */
6 | 


--------------------------------------------------------------------------------
/src/snippets/default-content.liquid:
--------------------------------------------------------------------------------
 1 | <table class="row content">
 2 |   <tr>
 3 |     <td class="content__cell">
 4 |       <center>
 5 |         <table class="container">
 6 |           <tr>
 7 |             <td>
 8 |               <h2>{{ email_title }}</h2>
 9 |               <p>{{ email_body }}</p>
10 |             </td>
11 |           </tr>
12 |         </table>
13 |       </center>
14 |     </td>
15 |   </tr>
16 | </table>
17 | 


--------------------------------------------------------------------------------
/src/snippets/footer.liquid:
--------------------------------------------------------------------------------
 1 | <table class="row footer">
 2 |   <tr>
 3 |     <td class="footer__cell">
 4 |       <center>
 5 |         <table class="container">
 6 |           <tr>
 7 |             <td>
 8 |               <p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
 9 |             </td>
10 |           </tr>
11 |         </table>
12 |       </center>
13 |     </td>
14 |   </tr>
15 | </table>
16 | <img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shopify-email-templates",
 3 |   "version": "0.0.1",
 4 |   "description": "Makes it easier to create custom Shopify email templates by allowing you to edit and compile them offline locally before copy/pasting them to Shopifies admin",
 5 |   "main": "index.js",
 6 |   "dependencies": {
 7 |     "grunt-contrib-watch": "^1.0.0",
 8 |     "grunt-include-replace": "^5.0.0",
 9 |     "grunt-inline-css": "^0.1.5"
10 |   },
11 |   "devDependencies": {},
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/timmyomahony/shopify-email-templates.git"
18 |   },
19 |   "author": "Timmy O'Mahony",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/timmyomahony/shopify-email-templates/issues"
23 |   },
24 |   "homepage": "https://github.com/timmyomahony/shopify-email-templates#readme"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/snippets/header.liquid:
--------------------------------------------------------------------------------
 1 | <table class="header row">
 2 |   <tr>
 3 |     <td class="header__cell">
 4 |       <center>
 5 |         <table class="container">
 6 |           <tr>
 7 |             <td>
 8 |               <table class="row">
 9 |                 <tr>
10 |                   <td class="shop-name__cell">
11 |                     {% if shop.email_logo_url %}
12 |                       <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
13 |                     {% else %}
14 |                       <h1 class="shop-name__text">
15 |                         <a href="{{shop.url}}">{{ shop.name }}</a>
16 |                       </h1>
17 |                     {% endif %}
18 |                   </td>
19 |                   <td class="order-number__cell">
20 |                     <span class="order-number__text">
21 |                       Order {{ order_name }}
22 |                     </span>
23 |                   </td>
24 |                 </tr>
25 |               </table>
26 |             </td>
27 |           </tr>
28 |         </table>
29 |       </center>
30 |     </td>
31 |   </tr>
32 | </table>
33 | 


--------------------------------------------------------------------------------
/src/contact_customer.liquid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |   <title>{{ email_title }}</title>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |   <meta name="viewport" content="width=device-width">
 7 |   <!-- To be inlined -->
 8 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 9 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
10 | </head>
11 | 
12 |   <body>
13 |     <table class="body">
14 |       <tr>
15 |         <td>
16 | 
17 |           <!-- @@include('header.liquid') -->
18 | 
19 |           <table class="row content">
20 |             <tr>
21 |               <td class="content__cell">
22 |                 <center>
23 |                   <table class="container">
24 |                     <tr>
25 |                       <td>
26 |                         <p>{{ custom_message }}</p>
27 |                       </td>
28 |                     </tr>
29 |                   </table>
30 |                 </center>
31 |               </td>
32 |             </tr>
33 |           </table>
34 | 
35 |           <!-- @@include('footer.liquid') -->
36 | 
37 |         </td>
38 |       </tr>
39 |     </table>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/src/order_refund.liquid:
--------------------------------------------------------------------------------
 1 | {% if refund_line_items.size == item_count %}
 2 |   {% capture email_title %}Your order has been refunded {% endcapture %}
 3 | {% elsif refund_line_items.size == 0 %}
 4 |   {% capture email_title %}You have received a refund {% endcapture %}
 5 | {% else %}
 6 |   {% capture email_title %}Some items in your order have been refunded {% endcapture %}
 7 | {% endif %}
 8 | {% capture email_body %}Total amount refunded: <strong>{{ amount | money_with_currency }}</strong>{% endcapture %}
 9 | 
10 | <!DOCTYPE html>
11 | <html lang="en">
12 |   <head>
13 |   <title>{{ email_title }}</title>
14 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
15 |   <meta name="viewport" content="width=device-width">
16 |   <!-- To be inlined -->
17 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
18 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
19 | </head>
20 | 
21 |   <body>
22 |     <table class="body">
23 |       <tr>
24 |         <td>
25 | 
26 |           <!-- @@include('header.liquid') -->
27 | 
28 |           <!-- @@include('default-content.liquid') -->
29 | 
30 |           <!-- @@include('order-summary.liquid') -->
31 | 
32 |           <!-- @@include('footer.liquid') -->
33 | 
34 |         </td>
35 |       </tr>
36 |     </table>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |   grunt.initConfig({
 4 |     paths: {
 5 |       src: 'src/',
 6 |       dest: 'dest/'
 7 |     },
 8 |     inlinecss: {
 9 |       main: {
10 |         options: {
11 |           removeStyleTags: false
12 |         },
13 |         files: [
14 |           {
15 |             cwd: '<%= paths.src %>',
16 |             src: ['*.liquid'],
17 |             dest: '<%= paths.dest %>',
18 |             ext: '.inlined.html',
19 |             expand: true
20 |           },
21 |         ]
22 |       }
23 |     },
24 |     includereplace: {
25 |       main: {
26 |         options: {
27 |           prefix: '<!-- @@',
28 |           suffix: ' -->',
29 |           includesDir: '<%= paths.src %>snippets/',
30 |         },
31 |         files: [
32 |           {
33 |             cwd: '<%= paths.dest %>',
34 |             src: ['*.html'],
35 |             dest: '<%= paths.dest %>',
36 |             expand: true
37 |           },
38 |         ]
39 |       }
40 |     },
41 |     watch: {
42 |       emails: {
43 |         files: ["<%= paths.src %>**/*.liquid", "<%= paths.src %>**/*.css"],
44 |         tasks: ["inlinecss", "includereplace"]
45 |       }
46 |     }
47 |   });
48 | 
49 |   grunt.loadNpmTasks('grunt-contrib-watch');
50 |   grunt.loadNpmTasks('grunt-include-replace');
51 |   grunt.loadNpmTasks('grunt-inline-css');
52 | 
53 |   grunt.registerTask('default', ['watch:emails']);
54 | 
55 | };
56 | 


--------------------------------------------------------------------------------
/src/fulfillment_request.liquid:
--------------------------------------------------------------------------------
 1 | <p>{{ service_name }},</p>
 2 | <br>
 3 | <p>Please fulfill order {{ name }}.</p>
 4 | <p>Total number of items: {{ fulfillment.item_count }}</p>
 5 | <p>Unique items: {{ fulfillment.fulfillment_line_items.size }}</p>
 6 | <br>
 7 | <p><strong>Items to fulfill:</strong></p>
 8 | {% for line in fulfillment.fulfillment_line_items %}
 9 |   <p>Variant Title: {{ line.line_item.title }}</p>
10 |   <p>SKU: {{ line.line_item.sku }}</p>
11 |   <p>Quantity: {{ line.quantity }}</p>
12 |   <p>Grams: {{ line.line_item.grams }}</p>
13 |   <p>Vendor: {{ line.line_item.vendor }}</p>
14 | {% endfor %}
15 | {% if shipping_address %}
16 | <br>
17 | <p><strong>Shipping Address:</strong></p>
18 | <p>{{ shipping_address.name }}{% if shipping_address.company %}
19 |   {{ shipping_address.company }}{% endif %}</p>
20 | <p>{{ shipping_address.address1 }}</p>
21 | <p>{{ shipping_address.address2 }}</p>
22 | <p>{{ shipping_address.city }}, {{ shipping_address.province }}</p>
23 | <p>{{ shipping_address.zip }}</p>
24 | <p>{{ shipping_address.country }}</p>
25 | {% if shipping_address.phone %}<p>Phone: {{ shipping_address.phone }}</p>{% endif %}
26 | {% endif %}
27 | <br>
28 | <p><strong>Shipping Method:</strong></p>
29 | <p>{% if shipping_method %}{{ shipping_method.title }}{% else %}None{% endif %}</p>
30 | <br>
31 | <p><strong>Tracking Number:</strong></p>
32 | <p>{% if fulfillment.tracking_number %}{{ fulfillment.tracking_number }}{% else %}None{% endif %}</p>
33 | <br>
34 | <p><strong>Customer Email:</strong></p>
35 | <p>{{ email }}</p>
36 | <br>
37 | <p>Thank you,</p>
38 | <p>{{ shop_name }}</p>
39 | 
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Shopify Email Templates
 2 | 
 3 | Creating custom email templates can be tedious with Shopify. You have to login to the admin of your store and edit each template repetitively using their editor. This repo tries to make this process a little bit easier. You will still have to manually copy and paste the templates from your local machine to the admin editor, but you can more easily edit the custom email template locally to make this process much quicker.
 4 | 
 5 | #### Workflow:
 6 | 
 7 | 1. Run the `grunt` task from the root of the repo
 8 | 2. Open up the email template you want to edit in `src/[template-name].liquid`
 9 | 3. Add any new styles to the `assets/notifications/inline-styles.css` stylesheet and change any of the markup
10 | 4. Grunt will automatically detect when you make changes and will compile a finished email templates with all of the CSS automatically inlined, ready to upload to the Shopify admin. These compiled templates are found in `dest/[template-name].inlined.html`
11 | 5. Go to the Shopify admin `/admin/email_templates/` and find the email template you are editing. Paste the contents of `dest/[template-name].inlined.html` into the editor and you can then preview the changes. Make further changes locally, paste it again into the editor and preview, and so on ...
12 | 
13 | It's not perfect but it's a start ;)
14 |  
15 | #### Notes
16 | 
17 | - The reuseable elements of the email templates (such as the header and footer) have been moved to the `assets/snippts` folder. This means you can easily edit these elements once without having to then copy and paste the changes to *every* other template
18 | 


--------------------------------------------------------------------------------
/src/order_cancelled.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %}Your order has been canceled{% endcapture %}
 2 | {% capture email_body %}
 3 |   Order {{ name }} was canceled
 4 |   {% case cancel_reason %}
 5 |   {% when 'customer' %}
 6 |     at your request
 7 |   {% when 'inventory' %}
 8 |     because we did not have enough stock to fulfill your order
 9 |   {% when 'fraud' %}
10 |     because we suspect it is fraudulent
11 |   {% when 'other' %}
12 |     due to unforeseen circumstances
13 |   {% endcase %}
14 | 
15 |   {% if financial_status == 'voided' %}
16 |     and your payment has been voided
17 |   {% elsif financial_status == 'refunded' %}
18 |     and your payment has been refunded
19 |   {% endif %}
20 |   .
21 | {% endcapture %}
22 | 
23 | <!DOCTYPE html>
24 | <html lang="en">
25 |   <head>
26 |   <title>{{ email_title }}</title>
27 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
28 |   <meta name="viewport" content="width=device-width">
29 |   <!-- To be inlined -->
30 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
31 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
32 | </head>
33 | 
34 |   <body>
35 |     <table class="body">
36 |       <tr>
37 |         <td>
38 | 
39 |         <!-- @@include('header.liquid') -->
40 | 
41 |         <!-- @@include('default-content.liquid') -->
42 | 
43 |         {% assign order_summary_title = "Refunded items" %}
44 |         <!-- @@include('order-summary.liquid') -->
45 | 
46 |         <!-- @@include('footer.liquid') -->
47 | 
48 |         </td>
49 |       </tr>
50 |     </table>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/src/new_order.liquid:
--------------------------------------------------------------------------------
 1 | <p>Hello {{ shop_name }},</p>
 2 | <p></p>
 3 | <p>{% if customer.name %}{{ customer.name }}{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:</p>
 4 | <p></p>
 5 | <ul>  {% for line in line_items %} <li> <img src="{{ line | img_url: 'thumb' }}" /> {{ line.quantity }}x {{ line.title }} {% if line.sku != "" %}(SKU: {{line.sku}}){% endif %} for {{ line.price | money }} each </li> {% endfor %} </ul>
 6 | <a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}">View order {{order_name}} </a>
 7 | {% if fulfillment_aborted %}
 8 | <p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>{% endif %}
 9 | <p></p><br>
10 | {% if has_high_risks? %}<p><b>Security check:</b></p>
11 | <p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
12 | <p></p>{% endif %}
13 | <p><b>Payment processing method:</b></p>
14 | <p>{{ gateway }}</p>
15 | <p></p>
16 | {% if requires_shipping and shipping_address %}
17 | <p><b>Delivery method:</b></p>
18 | {% for shipping_method in shipping_methods %}<p>{{ shipping_method.title }}</p>{% endfor %}
19 | <p></p>
20 | <p><b>Shipping address:</b></p>
21 | <p>{{ shipping_address.name }}</p>
22 | <p>{{ shipping_address.street }}</p>
23 | <p>{{ shipping_address.city }}, {{ shipping_address.province }}  {{ shipping_address.zip }}</p>
24 | <p>{{ shipping_address.country }}</p>
25 | <p>{{ shipping_address.phone }}{% endif %}</p>
26 | <p></p>
27 | 
28 | {% if shopify_shipping_enabled %}
29 | <p>Save time and money by <a href="{{ fulfillment_url }}">fulfilling with Shopify Shipping</a></p>
30 | <p></p>
31 | {% endif %}
32 | 
33 | 


--------------------------------------------------------------------------------
/src/customer_account_welcome.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %}Welcome to {{ shop.name }}! {% endcapture %}
 2 | {% capture email_body %}You've activated your customer account. Next time you shop with us, log in for faster checkout.{% endcapture %}
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 |   <head>
 7 |   <title>{{ email_title }}</title>
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 |   <meta name="viewport" content="width=device-width">
10 |   <!-- To be inlined -->
11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
13 | </head>
14 | 
15 |   <body>
16 |     <table class="body">
17 |       <tr>
18 |         <td>
19 | 
20 |           <!-- @@include('header.liquid') -->
21 | 
22 |           <table class="row content">
23 |             <tr>
24 |               <td class="content__cell">
25 |                 <center>
26 |                   <table class="container">
27 |                     <tr>
28 |                       <td>
29 |                         <h2>{{ email_title }}</h2>
30 |                         <p>{{ email_body }}</p>
31 |                         {% if shop.url %}
32 |                           <table class="row actions">
33 |                             <tr>
34 |                               <td class="actions__cell">
35 |                                 <table class="button main-action-cell">
36 |                                   <tr>
37 |                                     <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
38 |                                   </tr>
39 |                                 </table>
40 |                               </td>
41 |                             </tr>
42 |                           </table>
43 |                         {% endif %}
44 |                       </td>
45 |                     </tr>
46 |                   </table>
47 |                 </center>
48 |               </td>
49 |             </tr>
50 |           </table>
51 | 
52 |           <!-- @@include('footer.liquid') -->
53 | 
54 |         </td>
55 |       </tr>
56 |     </table>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/src/snippets/shipment-items.liquid:
--------------------------------------------------------------------------------
 1 | <table class="row section">
 2 |   <tr>
 3 |     <td class="section__cell">
 4 |       <center>
 5 |         <table class="container">
 6 |           <tr>
 7 |             <td>
 8 |               <h3>Items in this shipment</h3>
 9 |             </td>
10 |           </tr>
11 |         </table>
12 |         <table class="container">
13 |           <tr>
14 |             <td>
15 |               <table class="row">
16 |                 {% for line in fulfillment.fulfillment_line_items %}
17 | 
18 |                 {% if item_count == 1 %}
19 |                   {% assign columnWrapperClass = 'order-list__item--single' %}
20 |                 {% elsif forloop.first == true %}
21 |                   {% assign columnWrapperClass = 'order-list__item--first' %}
22 |                 {% elsif forloop.last == true %}
23 |                   {% assign columnWrapperClass = 'order-list__item--last' %}
24 |                 {% else %}
25 |                   {% assign columnWrapperClass = '' %}
26 |                 {% endif %}
27 |                 <tr class="order-list__item {{columnWrapperClass}}">
28 |                   <td class="order-list__item__cell">
29 |                     <table>
30 |                       <td>
31 |                         {% if line.line_item.image %}
32 |                           <img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
33 |                         {% endif %}
34 |                       </td>
35 |                       <td class="order-list__product-description-cell">
36 |                         {% if line.line_item.product.title %}
37 |                           {% assign line_title = line.line_item.product.title %}
38 |                         {% else %}
39 |                           {% assign line_title = line.line_item.title %}
40 |                         {% endif %}
41 |                         <span class="order-list__item-title">{{ line_title }} × {{ line.line_item.quantity }}</span><br/>
42 |                         {% if line.line_item.variant.title != 'Default Title' %}
43 |                           <span class="order-list__item-variant">{{ line.line_item.variant.title }}</span>
44 |                         {% endif %}
45 |                       </td>
46 |                     </table>
47 |                   </td>
48 |                 </tr>{% endfor %}
49 |               </table>
50 |             </td>
51 |           </tr>
52 |         </table>
53 |       </center>
54 |     </td>
55 |   </tr>
56 | </table>
57 | 


--------------------------------------------------------------------------------
/src/customer_account_password_reset.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %}Reset your password{% endcapture %}
 2 | {% capture email_body %}Follow this link to reset your customer account password at <a href="{{shop.url}}">{{shop.name}}</a>. If you didn't request a new password, you can safely delete this email.{% endcapture %}
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 |   <head>
 7 |   <title>{{ email_title }}</title>
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 |   <meta name="viewport" content="width=device-width">
10 |   <!-- To be inlined -->
11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
13 | </head>
14 | 
15 |   <body>
16 |     <table class="body">
17 |       <tr>
18 |         <td>
19 | 
20 |           <!-- @@include('header.liquid') -->
21 | 
22 |           <table class="row content">
23 |             <tr>
24 |               <td class="content__cell">
25 |                 <center>
26 |                   <table class="container">
27 |                     <tr>
28 |                       <td>
29 |                         <h2>{{ email_title }}</h2>
30 |                         <p>{{ email_body }}</p>
31 |                         <table class="row actions">
32 |                           <tr>
33 |                             <td class="actions__cell">
34 |                               <table class="button main-action-cell">
35 |                                 <tr>
36 |                                   <td class="button__cell"><a href="{{ customer.reset_password_url }}" class="button__text">Reset your password</a></td>
37 |                                 </tr>
38 |                               </table>
39 |                               {% if shop.url %}
40 |                                 <table class="link secondary-action-cell">
41 |                                   <tr>
42 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
43 |                                   </tr>
44 |                                 </table>
45 |                               {% endif %}
46 |                             </td>
47 |                           </tr>
48 |                         </table>
49 |                       </td>
50 |                     </tr>
51 |                   </table>
52 |                 </center>
53 |               </td>
54 |             </tr>
55 |           </table>
56 | 
57 |           <!-- @@include('footer.liquid') -->
58 | 
59 |         </td>
60 |       </tr>
61 |     </table>
62 |   </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/src/customer_account_activation.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %} Activate your account {% endcapture %}
 2 | {% capture email_body %}Hi {{ customer.first_name }}, you've created a new customer account at <a href="{{shop.url}}">{{shop.name}}</a>. All you have to do is activate it and choose a password. {% endcapture %}
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 |   <head>
 7 |   <title>{{ email_title }}</title>
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 |   <meta name="viewport" content="width=device-width">
10 |   <!-- To be inlined -->
11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
13 | </head>
14 | 
15 |   <body>
16 |     <table class="body">
17 |       <tr>
18 |         <td>
19 | 
20 |           <!-- @@include('header.liquid') -->
21 | 
22 |           <table class="row content">
23 |             <tr>
24 |               <td class="content__cell">
25 |                 <center>
26 |                   <table class="container">
27 |                     <tr>
28 |                       <td>
29 |                         <h2>{{ email_title }}</h2>
30 |                         {% if custom_message != blank %}
31 |                           <p>{{ custom_message }}</p>
32 |                         {% else %}
33 |                           <p>{{ email_body }}</p>
34 |                         {% endif %}
35 |                         <table class="row actions">
36 |                           <tr>
37 |                             <td class="actions__cell">
38 |                               <table class="button main-action-cell">
39 |                                 <tr>
40 |                                   <td class="button__cell"><a href="{{ customer.account_activation_url }}" class="button__text">Activate your account</a></td>
41 |                                 </tr>
42 |                               </table>
43 |                               {% if shop.url %}
44 |                                 <table class="link secondary-action-cell">
45 |                                   <tr>
46 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
47 |                                   </tr>
48 |                                 </table>
49 |                               {% endif %}
50 |                             </td>
51 |                           </tr>
52 |                         </table>
53 |                       </td>
54 |                     </tr>
55 |                   </table>
56 |                 </center>
57 |               </td>
58 |             </tr>
59 |           </table>
60 | 
61 |           <!-- @@include('footer.liquid') -->
62 | 
63 |         </td>
64 |       </tr>
65 |     </table>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/src/gift_card_created.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %}Your gift card is now available! {% endcapture %}
 2 | {% capture email_body %}Hi{% if gift_card.customer %} {{ gift_card.customer.first_name }}{% endif %}, here is your {{ gift_card.balance | money_without_trailing_zeros }} gift card. Treat yourself, or send it to someone else as a gift.{% endcapture %}
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 |   <head>
 7 |   <title>{{ email_title }}</title>
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 |   <meta name="viewport" content="width=device-width">
10 |   <!-- To be inlined -->
11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
13 | </head>
14 | 
15 |   <body>
16 |     <table class="body">
17 |       <tr>
18 |         <td>
19 | 
20 |           <!-- @@include('header.liquid') -->
21 | 
22 |           <table class="row content">
23 |             <tr>
24 |               <td class="content__cell">
25 |                 <center>
26 |                   <table class="container">
27 |                     <tr>
28 |                       <td>
29 |                         <h2>{{ email_title }}</h2>
30 |                         <p>{{ email_body }}</p>
31 |                         <table class="row actions">
32 |                           <tr>
33 |                             <td class="actions__cell">
34 |                               <table class="button main-action-cell">
35 |                                 <tr>
36 |                                   <td class="button__cell"><a href="{{ gift_card.url }}" class="button__text">View your gift card</a></td>
37 |                                 </tr>
38 |                               </table>
39 |                               {% if shop.url %}
40 |                                 <table class="link secondary-action-cell">
41 |                                   <tr>
42 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
43 |                                   </tr>
44 |                                 </table>
45 |                               {% endif %}
46 |                             </td>
47 |                           </tr>
48 |                         </table>
49 |                         {% if gift_card.pass_url %}
50 |                           <a href="{{ gift_card.pass_url }}" class="apple-wallet-button">
51 |                             <img src="{{ 'gift-card/add-to-apple-wallet.png' | shopify_asset_url }}" alt="Add to Apple Wallet" width="120" height="40">
52 |                           </a>
53 |                         {% endif %}
54 |                       </td>
55 |                     </tr>
56 |                   </table>
57 |                 </center>
58 |               </td>
59 |             </tr>
60 |           </table>
61 | 
62 |           <!-- @@include('footer.liquid') -->
63 | 
64 |         </td>
65 |       </tr>
66 |     </table>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/src/shipping_update.liquid:
--------------------------------------------------------------------------------
 1 | {% capture email_title %}Your shipping status has been updated {% endcapture %}
 2 | {% capture email_body %}The following items have been updated with new shipping information.{% endcapture %}
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 |   <head>
 7 |   <title>{{ email_title }}</title>
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 9 |   <meta name="viewport" content="width=device-width">
10 |   <!-- To be inlined -->
11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
13 | </head>
14 | 
15 |   <body>
16 |     <table class="body">
17 |       <tr>
18 |         <td>
19 | 
20 |           <!-- @@include('header.liquid') -->
21 | 
22 |           <table class="row content">
23 |             <tr>
24 |               <td class="content__cell">
25 |                 <center>
26 |                   <table class="container">
27 |                     <tr>
28 |                       <td>
29 |                         <h2>{{ email_title }}</h2>
30 |                         <p>{{ email_body }}</p>
31 |                         <p>{{ email_emphasis }}</p>
32 |                         {% if order_status_url %}
33 |                           <table class="row actions">
34 |                             <tr>
35 |                               <td class="actions__cell">
36 |                                 <table class="button main-action-cell">
37 |                                   <tr>
38 |                                     <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
39 |                                   </tr>
40 |                                 </table>
41 |                                 {% if shop.url %}
42 |                                   <table class="link secondary-action-cell">
43 |                                     <tr>
44 |                                       <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
45 |                                     </tr>
46 |                                   </table>
47 |                                 {% endif %}
48 |                               </td>
49 |                             </tr>
50 |                           </table>
51 |                         {% else %}
52 |                           {% if shop.url %}
53 |                             <table class="row actions">
54 |                               <tr>
55 |                                 <td class="actions__cell">
56 |                                   <table class="button main-action-cell">
57 |                                     <tr>
58 |                                       <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
59 |                                     </tr>
60 |                                   </table>
61 |                                 </td>
62 |                               </tr>
63 |                             </table>
64 |                           {% endif %}
65 |                         {% endif %}
66 |                       </td>
67 |                     </tr>
68 |                   </table>
69 |                 </center>
70 |               </td>
71 |             </tr>
72 |           </table>
73 | 
74 |           <!-- @@include('shipment-items.liquid') -->
75 | 
76 |           <!-- @@include('footer.liquid') -->
77 | 
78 |         </td>
79 |       </tr>
80 |     </table>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/src/shipping_confirmation.liquid:
--------------------------------------------------------------------------------
  1 | {% if fulfillment.item_count == item_count %}
  2 |   {% capture shipment_name %}Your order is{% endcapture %}
  3 | {% elsif fulfillment.item_count > 1 %}
  4 |   {% if fulfillment_status == 'fulfilled' %}
  5 |     {% capture shipment_name %}The last items in your order are{% endcapture %}
  6 |   {% else %}
  7 |     {% capture shipment_name %}Some items in your order are{% endcapture %}
  8 |   {% endif %}
  9 | {% else %}
 10 |   {% if fulfillment_status == 'fulfilled' %}
 11 |     {% capture shipment_name %}The last item in your order is{% endcapture %}
 12 |   {% else %}
 13 |     {% capture shipment_name %}One item in your order is{% endcapture %}
 14 |   {% endif %}
 15 | {% endif %}
 16 | 
 17 | {% capture email_title %}{{ shipment_name }} on the way{% endcapture %}
 18 | {% capture email_body %}{{ shipment_name }} on the way to you. Track your shipment to see the delivery status.{% endcapture %}
 19 | {% capture email_emphasis %}Estimated delivery date: <strong>{{fulfillment.estimated_delivery_at | date: "%B %d, %Y"}}</strong>{% endcapture %}
 20 | 
 21 | <!DOCTYPE html>
 22 | <html lang="en">
 23 |   <head>
 24 |   <title>{{ email_title }}</title>
 25 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 26 |   <meta name="viewport" content="width=device-width">
 27 |   <!-- To be inlined -->
 28 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 29 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 30 | </head>
 31 | 
 32 |   <body>
 33 | 
 34 |     <table class="body">
 35 |       <tr>
 36 |         <td>
 37 | 
 38 |           <!-- @@include('header.liquid') -->
 39 | 
 40 |           <table class="row content">
 41 |             <tr>
 42 |               <td class="content__cell">
 43 |                 <center>
 44 |                   <table class="container">
 45 |                     <tr>
 46 |                       <td>
 47 | 
 48 |                         <h2>{{ email_title }}</h2>
 49 |                         <p>{{ email_body }}</p>
 50 |                         {% if fulfillment.estimated_delivery_at %}
 51 |                           <p>{{ email_emphasis }}</p>
 52 |                         {% endif %}
 53 |                         {% if order_status_url %}
 54 |                           <table class="row actions">
 55 |                             <tr>
 56 |                               <td class="actions__cell">
 57 |                                 <table class="button main-action-cell">
 58 |                                   <tr>
 59 |                                     <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
 60 |                                   </tr>
 61 |                                 </table>
 62 |                                 {% if shop.url %}
 63 |                                   <table class="link secondary-action-cell">
 64 |                                     <tr>
 65 |                                       <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
 66 |                                     </tr>
 67 |                                   </table>
 68 |                                 {% endif %}
 69 |                               </td>
 70 |                             </tr>
 71 |                           </table>
 72 |                         {% else %}
 73 |                           {% if shop.url %}
 74 |                             <table class="row actions">
 75 |                               <tr>
 76 |                                 <td class="actions__cell">
 77 |                                   <table class="button main-action-cell">
 78 |                                     <tr>
 79 |                                       <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
 80 |                                     </tr>
 81 |                                   </table>
 82 |                                 </td>
 83 |                               </tr>
 84 |                             </table>
 85 |                           {% endif %}
 86 |                         {% endif %}
 87 |                       </td>
 88 |                     </tr>
 89 |                   </table>
 90 |                 </center>
 91 |               </td>
 92 |             </tr>
 93 |           </table>
 94 | 
 95 |           <!-- @@include('shipment-items.liquid') -->
 96 | 
 97 |           <!-- @@include('footer.liquid') -->
 98 | 
 99 |         </td>
100 |       </tr>
101 |     </table>
102 |   </body>
103 | </html>
104 | 


--------------------------------------------------------------------------------
/src/shipping_out_for_delivery.liquid:
--------------------------------------------------------------------------------
  1 | {% if fulfillment.item_count == item_count %}
  2 |   {% capture shipment_name %}Your order is{% endcapture %}
  3 | {% elsif fulfillment.item_count > 1 %}
  4 |   {% if fulfillment_status == 'fulfilled' %}
  5 |     {% capture shipment_name %}The last items in your order are{% endcapture %}
  6 |   {% else %}
  7 |     {% capture shipment_name %}Some items in your order are{% endcapture %}
  8 |   {% endif %}
  9 | {% else %}
 10 |   {% if fulfillment_status == 'fulfilled' %}
 11 |     {% capture shipment_name %}The last item in your order is{% endcapture %}
 12 |   {% else %}
 13 |     {% capture shipment_name %}One item in your order is{% endcapture %}
 14 |   {% endif %}
 15 | {% endif %}
 16 | 
 17 | {% capture email_title %}{{ shipment_name }} out for delivery{% endcapture %}
 18 | {% capture email_body %}{{ shipment_name }} out for delivery. Track your shipment to see the delivery status.{% endcapture %}
 19 | {% capture email_emphasis %}Estimated delivery date: <strong>{{fulfillment.estimated_delivery_at | date: "%B %d, %Y"}}</strong>{% endcapture %}
 20 | 
 21 | <!DOCTYPE html>
 22 | <html lang="en">
 23 |   <head>
 24 |   <title>{{ email_title }}</title>
 25 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 26 |   <meta name="viewport" content="width=device-width">
 27 |   <!-- To be inlined -->
 28 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 29 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 30 | </head>
 31 | 
 32 |   <body>
 33 |     <table class="body">
 34 |       <tr>
 35 |         <td>
 36 | 
 37 |           <!-- @@include('header.liquid') -->
 38 | 
 39 |           <table class="row content">
 40 |             <tr>
 41 |               <td class="content__cell">
 42 |                 <center>
 43 |                   <table class="container">
 44 |                     <tr>
 45 |                       <td>
 46 | 
 47 |                         <h2>{{ email_title }}</h2>
 48 |                         <p>{{ email_body }}</p>
 49 |                         {% if fulfillment.estimated_delivery_at %}
 50 |                           <p>{{ email_emphasis }}</p>
 51 |                         {% endif %}
 52 |                         {% if order_status_url %}
 53 |                           <table class="row actions">
 54 |                             <tr>
 55 |                               <td class="actions__cell">
 56 |                                 <table class="button main-action-cell">
 57 |                                   <tr>
 58 |                                     <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Track my shipment</a></td>
 59 |                                   </tr>
 60 |                                 </table>
 61 |                                 {% if shop.url %}
 62 |                                   <table class="link secondary-action-cell">
 63 |                                     <tr>
 64 |                                       <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
 65 |                                     </tr>
 66 |                                   </table>
 67 |                                 {% endif %}
 68 |                               </td>
 69 |                             </tr>
 70 |                           </table>
 71 |                         {% else %}
 72 |                           {% if shop.url %}
 73 |                             <table class="row actions">
 74 |                               <tr>
 75 |                                 <td class="actions__cell">
 76 |                                   <table class="button main-action-cell">
 77 |                                     <tr>
 78 |                                       <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
 79 |                                     </tr>
 80 |                                   </table>
 81 |                                 </td>
 82 |                               </tr>
 83 |                             </table>
 84 |                           {% endif %}
 85 |                         {% endif %}
 86 |                       </td>
 87 |                     </tr>
 88 |                   </table>
 89 |                 </center>
 90 |               </td>
 91 |             </tr>
 92 |           </table>
 93 | 
 94 |           <!-- @@include('shipment-items.liquid') -->
 95 | 
 96 |           <!-- @@include('footer.liquid') -->
 97 | 
 98 |         </td>
 99 |       </tr>
100 |     </table>
101 |   </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/src/shipment_delivered.liquid:
--------------------------------------------------------------------------------
  1 | {% if fulfillment.item_count == item_count %}
  2 |   {% capture shipment_name %}Your order has been{% endcapture %}
  3 | {% elsif fulfillment.item_count > 1 %}
  4 |   {% if fulfillment_status == 'fulfilled' %}
  5 |     {% capture shipment_name %}The last items in your order have been{% endcapture %}
  6 |   {% else %}
  7 |     {% capture shipment_name %}Some items in your order have been{% endcapture %}
  8 |   {% endif %}
  9 | {% else %}
 10 |   {% if fulfillment_status == 'fulfilled' %}
 11 |     {% capture shipment_name %}The last item in your order has been{% endcapture %}
 12 |   {% else %}
 13 |     {% capture shipment_name %}One item in your order has been{% endcapture %}
 14 |   {% endif %}
 15 | {% endif %}
 16 | 
 17 | {% capture email_title %}{{ shipment_name }} delivered{% endcapture %}
 18 | {% capture email_body %}{{ shipment_name }} delivered. Track your shipment to see the delivery status.{% endcapture %}
 19 | 
 20 | <!DOCTYPE html>
 21 | <html lang="en">
 22 |   <head>
 23 |   <title>{{ email_title }}</title>
 24 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 25 |   <meta name="viewport" content="width=device-width">
 26 |   <!-- To be inlined -->
 27 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 28 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 29 | </head>
 30 | 
 31 |   <body>
 32 |     <table class="body">
 33 |       <tr>
 34 |         <td>
 35 | 
 36 |           <!-- @@include('header.liquid') -->
 37 | 
 38 |           <table class="row content">
 39 |             <tr>
 40 |               <td class="content__cell">
 41 |                 <center>
 42 |                   <table class="container">
 43 |                     <tr>
 44 |                       <td>
 45 |                         <h2>{{ email_title }}</h2>
 46 |                         <table class="text-icon-container">
 47 |                           <tr class="text-icon-row">
 48 |                             <td class="text-icon"><img src="{{ 'notifications/question.png' | shopify_asset_url }}" class="text-icon__image"></td>
 49 |                             <td class="text">
 50 |                               <p>Haven't received your package yet? <a href="mailto:{{ shop.email }}">Let us know</a></p>
 51 |                             </td>
 52 |                           </tr>
 53 |                         </table>
 54 |                         {% if order_status_url %}
 55 |                           <table class="row actions">
 56 |                             <tr>
 57 |                               <td class="actions__cell">
 58 |                                 <table class="button main-action-cell">
 59 |                                   <tr>
 60 |                                     <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
 61 |                                   </tr>
 62 |                                 </table>
 63 |                                 {% if shop.url %}
 64 |                                   <table class="link secondary-action-cell">
 65 |                                     <tr>
 66 |                                       <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
 67 |                                     </tr>
 68 |                                   </table>
 69 |                                 {% endif %}
 70 |                               </td>
 71 |                             </tr>
 72 |                           </table>
 73 |                         {% else %}
 74 |                           {% if shop.url %}
 75 |                             <table class="row actions">
 76 |                               <tr>
 77 |                                 <td class="actions__cell">
 78 |                                   <table class="button main-action-cell">
 79 |                                     <tr>
 80 |                                       <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
 81 |                                     </tr>
 82 |                                   </table>
 83 |                                 </td>
 84 |                               </tr>
 85 |                             </table>
 86 |                           {% endif %}
 87 |                         {% endif %}
 88 |                       </td>
 89 |                     </tr>
 90 |                   </table>
 91 |                 </center>
 92 |               </td>
 93 |             </tr>
 94 |           </table>
 95 | 
 96 |           <!-- @@include('shipment-items.liquid') -->
 97 | 
 98 |           <!-- @@include('footer.liquid') -->
 99 | 
100 |         </td>
101 |       </tr>
102 |     </table>
103 |   </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/src/abandoned_checkout.liquid:
--------------------------------------------------------------------------------
  1 | {% capture email_title %} Your shopping cart is waiting for you {% endcapture %}
  2 | {% capture email_body %}
  3 | {% if billing_address.first_name %}Hi {{ billing_address.first_name }}, w{% else %}
  4 | W{% endif %}e noticed there {% if item_count == 1 %}was an item{% else %}were some items{% endif %} left in your shopping cart.
  5 | If you're ready to complete your order, your cart is waiting for your return.
  6 | {% endcapture %}
  7 | 
  8 | <!DOCTYPE html>
  9 | <html lang="en">
 10 |   <head>
 11 |   <title>{{ email_title }}</title>
 12 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 13 |   <meta name="viewport" content="width=device-width">
 14 |   <!-- To be inlined -->
 15 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 16 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 17 | </head>
 18 | 
 19 |   <body>
 20 |     <table class="body">
 21 |       <tr>
 22 |         <td>
 23 | 
 24 |           <!-- @@include('header.liquid') -->
 25 | 
 26 |           <table class="row content">
 27 |             <tr>
 28 |               <td class="content__cell">
 29 |                 <center>
 30 |                   <table class="container">
 31 |                     <tr>
 32 |                       <td>
 33 |                         <h2>{{ email_title }}</h2>
 34 |                         {% if custom_message != blank %}
 35 |                           <p>{{ custom_message }}</p>
 36 |                         {% else %}
 37 |                           <p>{{ email_body }}</p>
 38 |                         {% endif %}
 39 |                         <table class="row actions">
 40 |                           <tr>
 41 |                             <td class="actions__cell">
 42 |                               <table class="button main-action-cell">
 43 |                                 <tr>
 44 |                                   <td class="button__cell"><a href="{{ url }}" class="button__text">Complete your purchase</a></td>
 45 |                                 </tr>
 46 |                               </table>
 47 |                               {% if shop.url %}
 48 |                                 <table class="link secondary-action-cell">
 49 |                                   <tr>
 50 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
 51 |                                   </tr>
 52 |                                 </table>
 53 |                               {% endif %}
 54 |                             </td>
 55 |                           </tr>
 56 |                         </table>
 57 |                       </td>
 58 |                     </tr>
 59 |                   </table>
 60 |                 </center>
 61 |               </td>
 62 |             </tr>
 63 |           </table>
 64 |           <table class="row section">
 65 |             <tr>
 66 |               <td class="section__cell">
 67 |                 <center>
 68 |                   <table class="container">
 69 |                     <tr>
 70 |                       <td>
 71 |                         <h3>Items in your cart</h3>
 72 |                       </td>
 73 |                     </tr>
 74 |                   </table>
 75 |                   <table class="container">
 76 |                     <tr>
 77 |                       <td>
 78 |                         <table class="row">
 79 |                           {% for line in line_items %}
 80 | 
 81 |                           {% if item_count == 1 %}
 82 |                             {% assign columnWrapperClass = 'order-list__item--single' %}
 83 |                           {% elsif forloop.first == true %}
 84 |                             {% assign columnWrapperClass = 'order-list__item--first' %}
 85 |                           {% elsif forloop.last == true %}
 86 |                             {% assign columnWrapperClass = 'order-list__item--last' %}
 87 |                           {% else %}
 88 |                             {% assign columnWrapperClass = '' %}
 89 |                           {% endif %}
 90 |                           <tr class="order-list__item {{columnWrapperClass}}">
 91 |                             <td class="order-list__item__cell">
 92 |                               <table>
 93 |                                 <td>
 94 |                                   {% if line.image %}
 95 |                                     <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
 96 |                                   {% endif %}
 97 |                                 </td>
 98 |                                 <td class="order-list__product-description-cell">
 99 |                                   {% if line.product.title %}
100 |                                     {% assign line_title = line.product.title %}
101 |                                   {% else %}
102 |                                     {% assign line_title = line.title %}
103 |                                   {% endif %}
104 |                                   <span class="order-list__item-title">{{ line_title }} × {{ line.quantity }}</span><br/>
105 |                                   {% if line.variant.title != 'Default Title' %}
106 |                                     <span class="order-list__item-variant">{{ line.variant.title }}</span>
107 |                                   {% endif %}
108 |                                 </td>
109 |                               </table>
110 |                             </td>
111 |                           </tr>{% endfor %}
112 |                         </table>
113 |                       </td>
114 |                     </tr>
115 |                   </table>
116 |                 </center>
117 |               </td>
118 |             </tr>
119 |           </table>
120 | 
121 |           <!-- @@include('footer.liquid') -->
122 | 
123 |         </td>
124 |       </tr>
125 |     </table>
126 |   </body>
127 | </html>
128 | 


--------------------------------------------------------------------------------
/src/draft_order_invoice.liquid:
--------------------------------------------------------------------------------
  1 | {% capture email_title %}Complete your purchase{% endcapture %}
  2 | {% capture email_body %}{% if item_count > 1 %}These items{% else %}This item{% endif %} will be reserved for you until: <strong>{{ reserve_inventory_until | date: "%B %d, %Y at %I:%M %p %Z" }}</strong>{% endcapture %}
  3 | 
  4 | <!DOCTYPE html>
  5 | <html lang="en">
  6 |   <head>
  7 |   <title>{{ email_title }}</title>
  8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9 |   <meta name="viewport" content="width=device-width">
 10 |   <!-- To be inlined -->
 11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 13 | </head>
 14 | 
 15 |   <body>
 16 |     <table class="body">
 17 |       <tr>
 18 |         <td>
 19 | 
 20 |           <!-- @@include('header.liquid') -->
 21 | 
 22 |           <table class="row content">
 23 |             <tr>
 24 |               <td class="content__cell">
 25 |                 <center>
 26 |                   <table class="container">
 27 |                     <tr>
 28 |                       <td>
 29 |                         <h2>{{ email_title }}</h2>
 30 |                         {% if custom_message != blank %}
 31 |                           <p>{{ custom_message }}</p>
 32 |                         {% elsif reserve_inventory_until %}
 33 |                           <p>{{ email_body }}</p>
 34 |                         {% endif %}
 35 |                         <table class="row actions">
 36 |                           <tr>
 37 |                             <td class="actions__cell">
 38 |                               <table class="button main-action-cell">
 39 |                                 <tr>
 40 |                                   <td class="button__cell"><a href="{{ invoice_url }}" class="button__text">Complete your purchase</a></td>
 41 |                                 </tr>
 42 |                               </table>
 43 |                               {% if shop.url %}
 44 |                                 <table class="link secondary-action-cell">
 45 |                                   <tr>
 46 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
 47 |                                   </tr>
 48 |                                 </table>
 49 |                               {% endif %}
 50 |                             </td>
 51 |                           </tr>
 52 |                         </table>
 53 |                       </td>
 54 |                     </tr>
 55 |                   </table>
 56 |                 </center>
 57 |               </td>
 58 |             </tr>
 59 |           </table>
 60 | 
 61 |           <!-- @@include('order-summary.liquid') -->
 62 | 
 63 |           {% if shipping_address or billing_address or shipping_method %}
 64 |             <table class="row section">
 65 |               <tr>
 66 |                 <td class="section__cell">
 67 |                   <center>
 68 |                     <table class="container">
 69 |                       <tr>
 70 |                         <td>
 71 |                           <h3>Customer information</h3>
 72 |                         </td>
 73 |                       </tr>
 74 |                     </table>
 75 |                     <table class="container">
 76 |                       <tr>
 77 |                         <td>
 78 | 
 79 |                           <table class="row">
 80 |                             <tr>
 81 |                               {% if shipping_address %}
 82 |                                 <td class="customer-info__item">
 83 |                                   <h4>Shipping address</h4>
 84 |                                   <p>
 85 |                                     {{ shipping_address.name }}<br/>
 86 |                                     {{ shipping_address.address1 }}
 87 |                                     {% if shipping_address.address2 %}
 88 |                                     <br/>{{ shipping_address.address2 }}
 89 |                                     {% endif %}
 90 |                                     <br/>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}
 91 |                                     <br/>{{ shipping_address.country }}
 92 |                                   </p>
 93 |                                 </td>
 94 |                               {% endif %}
 95 |                               {% if billing_address %}
 96 |                                 <td class="customer-info__item">
 97 |                                   <h4>Billing address</h4>
 98 |                                   <p>
 99 |                                     {{ billing_address.name }}<br/>
100 |                                     {{ billing_address.address1 }}
101 |                                     {% if billing_address.address2 %}
102 |                                     <br/>{{ billing_address.address2 }}
103 |                                     {% endif %}
104 |                                     <br/>{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}
105 |                                     <br/>{{ billing_address.country }}
106 |                                   </p>
107 |                                 </td>
108 |                               {% endif %}
109 |                             </tr>
110 |                           </table>
111 |                           {% if shipping_method %}
112 |                             <table class="row">
113 |                               <tr>
114 |                                 <td class="customer-info__item customer-info__item--last">
115 |                                   <h4>Shipping method</h4>
116 |                                   <p>{{ shipping_method.title }}<br/>{{ shipping_method.price | money }}</p>
117 |                                 </td>
118 |                               </tr>
119 |                             </table>
120 |                           {% endif %}
121 |                         </td>
122 |                       </tr>
123 |                     </table>
124 |                   </center>
125 |                 </td>
126 |               </tr>
127 |             </table>
128 |           {% endif %}
129 | 
130 |           <!-- @@include('footer.liquid') -->
131 | 
132 |         </td>
133 |       </tr>
134 |     </table>
135 |   </body>
136 | </html>
137 | 


--------------------------------------------------------------------------------
/src/order_confirmation.liquid:
--------------------------------------------------------------------------------
  1 | {% capture email_title %}Thank you for your purchase! {% endcapture %}
  2 | {% capture email_body %}Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.{% endcapture %}
  3 | 
  4 | <!DOCTYPE html>
  5 | <html lang="en">
  6 |   <head>
  7 |   <title>{{ email_title }}</title>
  8 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9 |   <meta name="viewport" content="width=device-width">
 10 |   <!-- To be inlined -->
 11 |   <link rel="stylesheet" type="text/css" href="assets/notifications/style.css">
 12 |   <link rel="stylesheet" type="text/css" href="assets/notifications/inline-styles.css">
 13 | </head>
 14 | 
 15 | <body>
 16 |   <table class="body">
 17 |     <tr>
 18 |       <td>
 19 | 
 20 |         <!-- @@include('header.liquid') -->
 21 | 
 22 |         <!-- Message -->
 23 |         <table class="row content">
 24 |           <tr>
 25 |             <td class="content__cell content__cell--quarter">
 26 |               <center>
 27 |                 <table class="container">
 28 |                   <tr>
 29 |                     <td>
 30 |                       <h2>{{ email_title }}</h2>
 31 |                       <p>{{ email_body }}</p>
 32 |                       {% if order_status_url %}
 33 |                         <table class="row actions">
 34 |                           <tr>
 35 |                             <td class="actions__cell">
 36 |                               <table class="button main-action-cell">
 37 |                                 <tr>
 38 |                                   <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
 39 |                                 </tr>
 40 |                               </table>
 41 |                               {% if shop.url %}
 42 |                                 <table class="link secondary-action-cell">
 43 |                                   <tr>
 44 |                                     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><strong><span class='or'>or</span> Visit our store</strong></a></td>
 45 |                                   </tr>
 46 |                                 </table>
 47 |                               {% endif %}
 48 |                             </td>
 49 |                           </tr>
 50 |                         </table>
 51 |                       {% else %}
 52 |                         {% if shop.url %}
 53 |                           <table class="row actions">
 54 |                             <tr>
 55 |                               <td class="actions__cell">
 56 |                                 <table class="button main-action-cell">
 57 |                                   <tr>
 58 |                                     <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
 59 |                                   </tr>
 60 |                                 </table>
 61 |                               </td>
 62 |                             </tr>
 63 |                           </table>
 64 |                         {% endif %}
 65 |                       {% endif %}
 66 |                     </td>
 67 |                   </tr>
 68 |                 </table>
 69 |               </center>
 70 |             </td>
 71 |           </tr>
 72 |         </table>
 73 | 
 74 |         <!-- @@include('order-summary.liquid') -->
 75 | 
 76 |         <!-- Customer info -->
 77 |         <table class="row section">
 78 |           <tr>
 79 |             <td class="section__cell section__cell--quarter">
 80 |               <center>
 81 |                 <table class="container">
 82 |                   <tr>
 83 |                     <td>
 84 |                       <h3>Customer information</h3>
 85 |                     </td>
 86 |                   </tr>
 87 |                 </table>
 88 |                 <table class="container">
 89 |                   <tr>
 90 |                     <td>
 91 |                       <table class="row">
 92 |                         <tr>
 93 |                           {% if requires_shipping and shipping_address %}
 94 |                             <td class="customer-info__item">
 95 |                               <h4>Shipping address</h4>
 96 |                               <p>
 97 |                                 {{ shipping_address.name }}<br/>
 98 |                                 {{ shipping_address.address1 }}
 99 |                                 {% if shipping_address.address2 %}
100 |                                 <br/>{{ shipping_address.address2 }}
101 |                                 {% endif %}
102 |                                 <br/>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}
103 |                                 <br/>{{ shipping_address.country }}
104 |                               </p>
105 |                             </td>
106 |                           {% endif %}
107 |                           {% if billing_address %}
108 |                             <td class="customer-info__item">
109 |                               <h4>Billing address</h4>
110 |                               <p>
111 |                                 {{ billing_address.name }}<br/>
112 |                                 {{ billing_address.address1 }}
113 |                                 {% if billing_address.address2 %}
114 |                                 <br/>{{ billing_address.address2 }}
115 |                                 {% endif %}
116 |                                 <br/>{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}
117 |                                 <br/>{{ billing_address.country }}
118 |                               </p>
119 |                             </td>
120 |                           {% endif %}
121 |                         </tr>
122 |                       </table>
123 |                       <table class="row">
124 |                         <tr>
125 |                           <td class="customer-info__item">
126 |                             <h4>Shipping method</h4>
127 |                             <p>{{ shipping_method.title }}</p>
128 |                           </td>
129 |                           <td class="customer-info__item">
130 |                             <h4>Payment method</h4>
131 |                             {% for transaction in transactions %}
132 |                               {% if (transaction.status == "success") and (transaction.kind == "authorization" or transaction.kind == "sale") %}
133 |                                 <p class="customer-info__item-content">
134 |                                   {% if transaction.payment_details.credit_card_company %}
135 |                                     {% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase }}.png{% endcapture %}
136 |                                     <span>Ending in {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ total_price | money }}</strong></span>
137 |                                   {% else %}
138 |                                     {{ transaction.gateway | replace: "_", " " | capitalize }} — <strong>{{ transaction.amount | money }}</strong>
139 |                                   {% endif %}
140 |                                 </p>
141 |                               {% endif %}
142 |                             {% endfor %}
143 |                           </td>
144 |                         </tr>
145 |                       </table>
146 |                     </td>
147 |                   </tr>
148 |                 </table>
149 |               </center>
150 |             </td>
151 |           </tr>
152 |         </table>
153 | 
154 |         <!-- @@include('footer.liquid') -->
155 | 
156 |       </td>
157 |     </tr>
158 |   </table>
159 | </body>
160 | </html>
161 | 


--------------------------------------------------------------------------------
/src/assets/notifications/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Shopify's default stylesheet
  3 |  * - this can be found (minified) by visiting:
  4 |  *
  5 |  *   www.you-shop.myshopify.com/assets/notifications/styles.css
  6 |  */
  7 | 
  8 | body {
  9 |     margin: 0
 10 | }
 11 | 
 12 | .body {
 13 |     height: 100% !important;
 14 |     width: 100% !important
 15 | }
 16 | 
 17 | .row {
 18 |     width: 100%
 19 | }
 20 | 
 21 | .container {
 22 |     width: 560px;
 23 |     text-align: left;
 24 |     margin: 0 auto
 25 | }
 26 | 
 27 | @media (max-width: 600px) {
 28 |     .container {
 29 |         width: 94% !important
 30 |     }
 31 | }
 32 | 
 33 | table {
 34 |     border-spacing: 0;
 35 |     border-collapse: collapse
 36 | }
 37 | 
 38 | td {
 39 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
 40 | }
 41 | 
 42 | h1, h2, h3, h4, h5, h6 {
 43 |     font-weight: normal;
 44 |     margin: 0
 45 | }
 46 | 
 47 | h1, h1 a, h1 a:hover, h1 a:active, h1 a:visited {
 48 |     font-size: 30px;
 49 |     color: #333
 50 | }
 51 | 
 52 | h2 {
 53 |     font-size: 24px;
 54 |     margin-bottom: 10px
 55 | }
 56 | 
 57 | h3 {
 58 |     font-size: 20px;
 59 |     margin-bottom: 25px
 60 | }
 61 | 
 62 | h4 {
 63 |     font-size: 16px;
 64 |     font-weight: 500;
 65 |     color: #555;
 66 |     margin-bottom: 5px
 67 | }
 68 | 
 69 | p {
 70 |     margin: 0;
 71 |     color: #777;
 72 |     line-height: 150%
 73 | }
 74 | 
 75 | p+p {
 76 |     margin-top: 15px
 77 | }
 78 | 
 79 | span, strong, del, a, p {
 80 |     font-size: 16px
 81 | }
 82 | 
 83 | strong {
 84 |     color: #555
 85 | }
 86 | 
 87 | small {
 88 |     font-size: 14px;
 89 |     color: #999
 90 | }
 91 | 
 92 | a, a:hover, a:active, a:visited {
 93 |     text-decoration: none
 94 | }
 95 | 
 96 | .actions {
 97 |     margin-top: 20px
 98 | }
 99 | 
100 | .main-action-cell {
101 |     float: left;
102 |     margin-right: 15px
103 | }
104 | 
105 | @media (max-width: 600px) {
106 |     .main-action-cell {
107 |         float: none !important;
108 |         margin-right: 0 !important
109 |     }
110 | }
111 | 
112 | .secondary-action-cell {
113 |     margin-top: 19px
114 | }
115 | 
116 | @media (max-width: 600px) {
117 |     .secondary-action-cell {
118 |         text-align: center;
119 |         width: 100%
120 |     }
121 | }
122 | 
123 | .section {
124 |     border-top: 1px solid #e5e5e5
125 | }
126 | 
127 | .section__cell {
128 |     padding: 40px 0
129 | }
130 | 
131 | .content__cell {
132 |     padding-bottom: 40px
133 | }
134 | 
135 | .text-icon-row td {
136 |     padding-bottom: 5px
137 | }
138 | 
139 | .text-icon {
140 |     padding-right: 8px
141 | }
142 | 
143 | .text-icon__image {
144 |     width: 18px;
145 |     height: 18px;
146 |     display: inline-block;
147 |     vertical-align: middle
148 | }
149 | 
150 | .header {
151 |     margin: 40px 0 20px
152 | }
153 | 
154 | @media (max-width: 600px) {
155 |     .header {
156 |         margin-top: 20px !important;
157 |         margin-bottom: 2px !important
158 |     }
159 | }
160 | 
161 | @media (max-width: 600px) {
162 |     .shop-name__cell {
163 |         display: block
164 |     }
165 | }
166 | 
167 | .order-number__cell {
168 |     text-transform: uppercase;
169 |     font-size: 14px;
170 |     text-align: right;
171 |     color: #999
172 | }
173 | 
174 | @media (max-width: 600px) {
175 |     .order-number__cell {
176 |         display: block;
177 |         text-align: left !important;
178 |         margin-top: 20px
179 |     }
180 | }
181 | 
182 | @media (max-width: 600px) {
183 |     .button {
184 |         width: 100%
185 |     }
186 | }
187 | 
188 | .button__cell {
189 |     text-align: center;
190 |     padding: 20px 25px;
191 |     border-radius: 4px
192 | }
193 | 
194 | .button__text, .button__text:hover, .button__text:active, .button__text:visited {
195 |     color: #fff;
196 |     text-decoration: none
197 | }
198 | 
199 | .or {
200 |     color: #999;
201 |     display: inline-block;
202 |     margin-right: 10px
203 | }
204 | 
205 | @media (max-width: 600px) {
206 |     .or {
207 |         margin-right: 0 !important
208 |     }
209 | }
210 | 
211 | .apple-wallet-button {
212 |     display: block;
213 |     margin-top: 15px
214 | }
215 | 
216 | @media (max-width: 600px) {
217 |     .apple-wallet-button {
218 |         text-align: center
219 |     }
220 | }
221 | 
222 | .customer-info__item {
223 |     padding-bottom: 40px;
224 |     width: 50%
225 | }
226 | 
227 | @media (max-width: 600px) {
228 |     .customer-info__item {
229 |         display: block;
230 |         width: 100% !important
231 |     }
232 | }
233 | 
234 | .customer-info__item--last {
235 |     padding-bottom: 0
236 | }
237 | 
238 | .customer-info__item-credit {
239 |     height: 24px;
240 |     display: inline-block;
241 |     margin-right: 10px;
242 |     margin-top: 5px;
243 |     margin-bottom: -6px
244 | }
245 | 
246 | .footer {
247 |     border-top: 1px solid #e5e5e5
248 | }
249 | 
250 | .footer__cell {
251 |     padding: 35px 0
252 | }
253 | 
254 | .disclaimer__subtext {
255 |     font-size: 14px;
256 |     color: #999
257 | }
258 | 
259 | .disclaimer__subtext a {
260 |     font-size: 14px
261 | }
262 | 
263 | .spacer {
264 |     min-width: 600px;
265 |     height: 0
266 | }
267 | 
268 | @media (max-width: 600px) {
269 |     .spacer {
270 |         display: none
271 |     }
272 | }
273 | 
274 | .order-list__item {
275 |     width: 100%;
276 |     border-bottom: 1px solid #e5e5e5
277 | }
278 | 
279 | .order-list__item--single, .order-list__item--last {
280 |     border-bottom: none !important
281 | }
282 | 
283 | .order-list__item__cell {
284 |     padding: 15px 0
285 | }
286 | 
287 | .order-list__item--single .order-list__item__cell, .order-list__item--first .order-list__item__cell {
288 |     padding-top: 0 !important
289 | }
290 | 
291 | .order-list__item--single .order-list__item__cell, .order-list__item--last .order-list__item__cell {
292 |     padding-bottom: 0 !important
293 | }
294 | 
295 | .order-list__product-image {
296 |     margin-right: 15px;
297 |     border: 1px solid #e5e5e5;
298 |     border-radius: 8px
299 | }
300 | 
301 | .order-list__product-description-cell {
302 |     width: 100%
303 | }
304 | 
305 | .order-list__item-title {
306 |     font-weight: 600;
307 |     line-height: 1.4;
308 |     color: #555
309 | }
310 | 
311 | .order-list__item-variant {
312 |     color: #999;
313 |     font-size: 14px
314 | }
315 | 
316 | .order-list__item-original-price {
317 |     display: block;
318 |     text-align: right;
319 |     color: #999;
320 |     font-size: 14px
321 | }
322 | 
323 | .order-list__item-price {
324 |     font-weight: 600;
325 |     text-align: right;
326 |     margin-left: 15px;
327 |     color: #555
328 | }
329 | 
330 | .order-list__price-cell {
331 |     white-space: nowrap
332 | }
333 | 
334 | .subtotal-lines {
335 |     margin-top: 15px;
336 |     border-top: 1px solid #e5e5e5
337 | }
338 | 
339 | .subtotal-table {
340 |     margin-top: 20px
341 | }
342 | 
343 | .subtotal-line td {
344 |     padding: 5px 0
345 | }
346 | 
347 | .subtotal-line__value {
348 |     text-align: right
349 | }
350 | 
351 | .subtotal-line__title p {
352 |     line-height: 1.2em
353 | }
354 | 
355 | .subtotal-table--total {
356 |     border-top: 2px solid #e5e5e5
357 | }
358 | 
359 | .subtotal-table--total td {
360 |     padding: 20px 0 0
361 | }
362 | 
363 | .subtotal-table--total .subtotal-line__value strong {
364 |     font-size: 24px
365 | }
366 | 
367 | .subtotal-table--payment-methods {
368 |     border-top: 1px solid #e5e5e5
369 | }
370 | 
371 | .subtotal-table--payment-methods p, .subtotal-table--payment-methods strong {
372 |     color: #999;
373 |     font-size: 14px
374 | }
375 | 
376 | .subtotal-table__small-space {
377 |     height: 10px
378 | }
379 | 
380 | .subtotal-table__line {
381 |     border-bottom: 1px solid #e5e5e5;
382 |     height: 1px;
383 |     padding: 0
384 | }
385 | 
386 | .subtotal-spacer {
387 |     width: 40%
388 | }
389 | 
390 | @media (max-width: 600px) {
391 |     .subtotal-spacer {
392 |         display: none
393 |     }
394 | }
395 | 


--------------------------------------------------------------------------------
/src/snippets/order-summary.liquid:
--------------------------------------------------------------------------------
  1 | <table class="row section">
  2 |   <tr>
  3 |     <td class="section__cell">
  4 |       <center>
  5 |         <table class="container">
  6 |           <tr>
  7 |             <td>
  8 |               <h3>
  9 |                 {% if order_summary_title %}
 10 |                   {{ order_summary_title }}
 11 |                 {% else %}
 12 |                   Order summary
 13 |                 {% endif %}
 14 |               </h3>
 15 |             </td>
 16 |           </tr>
 17 |         </table>
 18 |         <table class="container">
 19 |           <tr>
 20 |             <td>
 21 |               <table class="row">
 22 |                 {% for line in line_items %}
 23 |                   {% if item_count == 1 %}
 24 |                     {% assign columnWrapperClass = 'order-list__item--single' %}
 25 |                   {% elsif forloop.first == true %}
 26 |                     {% assign columnWrapperClass = 'order-list__item--first' %}
 27 |                   {% elsif forloop.last == true %}
 28 |                     {% assign columnWrapperClass = 'order-list__item--last' %}
 29 |                   {% else %}
 30 |                     {% assign columnWrapperClass = '' %}
 31 |                   {% endif %}
 32 |                   <tr class="order-list__item {{columnWrapperClass}}">
 33 |                     <td class="order-list__item__cell">
 34 |                       <table>
 35 |                         <td>
 36 |                           {% if line.image %}
 37 |                             <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
 38 |                           {% endif %}
 39 |                         </td>
 40 |                         <td class="order-list__product-description-cell">
 41 |                           {% if line.product.title %}
 42 |                             {% assign line_title = line.product.title %}
 43 |                           {% else %}
 44 |                             {% assign line_title = line.title %}
 45 |                           {% endif %}
 46 |                           <span class="order-list__item-title">{{ line_title }} × {{ line.quantity }}</span><br/>
 47 |                           {% if line.variant.title != 'Default Title' %}
 48 |                             <span class="order-list__item-variant">{{ line.variant.title }}</span>
 49 |                           {% endif %}
 50 |                         </td>
 51 |                           <td class="order-list__price-cell">
 52 |                             {% if line.original_line_price != line.line_price %}
 53 |                               <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
 54 |                             {% endif %}
 55 |                             <p class="order-list__item-price">{{ line.line_price | money }}</p>
 56 |                           </td>
 57 |                       </table>
 58 |                     </td>
 59 |                   </tr>
 60 |                 {% endfor %}
 61 |               </table>
 62 |               <table class="row subtotal-lines">
 63 |                 <tr>
 64 |                   <td class="subtotal-spacer"></td>
 65 |                   <td>
 66 |                     <table class="row subtotal-table">
 67 |                       {% if discounts %}
 68 |                         {% capture discount_title %}Discount {% if discounts.first.code %}({{ discounts.first.code }}){% endif %}{% endcapture %}
 69 |                         <tr class="subtotal-line">
 70 |                           <td class="subtotal-line__title">
 71 |                             <p>
 72 |                               <span>{{ discount_title }}</span>
 73 |                             </p>
 74 |                           </td>
 75 |                           <td class="subtotal-line__value">
 76 |                             <strong>{{ discounts_savings | money }}</strong>
 77 |                           </td>
 78 |                         </tr>
 79 |                       {% endif %}
 80 |                       <tr class="subtotal-line">
 81 |                         <td class="subtotal-line__title">
 82 |                           <p>
 83 |                             <span>Subtotal</span>
 84 |                           </p>
 85 |                         </td>
 86 |                         <td class="subtotal-line__value">
 87 |                           <strong>{{ subtotal_price | money }}</strong>
 88 |                         </td>
 89 |                       </tr>
 90 |                       <tr class="subtotal-line">
 91 |                         <td class="subtotal-line__title">
 92 |                           <p>
 93 |                             <span>Shipping</span>
 94 |                           </p>
 95 |                         </td>
 96 |                         <td class="subtotal-line__value">
 97 |                           <strong>{{ shipping_price | money }}</strong>
 98 |                         </td>
 99 |                       </tr>
100 |                       {% for line in tax_lines %}
101 |                         <tr class="subtotal-line">
102 |                           <td class="subtotal-line__title">
103 |                             <p>
104 |                               <span>{{ line.title }}</span>
105 |                             </p>
106 |                           </td>
107 |                           <td class="subtotal-line__value">
108 |                             <strong>{{ line.price | money }}</strong>
109 |                           </td>
110 |                         </tr>
111 |                       {% endfor %}
112 |                     </table>
113 |                     <table class="row subtotal-table subtotal-table--total">
114 |                       <tr class="subtotal-line">
115 |                         <td class="subtotal-line__title">
116 |                           <p>
117 |                             <span>Total</span>
118 |                           </p>
119 |                         </td>
120 |                         <td class="subtotal-line__value">
121 |                           <strong>{{ total_price | money_with_currency }}</strong>
122 |                         </td>
123 |                       </tr>
124 |                     </table>
125 |                     {% assign transaction_size = 0 %}
126 |                     {% for transaction in transactions %}
127 |                       {% unless transaction.kind == "capture" or transaction.kind == "void" %}
128 |                         {% assign transaction_size = transaction_size | plus: 1 %}
129 |                       {% endunless %}
130 |                     {% endfor %}
131 |                     {% if transaction_size > 1 %}
132 |                       <table class="row subtotal-table">
133 |                         <tr><td colspan="2" class="subtotal-table__line"></td></tr>
134 |                         <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
135 | 
136 |                         {% for transaction in transactions %}
137 |                           {% if (transaction.status == "success") and (transaction.kind == "authorization" or transaction.kind == "sale") %}
138 |                             {% if transaction.payment_details.credit_card_company %}
139 |                               {% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
140 |                             {% else %}
141 |                               {% capture transaction_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
142 |                             {% endif %}
143 |                             <tr class="subtotal-line">
144 |                               <td class="subtotal-line__title">
145 |                                 <p>
146 |                                   <span>{{transaction_name}}</span>
147 |                                 </p>
148 |                               </td>
149 |                               <td class="subtotal-line__value">
150 |                                 <strong>{{ transaction.amount | money }}</strong>
151 |                               </td>
152 |                             </tr>
153 |                           {% endif %}
154 |                           {% if transaction.kind == 'refund' %}
155 |                             {% if transaction.payment_details.credit_card_company %}
156 |                               {% assign refund_method_title = transaction.payment_details.credit_card_company %}
157 |                             {% else %}
158 |                               {% assign refund_method_title = transaction.gateway %}
159 |                             {% endif %}
160 |                             <tr class="subtotal-line">
161 |                               <td class="subtotal-line__title">
162 |                                 <p>
163 |                                   <span>Refund</span>
164 |                                     <br>
165 |                                     <small>{{ refund_method_title | capitalize }}</small>
166 |                                 </p>
167 |                               </td>
168 |                               <td class="subtotal-line__value">
169 |                                 <strong>- {{ transaction.amount | money }}</strong>
170 |                               </td>
171 |                             </tr>
172 |                           {% endif %}
173 |                         {% endfor %}
174 |                       </table>
175 |                     {% endif %}
176 |                   </td>
177 |                 </tr>
178 |               </table>
179 |             </td>
180 |           </tr>
181 |         </table>
182 |       </center>
183 |     </td>
184 |   </tr>
185 | </table>
186 | 


--------------------------------------------------------------------------------