Product URL in draft order and order confirmation emails

Franrulzok · ‎11-14-2024

Hi, my draft order emails and order confirmation emails don't include the product URL so the customer can navigate back to the website and look at the products in greater detail. Is this something that can be added easily? Chat GPT spat out some code for me but it's not clear where it should go. Thanks!

whyshop · ‎11-18-2024

Below are the complete "order confirmation" and "draft order invoice" email templates with hyperlinks to the product on both the product image and name

1、order confirmation

{% capture email_title %}
  {% if has_pending_payment %}
    Thank you for your order!
  {% else %}
    Thank you for your purchase!
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if has_pending_payment %}
    {% if buyer_action_required %}
      You’ll get a confirmation email after completing your payment.
    {% else %}
      Your payment is being processed. You'll get an email when your order is confirmed.
    {% endif %}
  {% else %}
    {% 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 %}
          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 %}
        {% if has_multiple_delivery_methods %}
          <h3 class="estimated_delivery__title">Estimated delivery</h3>
          <p>{{ consolidated_estimated_delivery_time }}</p>
        {% else %}
          <p>
            Estimated delivery <b>{{ consolidated_estimated_delivery_time }}</b>
          </p>
        {% endif %}
       {% endif %}
    {% endif %}
  {% endif %}
  {% assign gift_card_line_items = line_items | where: "gift_card" %}
  {% assign found_gift_card_with_recipient_email = false %}
  {% for line_item in gift_card_line_items %}
    {% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
      {% assign found_gift_card_with_recipient_email = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_gift_card_with_recipient_email %}
    <p>Your gift card recipient will receive an email with their gift card code.</p>
  {% elsif gift_card_line_items.first %}
    <p>You’ll receive separate emails for any gift cards.</p>
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td>
                      <table class="order-po-number__container">
                        <tr>
                          <td class="order-number__cell">
                            <span class="order-number__text">
                              Order {{ order_name }}
                            </span>
                          </td>
                        </tr>
                        {%- if po_number %}
                            <tr>
                              <td class="po-number__cell">
                                <span class="po-number__text">
                                  PO number #{{ po_number }}
                                </span>
                              </td>
                            </tr>
                        {%- endif %}
                      </table>
                    </td>
                </tr>
              </table>

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

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

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% assign transaction_count = transactions | size %}
  {% if transaction_count > 0 %}
    {% for transaction in transactions %}
      {% if transaction.show_buyer_pending_payment_instructions? %}
        <p> {{transaction.buyer_pending_payment_notice}} </p>
        <p>
        <table class="row">
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.header }}</td>
            {% endfor %}
            <td>Amount</td>
          </tr>
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.value }}</td>
            {% endfor %}
            <td>{{transaction.amount | money}}</td>
          </tr>
        </table>
        </p>
      {% endif %}
    {% endfor%}
  {% endif %}

            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}

            {% endif %}

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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Order summary</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
  <table class="row">
    {% for line in subtotal_line_items %}
      
<tr class="order-list__item">
  <td class="order-list__item__cell">
    <table>
        {% assign expand_bundles = false %}

      {% if expand_bundles and line.bundle_parent? %}
        <td class="order-list__parent-image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">
            {% if line.image %}
              <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {% else %}
              <div class="order-list__no-image-cell">
                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
              </div>
          </a>
          {% endif %}
        </td>
      {% else %}
        <td class="order-list__image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">

          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
        </a>
        </td>
      {% endif %}
      <td class="order-list__product-description-cell">
        <a href="{{ shop.url }}{{ line.url }}" target="_blank">

        {% 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 %}

        <span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

        {% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% endif %}

        {% if expand_bundles %}
          {% for component in line.bundle_components %}
            <table>
              <tr class="order-list__item">
                <td class="order-list__bundle-item">
                  <table>
                    <td class="order-list__image-cell">
                      {% if component.image %}
                        <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% elsif component.image_url %}
                        <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% else %}
                        <div class="order-list__no-image-cell small">
                          <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                        </div>
                      {% endif %}
                    </td>

                    <td class="order-list__product-description-cell">
                      <a href="{{ shop.url }}{{ line.url }}" target="_blank">

                      {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                      {% else %}
                        {% assign component_title = component.title %}
                      {% endif %}

                      {% assign component_display = component.quantity %}

                      <span class="order-list__item-title">{{ component_title }}&nbsp;&times;&nbsp;{{ component_display }}</span><br>

                      {% if component.variant.title != 'Default Title'%}
                        <span class="order-list__item-variant">{{ component.variant.title }}</span>
                      {% endif %}
                      </a>
                    </td>
                  </table>
                </td>
              </tr>
            </table>
          {% endfor %}
        {% else %}
          {% for group in line.groups %}
            <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
          {% endfor %}
        {% endif %}

          {% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
            {% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <div class="order-list__item-property">
      <dt>{{ property.first }}:</dt>
      <dd>
      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}" class="link" target="_blank">
        {{ property.last | split: '/' | last }}
        </a>
      {% else %}
        {{ property.last }}
      {% endif %}
      </dd>
    </div>
  {% endif %}
{% endfor %}

          {% endif %}

        {% if line.selling_plan_allocation %}
          <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
        {% endif %}

        {% if line.refunded_quantity > 0 %}
          <span class="order-list__item-refunded">Refunded</span>
        {% endif %}

        {% if line.discount_allocations %}
          {% for discount_allocation in line.discount_allocations %}
            {% if discount_allocation.discount_application.target_selection != 'all' %}
            <p>
              <span class="order-list__item-discount-allocation">
                <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                <span>
                  {{ discount_allocation.discount_application.title | upcase }}
                  (-{{ discount_allocation.amount | money }})
                </span>
              </span>
            </p>
            {% endif %}
          {% endfor %}
        {% endif %}
        </a>
      </td>
        {% if expand_bundles and line.bundle_parent? %}
          <td class="order-list__parent-price-cell">
        {% else %}
          <td class="order-list__price-cell">
        {% endif %}
        {% if line.original_line_price != line.final_line_price %}
          <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
        {% endif %}
          <p class="order-list__item-price">
            {% if line.final_line_price > 0 %}
              {{ line.final_line_price | money }}
            {% else %}
              Free
            {% endif %}
          </p>
        </td>
    </table>
  </td>
</tr>

    {% endfor %}
  </table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">

        
{% assign total_order_discount_amount = 0 %}
{% assign has_shipping_discount = false %}
{% assign epsilon = 0.00001 %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount %}
  {% endif %}
  {% if discount_application.target_type == 'shipping_line' %}
    {% assign has_shipping_discount = true %}
    {% assign shipping_discount_title = discount_application.title %}
    {% if discount_application.total_allocated_amount == 0 %}
      {% assign discount_value_price = discount_application.value | times: 100 %}
    {% else %}
      {% assign discount_value_price = discount_application.total_allocated_amount %}
    {% endif %}
    {% assign shipping_amount_minus_discount_value_price = shipping_price | minus: discount_value_price %}
    {% assign shipping_amount_minus_discount_value_price_abs = shipping_amount_minus_discount_value_price | abs %}
    {% assign discount_application_value_type = discount_application.value_type | strip %}
    {% if shipping_amount_minus_discount_value_price_abs < epsilon or discount_application_value_type == 'percentage' and discount_application.value == 100 %}
      {% assign free_shipping = true %}
    {% else %}
      {% assign discounted_shipping_price = shipping_amount_minus_discount_value_price %}
    {% endif %}
  {% endif %}
{% endfor %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Subtotal</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | plus: total_order_discount_amount | money }}</strong>
  </td>
</tr>



{% if order_discount_count > 0 %}
  {% if order_discount_count == 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discount</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% if order_discount_count > 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discounts</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

    {% endif %}
  {% endfor %}
{% endif %}


        {% unless retail_delivery_only %}
          {% if delivery_method == 'pick-up' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Pickup</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

          {% else %}
            {% if has_shipping_discount %}
  {% if free_shipping == true %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money}} </del>
      <strong>Free</strong>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money }} </del>
      <strong>{{ discounted_shipping_price | money }}</strong>
  </td>
</tr>

  {% endif %}
  <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount_title }} (-{{ discount_value_price | money }})</span>
      </span>
    </p>
  </td>
</tr>

{% else %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

{% endif %}

          {% endif %}
        {% endunless %}

        {% if total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Taxes</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>

      {% assign transaction_size = 0 %}
      {% assign transaction_amount = 0 %}
      {% assign net_transaction_amount_rounding = 0 %}
      {% for transaction in transactions %}
        {% if transaction.status == "success" %}
          {% if transaction.kind == "sale" or transaction.kind == "capture"  %}
              {% assign transaction_size = transaction_size | plus: 1 %}
              {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
              {% if transaction.amount_rounding != nil %}
                {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | plus: transaction.amount_rounding %}
              {% endif %}
          {% elsif transaction.kind == "refund" or transaction.kind == "change" %}
            {% assign transaction_size = transaction_size | plus: 1 %}
            {% assign transaction_amount = transaction_amount | minus: transaction.amount %}
            {% if transaction.amount_rounding != nil %}
              {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | minus: transaction.amount_rounding %}
            {% endif %}
          {% endif %}
        {% endif %}
      {% endfor %}

      <table class="row subtotal-table subtotal-table--total">
      {% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b?  %}
        {% assign next_payment = payment_terms.next_payment %}
        {% assign due_at_date = next_payment.due_at | date: "%b %d, %Y" %}
        {% if net_transaction_amount_rounding != 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
        {% endif %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

        <div class="payment-terms">
          {% assign next_amount_due = total_price %}
          {% if next_payment %}
            {% assign next_amount_due = next_payment.amount_due %}
          {% endif %}

          {% if payment_terms.type == 'receipt' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on receipt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% elsif payment_terms.type == 'fulfillment' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on fulfillment</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% else %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due {{ due_at_date }}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        </div>
      {% else %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

        {% if net_transaction_amount_rounding != 0 %}
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          {% if financial_status == 'paid' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Paid</span>
        <br>
        <small>{{ gateway | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        {% endif %}
        {% if transaction_amount != total_price and payment_terms == nil%}
          <div class="payment-terms">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          </div>
        {% endif %}
      {% endif %}
      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
        </p>
      {% endif %}

      {% unless payment_terms %}
      {% if transaction_size > 1 or transaction_amount < total_price %}
        <table class="row subtotal-table">
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

          {% for transaction in transactions %}
            {% assign amount_rounding = 0 %}
            {% if transaction.amount_rounding != 0 %}
              {% assign amount_rounding =  transaction.amount_rounding %}
            {% endif %}
            {% if transaction.status == "success" and transaction.kind == "capture" or transaction.kind == "sale" %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% capture transaction_name %}Gift card (ending with {{ transaction.payment_details.gift_card_last_four_digits }}){% endcapture %}
              {% elsif 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 class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
            {% if transaction.kind == 'refund' %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% assign refund_method_title = transaction.payment_details.type %}
              {% elsif transaction.payment_details.credit_card_company %}
                {% assign refund_method_title = transaction.payment_details.credit_card_company %}
              {% else %}
                {% assign refund_method_title = transaction.gateway_display_name %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Refund</span>
        <br>
        <small>{{ refund_method_title | replace: '_', ' ' | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>- {{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
          {% endfor %}
        </table>
      {% endif %}


      {% endunless %}
    </td>
  </tr>
</table>


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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Customer information</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                  <td class="customer-info__item">
                    <h4>Shipping address</h4>
                    {{ shipping_address | format_address }}
                  </td>
                {% endif %}
                {% if billing_address %}
                  <td class="customer-info__item">
                    <h4>Billing address</h4>
                    {{ billing_address | format_address }}
                  </td>
                {% endif %}
              </tr>
            </table>
            <table class="row">
              <tr>
                {% if company_location %}
                  <td class="customer-info__item">
                    <h4>Location</h4>
                    <p>
                      {{ company_location.name }}
                    </p>
                  </td>
                {% endif %}
                {% if transaction_size > 0 or payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b? %}
                  <td class="customer-info__item">
                    <h4>Payment</h4>
                    <p class="customer-info__item-content">
                      {% if payment_terms %}
                        {% assign due_date = payment_terms.next_payment.due_at | default: nil %}
                        {% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil %}
                          {{ payment_terms.translated_name }}<br>
                        {% else %}
                          {{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}<br>
                        {% endif %}
                      {% endif %}
                      {% if transaction_size > 0 %}
                        {% for transaction in transactions %}
                          {% if transaction.status == "success" or transaction.status == "pending" %}
                            {% if transaction.kind == "capture" or transaction.kind == "sale" %}
                              {% if transaction.payment_details.gift_card_last_four_digits %}
                                <img src="{{ transaction.payment_details.type | downcase | replace: '_', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card_last_four_digits }}<br>
                              {% elsif transaction.payment_details.credit_card_company %}
                                <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                                <span>ending with {{ transaction.payment_details.credit_card_last_four_digits }}</span><br>
                              {% elsif transaction.gateway_display_name == "Gift card" %}
                                <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>
                                  &emsp;&emsp;&emsp;&nbsp;Gift card balance - <b>{{ transaction.payment_details.gift_card.balance |  money }}</b>
                              {% elsif transaction.gateway_display_name != "Shop Cash" %}
                                {{ transaction.gateway_display_name }}<br>
                              {% endif %}
                            {% elsif transaction.kind == "authorization" and transaction.gateway_display_name == "Shop Cash" %}
                              <span>Shop Cash</span><br>                              
                            {% endif %}
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    </p>
                  </td>
                {% endif %}
              </tr>
              <tr>
                {% if requires_shipping and shipping_address %}
                  {% if shipping_method %}
                    <td class="customer-info__item">
                      <h4>Shipping method</h4>
                        <p>
                          {% if delivery_promise_branded_shipping_line %}
                            {{ delivery_promise_branded_shipping_line }}
                          {% else %}
                            {{ shipping_method.title }}
                          {% endif %}
                        </p>
                    </td>
                  {% endif %}
                {% endif %}
              </tr>
            </table>

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

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <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>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

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

{%- if billing_address.country_code == 'DE' or billing_address.country_code == 'DK' -%}
  {%- if shop.terms_of_service.body != blank -%}
    {{ shop.terms_of_service | attach_as_pdf: "Terms of service" }}
  {%- endif -%}

  {%- if shop.refund_policy.body != blank -%}
    {{ shop.refund_policy | attach_as_pdf: "Refund policy" }}
  {%- endif -%}
{%- endif -%}

2、draft order invoice

{% capture email_title %}
  {% if payment_terms %}
    Review and confirm to complete your order
  {% else %}
    Complete your purchase
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if item_count > 1 %}
    These items will be reserved for you until {{ reserve_inventory_until | date: format: 'date_at_time' }}.
  {% else %}
    This item will be reserved for you until {{ reserve_inventory_until | date: format: 'date_at_time' }}.
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td>
                      <table class="order-po-number__container">
                        <tr>
                          <td class="order-number__cell">
                            <span class="order-number__text">
                              Invoice {{ name }}
                            </span>
                          </td>
                        </tr>
                        {%- if po_number %}
                            <tr>
                              <td class="po-number__cell">
                                <span class="po-number__text">
                                  PO number #{{ po_number }}
                                </span>
                              </td>
                            </tr>
                        {%- endif %}
                      </table>
                    </td>
                </tr>
              </table>

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

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

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            {% if custom_message != blank %}
              <p>{{ custom_message }}</p>
            {% elsif reserve_inventory_until %}
              <p>{{ email_body }}</p>
            {% endif %}
            {% if payment_terms %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ invoice_url }}" class="button__text">Confirm order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% else %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ invoice_url }}" class="button__text">Complete your purchase</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% endif %}

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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Order summary</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
  <table class="row">
    {% for line in subtotal_line_items %}
      
<tr class="order-list__item">
  <td class="order-list__item__cell">
    <table>
        {% assign expand_bundles = true %}

      {% if expand_bundles and line.bundle_parent? %}
        <td class="order-list__parent-image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
          </a>
        </td>
      {% else %}
        <td class="order-list__image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">

          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
        </a>
        </td>
      {% endif %}
      <td class="order-list__product-description-cell">
        <a href="{{ shop.url }}{{ line.url }}" target="_blank">

        {% 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 %}

        <span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

        {% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% endif %}

        {% if expand_bundles %}
          {% for component in line.bundle_components %}
            <table>
              <tr class="order-list__item">
                <td class="order-list__bundle-item">
                  <table>
                    <td class="order-list__image-cell">
                      {% if component.image %}
                        <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% elsif component.image_url %}
                        <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% else %}
                        <div class="order-list__no-image-cell small">
                          <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                        </div>
                      {% endif %}
                    </td>

                    <td class="order-list__product-description-cell">
                      <a href="{{ shop.url }}{{ line.url }}" target="_blank">
                      {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                      {% else %}
                        {% assign component_title = component.title %}
                      {% endif %}

                      {% assign component_display = component.quantity %}

                      <span class="order-list__item-title">{{ component_title }}&nbsp;&times;&nbsp;{{ component_display }}</span><br>

                      {% if component.variant.title != 'Default Title'%}
                        <span class="order-list__item-variant">{{ component.variant.title }}</span>
                      {% endif %}
                      </a>
                    </td>
                  </table>
                </td>
              </tr>
            </table>
          {% endfor %}
        {% else %}
          {% for group in line.groups %}
            <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
          {% endfor %}
        {% endif %}

          {% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
            {% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <div class="order-list__item-property">
      <dt>{{ property.first }}:</dt>
      <dd>
      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}" class="link" target="_blank">
        {{ property.last | split: '/' | last }}
        </a>
      {% else %}
        {{ property.last }}
      {% endif %}
      </dd>
    </div>
  {% endif %}
{% endfor %}

          {% endif %}

        {% if line.selling_plan_allocation %}
          <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
        {% endif %}

        {% if line.refunded_quantity > 0 %}
          <span class="order-list__item-refunded">Refunded</span>
        {% endif %}

        {% if line.discount_allocations %}
          {% for discount_allocation in line.discount_allocations %}
            {% if discount_allocation.discount_application.target_selection != 'all' %}
            <p>
              <span class="order-list__item-discount-allocation">
                <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                <span>
                  {{ discount_allocation.discount_application.title | upcase }}
                  (-{{ discount_allocation.amount | money }})
                </span>
              </span>
            </p>
            {% endif %}
          {% endfor %}
        {% endif %}
          </a>
      </td>
        {% if expand_bundles and line.bundle_parent? %}
          <td class="order-list__parent-price-cell">
        {% else %}
          <td class="order-list__price-cell">
        {% endif %}
        {% if line.original_line_price != line.final_line_price %}
          <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
        {% endif %}
          <p class="order-list__item-price">
            {% if line.final_line_price > 0 %}
              {{ line.final_line_price | money }}
            {% else %}
              Free
            {% endif %}
          </p>
        </td>
    </table>
  </td>
</tr>

    {% endfor %}
  </table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">

        
{% assign order_discount_count = 0 %}
{% assign total_order_discount_amount = 0 %}
{% assign subtotal_order_amount = 0 %}
{% assign has_shipping_discount = false %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount  %}
    {% assign subtotal_order_amount = subtotal_order_amount | plus: discount_application.total_allocated_amount  %}
  {% endif %}
  {% if discount_application.target_type == 'shipping_line' %}
    {% assign has_shipping_discount = true %}
    {% assign shipping_discount = discount_application.title %}
    {% assign shipping_amount = discount_application.total_allocated_amount %}
    {% assign subtotal_order_amount = subtotal_order_amount | plus: discount_application.total_allocated_amount  %}
    {% assign discounted_shipping_price = shipping_price | minus: shipping_amount %}
  {% endif %}
{% endfor %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Subtotal</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | plus: subtotal_order_amount | money }}</strong>
  </td>
</tr>



{% if order_discount_count > 0 %}
  {% if order_discount_count == 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discount</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discounts</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

    {% endif %}
  {% endfor %}
{% endif %}


        {% if delivery_method == 'pick-up' %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Pickup</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

        {% else %}
          {% if has_shipping_discount %}
  {% if discounted_shipping_price > 0 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ discounted_shipping_price | money }}</strong>
  </td>
</tr>

    <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount }} (-{{ shipping_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>Free</strong>
  </td>
</tr>

    <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount }} (-{{ shipping_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

  {% endif %}
{% else %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

{% endif %}

        {% endif %}

        {% if total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Estimated taxes</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>

      <table class="row subtotal-table subtotal-table--total">
      {% if payment_terms %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ amount_due_now | money_with_currency }}</strong>
  </td>
</tr>

        <div class="payment-terms">
          {% assign next_payment = payment_terms.next_payment %}
          {% assign due_at_date = next_payment.due_at | date: format: 'date' %}
          {% assign next_amount_due = total_price | minus: amount_due_now %}

          {% if payment_terms.type == 'receipt' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on receipt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% elsif payment_terms.type == 'fulfillment' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on fulfillment</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% else %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due {{ due_at_date }}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        </div>
      {% else %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

      {% endif %}
      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
        </p>
      {% endif %}

      {% unless payment_terms %}


      {% endunless %}
    </td>
  </tr>
</table>


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

          {% if shipping_address or billing_address or shipping_method or company_location or payment_terms %}
            <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Customer information</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
              <table class="row">
                <tr>
                  {% if shipping_address %}
                    <td class="customer-info__item">
                      <h4>Shipping address</h4>
                      {{ shipping_address | format_address }}
                    </td>
                  {% endif %}

                  {% if billing_address %}
                    <td class="customer-info__item">
                      <h4>Billing address</h4>
                      {{ billing_address | format_address }}
                    </td>
                  {% endif %}
                </tr>
              </table>
              {% if shipping_method or company_location or payment_terms %}
                <table class="row">
                  <tr>
                    {% if company_location %}
                      <td class="customer-info__item">
                        <h4>Location</h4>
                        <p>
                          {{ company_location.name }}
                        </p>
                      </td>
                    {% endif %}

                    {% if payment_terms %}
                      <td class="customer-info__item">
                        <h4>Payment</h4>
                        {% assign due_date = payment_terms.next_payment.due_at | default: nil %}
                        {% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' %}
                          <p>{{ payment_terms.translated_name }}</p>
                        {% else %}
                          <p>{{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}</p>
                        {% endif %}
                      </td>
                    {% endif %}
                  </tr>
                  <tr>
                    {% if shipping_method %}
                      <td class="customer-info__item customer-info__item--last">
                        <h4>Shipping method</h4>
                        {% if local_pickup %}
                          <p>Local pickup - {{ shipping_method.title }}</p>
                          {% if local_pickup_address %}
                            {{ local_pickup_address | format_address }}
                          {% endif %}
                        {% else %}
                          <p>{{ shipping_method.title }}<br/>{{ shipping_method.price | money }}</p>
                        {% endif %}
                      </td>
                      <td class="customer-info__item customer-info__item--last">
                      </td>
                    {% endif %}
                  </tr>
                </table>
              {% endif %}

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
          {% endif %}

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <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>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

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

Need a Shopify Specialist? Chat on WhatsApp ✅
Contact iwhyshop@gmail.com for the solutions you need
Problem Solved? ✔Accept and Like solutions to help future merchants
Follow me on Facebook iwhyshop, Susbcribe to my YouTube iwhyshop.Author of app"Ws Instant Bulk Editor"-Batch edit prices instantly without complicated tasks

View solution in original post

whyshop · ‎11-14-2024

Add a link to the line product image by using the a tag, then they can click the image navigate back to the product detail page.

{{ shop.url }}{{ line.url }} is the full link of the line item's variant.

This is a complete order confirmation email template modified from the official default template.You can modify your email template according to this.

If you have not modified the default template, you can paste it directly. Remember to back up your original template first.Feel free to let me know if you want me to help you out.

Order confirmation email template（added product link to the line item）

{% capture email_title %}
  {% if has_pending_payment %}
    Thank you for your order!
  {% else %}
    Thank you for your purchase!
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if has_pending_payment %}
    {% if buyer_action_required %}
      You’ll get a confirmation email after completing your payment.
    {% else %}
      Your payment is being processed. You'll get an email when your order is confirmed.
    {% endif %}
  {% else %}
    {% 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 %}
          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 %}
        {% if has_multiple_delivery_methods %}
          <h3 class="estimated_delivery__title">Estimated delivery</h3>
          <p>{{ consolidated_estimated_delivery_time }}</p>
        {% else %}
          <p>
            Estimated delivery <b>{{ consolidated_estimated_delivery_time }}</b>
          </p>
        {% endif %}
       {% endif %}
    {% endif %}
  {% endif %}
  {% assign gift_card_line_items = line_items | where: "gift_card" %}
  {% assign found_gift_card_with_recipient_email = false %}
  {% for line_item in gift_card_line_items %}
    {% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
      {% assign found_gift_card_with_recipient_email = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_gift_card_with_recipient_email %}
    <p>Your gift card recipient will receive an email with their gift card code.</p>
  {% elsif gift_card_line_items.first %}
    <p>You’ll receive separate emails for any gift cards.</p>
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td>
                      <table class="order-po-number__container">
                        <tr>
                          <td class="order-number__cell">
                            <span class="order-number__text">
                              Order {{ order_name }}
                            </span>
                          </td>
                        </tr>
                        {%- if po_number %}
                            <tr>
                              <td class="po-number__cell">
                                <span class="po-number__text">
                                  PO number #{{ po_number }}
                                </span>
                              </td>
                            </tr>
                        {%- endif %}
                      </table>
                    </td>
                </tr>
              </table>

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

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

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% assign transaction_count = transactions | size %}
  {% if transaction_count > 0 %}
    {% for transaction in transactions %}
      {% if transaction.show_buyer_pending_payment_instructions? %}
        <p> {{transaction.buyer_pending_payment_notice}} </p>
        <p>
        <table class="row">
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.header }}</td>
            {% endfor %}
            <td>Amount</td>
          </tr>
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.value }}</td>
            {% endfor %}
            <td>{{transaction.amount | money}}</td>
          </tr>
        </table>
        </p>
      {% endif %}
    {% endfor%}
  {% endif %}

            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}

            {% endif %}

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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Order summary</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
  <table class="row">
    {% for line in subtotal_line_items %}
      
<tr class="order-list__item">
  <td class="order-list__item__cell">
    <table>
        {% assign expand_bundles = false %}

      {% if expand_bundles and line.bundle_parent? %}
        <td class="order-list__parent-image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">
            {% if line.image %}
              <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {% else %}
              <div class="order-list__no-image-cell">
                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
              </div>
          </a>
          {% endif %}
        </td>
      {% else %}
        <td class="order-list__image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">

          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
        </a>
        </td>
      {% endif %}
      <td class="order-list__product-description-cell">
        {% 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 %}

        <span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

        {% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% endif %}

        {% if expand_bundles %}
          {% for component in line.bundle_components %}
            <table>
              <tr class="order-list__item">
                <td class="order-list__bundle-item">
                  <table>
                    <td class="order-list__image-cell">
                      {% if component.image %}
                        <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% elsif component.image_url %}
                        <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% else %}
                        <div class="order-list__no-image-cell small">
                          <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                        </div>
                      {% endif %}
                    </td>

                    <td class="order-list__product-description-cell">
                      {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                      {% else %}
                        {% assign component_title = component.title %}
                      {% endif %}

                      {% assign component_display = component.quantity %}

                      <span class="order-list__item-title">{{ component_title }}&nbsp;&times;&nbsp;{{ component_display }}</span><br>

                      {% if component.variant.title != 'Default Title'%}
                        <span class="order-list__item-variant">{{ component.variant.title }}</span>
                      {% endif %}
                    </td>
                  </table>
                </td>
              </tr>
            </table>
          {% endfor %}
        {% else %}
          {% for group in line.groups %}
            <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
          {% endfor %}
        {% endif %}

          {% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
            {% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <div class="order-list__item-property">
      <dt>{{ property.first }}:</dt>
      <dd>
      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}" class="link" target="_blank">
        {{ property.last | split: '/' | last }}
        </a>
      {% else %}
        {{ property.last }}
      {% endif %}
      </dd>
    </div>
  {% endif %}
{% endfor %}

          {% endif %}

        {% if line.selling_plan_allocation %}
          <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
        {% endif %}

        {% if line.refunded_quantity > 0 %}
          <span class="order-list__item-refunded">Refunded</span>
        {% endif %}

        {% if line.discount_allocations %}
          {% for discount_allocation in line.discount_allocations %}
            {% if discount_allocation.discount_application.target_selection != 'all' %}
            <p>
              <span class="order-list__item-discount-allocation">
                <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                <span>
                  {{ discount_allocation.discount_application.title | upcase }}
                  (-{{ discount_allocation.amount | money }})
                </span>
              </span>
            </p>
            {% endif %}
          {% endfor %}
        {% endif %}
      </td>
        {% if expand_bundles and line.bundle_parent? %}
          <td class="order-list__parent-price-cell">
        {% else %}
          <td class="order-list__price-cell">
        {% endif %}
        {% if line.original_line_price != line.final_line_price %}
          <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
        {% endif %}
          <p class="order-list__item-price">
            {% if line.final_line_price > 0 %}
              {{ line.final_line_price | money }}
            {% else %}
              Free
            {% endif %}
          </p>
        </td>
    </table>
  </td>
</tr>

    {% endfor %}
  </table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">

        
{% assign total_order_discount_amount = 0 %}
{% assign has_shipping_discount = false %}
{% assign epsilon = 0.00001 %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount %}
  {% endif %}
  {% if discount_application.target_type == 'shipping_line' %}
    {% assign has_shipping_discount = true %}
    {% assign shipping_discount_title = discount_application.title %}
    {% if discount_application.total_allocated_amount == 0 %}
      {% assign discount_value_price = discount_application.value | times: 100 %}
    {% else %}
      {% assign discount_value_price = discount_application.total_allocated_amount %}
    {% endif %}
    {% assign shipping_amount_minus_discount_value_price = shipping_price | minus: discount_value_price %}
    {% assign shipping_amount_minus_discount_value_price_abs = shipping_amount_minus_discount_value_price | abs %}
    {% assign discount_application_value_type = discount_application.value_type | strip %}
    {% if shipping_amount_minus_discount_value_price_abs < epsilon or discount_application_value_type == 'percentage' and discount_application.value == 100 %}
      {% assign free_shipping = true %}
    {% else %}
      {% assign discounted_shipping_price = shipping_amount_minus_discount_value_price %}
    {% endif %}
  {% endif %}
{% endfor %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Subtotal</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | plus: total_order_discount_amount | money }}</strong>
  </td>
</tr>



{% if order_discount_count > 0 %}
  {% if order_discount_count == 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discount</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% if order_discount_count > 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discounts</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

    {% endif %}
  {% endfor %}
{% endif %}


        {% unless retail_delivery_only %}
          {% if delivery_method == 'pick-up' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Pickup</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

          {% else %}
            {% if has_shipping_discount %}
  {% if free_shipping == true %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money}} </del>
      <strong>Free</strong>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money }} </del>
      <strong>{{ discounted_shipping_price | money }}</strong>
  </td>
</tr>

  {% endif %}
  <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount_title }} (-{{ discount_value_price | money }})</span>
      </span>
    </p>
  </td>
</tr>

{% else %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

{% endif %}

          {% endif %}
        {% endunless %}

        {% if total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Taxes</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>

      {% assign transaction_size = 0 %}
      {% assign transaction_amount = 0 %}
      {% assign net_transaction_amount_rounding = 0 %}
      {% for transaction in transactions %}
        {% if transaction.status == "success" %}
          {% if transaction.kind == "sale" or transaction.kind == "capture"  %}
              {% assign transaction_size = transaction_size | plus: 1 %}
              {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
              {% if transaction.amount_rounding != nil %}
                {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | plus: transaction.amount_rounding %}
              {% endif %}
          {% elsif transaction.kind == "refund" or transaction.kind == "change" %}
            {% assign transaction_size = transaction_size | plus: 1 %}
            {% assign transaction_amount = transaction_amount | minus: transaction.amount %}
            {% if transaction.amount_rounding != nil %}
              {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | minus: transaction.amount_rounding %}
            {% endif %}
          {% endif %}
        {% endif %}
      {% endfor %}

      <table class="row subtotal-table subtotal-table--total">
      {% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b?  %}
        {% assign next_payment = payment_terms.next_payment %}
        {% assign due_at_date = next_payment.due_at | date: "%b %d, %Y" %}
        {% if net_transaction_amount_rounding != 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
        {% endif %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

        <div class="payment-terms">
          {% assign next_amount_due = total_price %}
          {% if next_payment %}
            {% assign next_amount_due = next_payment.amount_due %}
          {% endif %}

          {% if payment_terms.type == 'receipt' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on receipt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% elsif payment_terms.type == 'fulfillment' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on fulfillment</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% else %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due {{ due_at_date }}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        </div>
      {% else %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

        {% if net_transaction_amount_rounding != 0 %}
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          {% if financial_status == 'paid' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Paid</span>
        <br>
        <small>{{ gateway | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        {% endif %}
        {% if transaction_amount != total_price and payment_terms == nil%}
          <div class="payment-terms">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          </div>
        {% endif %}
      {% endif %}
      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
        </p>
      {% endif %}

      {% unless payment_terms %}
      {% if transaction_size > 1 or transaction_amount < total_price %}
        <table class="row subtotal-table">
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

          {% for transaction in transactions %}
            {% assign amount_rounding = 0 %}
            {% if transaction.amount_rounding != 0 %}
              {% assign amount_rounding =  transaction.amount_rounding %}
            {% endif %}
            {% if transaction.status == "success" and transaction.kind == "capture" or transaction.kind == "sale" %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% capture transaction_name %}Gift card (ending with {{ transaction.payment_details.gift_card_last_four_digits }}){% endcapture %}
              {% elsif 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 class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
            {% if transaction.kind == 'refund' %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% assign refund_method_title = transaction.payment_details.type %}
              {% elsif transaction.payment_details.credit_card_company %}
                {% assign refund_method_title = transaction.payment_details.credit_card_company %}
              {% else %}
                {% assign refund_method_title = transaction.gateway_display_name %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Refund</span>
        <br>
        <small>{{ refund_method_title | replace: '_', ' ' | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>- {{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
          {% endfor %}
        </table>
      {% endif %}


      {% endunless %}
    </td>
  </tr>
</table>


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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Customer information</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                  <td class="customer-info__item">
                    <h4>Shipping address</h4>
                    {{ shipping_address | format_address }}
                  </td>
                {% endif %}
                {% if billing_address %}
                  <td class="customer-info__item">
                    <h4>Billing address</h4>
                    {{ billing_address | format_address }}
                  </td>
                {% endif %}
              </tr>
            </table>
            <table class="row">
              <tr>
                {% if company_location %}
                  <td class="customer-info__item">
                    <h4>Location</h4>
                    <p>
                      {{ company_location.name }}
                    </p>
                  </td>
                {% endif %}
                {% if transaction_size > 0 or payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b? %}
                  <td class="customer-info__item">
                    <h4>Payment</h4>
                    <p class="customer-info__item-content">
                      {% if payment_terms %}
                        {% assign due_date = payment_terms.next_payment.due_at | default: nil %}
                        {% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil %}
                          {{ payment_terms.translated_name }}<br>
                        {% else %}
                          {{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}<br>
                        {% endif %}
                      {% endif %}
                      {% if transaction_size > 0 %}
                        {% for transaction in transactions %}
                          {% if transaction.status == "success" or transaction.status == "pending" %}
                            {% if transaction.kind == "capture" or transaction.kind == "sale" %}
                              {% if transaction.payment_details.gift_card_last_four_digits %}
                                <img src="{{ transaction.payment_details.type | downcase | replace: '_', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card_last_four_digits }}<br>
                              {% elsif transaction.payment_details.credit_card_company %}
                                <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                                <span>ending with {{ transaction.payment_details.credit_card_last_four_digits }}</span><br>
                              {% elsif transaction.gateway_display_name == "Gift card" %}
                                <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>
                                  &emsp;&emsp;&emsp;&nbsp;Gift card balance - <b>{{ transaction.payment_details.gift_card.balance |  money }}</b>
                              {% elsif transaction.gateway_display_name != "Shop Cash" %}
                                {{ transaction.gateway_display_name }}<br>
                              {% endif %}
                            {% elsif transaction.kind == "authorization" and transaction.gateway_display_name == "Shop Cash" %}
                              <span>Shop Cash</span><br>                              
                            {% endif %}
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    </p>
                  </td>
                {% endif %}
              </tr>
              <tr>
                {% if requires_shipping and shipping_address %}
                  {% if shipping_method %}
                    <td class="customer-info__item">
                      <h4>Shipping method</h4>
                        <p>
                          {% if delivery_promise_branded_shipping_line %}
                            {{ delivery_promise_branded_shipping_line }}
                          {% else %}
                            {{ shipping_method.title }}
                          {% endif %}
                        </p>
                    </td>
                  {% endif %}
                {% endif %}
              </tr>
            </table>

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

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <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>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

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

{%- if billing_address.country_code == 'DE' or billing_address.country_code == 'DK' -%}
  {%- if shop.terms_of_service.body != blank -%}
    {{ shop.terms_of_service | attach_as_pdf: "Terms of service" }}
  {%- endif -%}

  {%- if shop.refund_policy.body != blank -%}
    {{ shop.refund_policy | attach_as_pdf: "Refund policy" }}
  {%- endif -%}
{%- endif -%}

Need a Shopify Specialist? Chat on WhatsApp ✅
Contact iwhyshop@gmail.com for the solutions you need
Problem Solved? ✔Accept and Like solutions to help future merchants
Follow me on Facebook iwhyshop, Susbcribe to my YouTube iwhyshop.Author of app"Ws Instant Bulk Editor"-Batch edit prices instantly without complicated tasks

Franrulzok · ‎11-17-2024

Thank you! What about the Draft order invoice?

Is there a way to hyperlink the product name as well? People might not know they can click on the image.

whyshop · ‎11-18-2024

Below are the complete "order confirmation" and "draft order invoice" email templates with hyperlinks to the product on both the product image and name

1、order confirmation

{% capture email_title %}
  {% if has_pending_payment %}
    Thank you for your order!
  {% else %}
    Thank you for your purchase!
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if has_pending_payment %}
    {% if buyer_action_required %}
      You’ll get a confirmation email after completing your payment.
    {% else %}
      Your payment is being processed. You'll get an email when your order is confirmed.
    {% endif %}
  {% else %}
    {% 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 %}
          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 %}
        {% if has_multiple_delivery_methods %}
          <h3 class="estimated_delivery__title">Estimated delivery</h3>
          <p>{{ consolidated_estimated_delivery_time }}</p>
        {% else %}
          <p>
            Estimated delivery <b>{{ consolidated_estimated_delivery_time }}</b>
          </p>
        {% endif %}
       {% endif %}
    {% endif %}
  {% endif %}
  {% assign gift_card_line_items = line_items | where: "gift_card" %}
  {% assign found_gift_card_with_recipient_email = false %}
  {% for line_item in gift_card_line_items %}
    {% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
      {% assign found_gift_card_with_recipient_email = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_gift_card_with_recipient_email %}
    <p>Your gift card recipient will receive an email with their gift card code.</p>
  {% elsif gift_card_line_items.first %}
    <p>You’ll receive separate emails for any gift cards.</p>
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td>
                      <table class="order-po-number__container">
                        <tr>
                          <td class="order-number__cell">
                            <span class="order-number__text">
                              Order {{ order_name }}
                            </span>
                          </td>
                        </tr>
                        {%- if po_number %}
                            <tr>
                              <td class="po-number__cell">
                                <span class="po-number__text">
                                  PO number #{{ po_number }}
                                </span>
                              </td>
                            </tr>
                        {%- endif %}
                      </table>
                    </td>
                </tr>
              </table>

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

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

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% assign transaction_count = transactions | size %}
  {% if transaction_count > 0 %}
    {% for transaction in transactions %}
      {% if transaction.show_buyer_pending_payment_instructions? %}
        <p> {{transaction.buyer_pending_payment_notice}} </p>
        <p>
        <table class="row">
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.header }}</td>
            {% endfor %}
            <td>Amount</td>
          </tr>
          <tr>
            {% for instruction in transaction.buyer_pending_payment_instructions %}
              <td>{{ instruction.value }}</td>
            {% endfor %}
            <td>{{transaction.amount | money}}</td>
          </tr>
        </table>
        </p>
      {% endif %}
    {% endfor%}
  {% endif %}

            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}

            {% endif %}

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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Order summary</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
  <table class="row">
    {% for line in subtotal_line_items %}
      
<tr class="order-list__item">
  <td class="order-list__item__cell">
    <table>
        {% assign expand_bundles = false %}

      {% if expand_bundles and line.bundle_parent? %}
        <td class="order-list__parent-image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">
            {% if line.image %}
              <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {% else %}
              <div class="order-list__no-image-cell">
                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
              </div>
          </a>
          {% endif %}
        </td>
      {% else %}
        <td class="order-list__image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">

          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
        </a>
        </td>
      {% endif %}
      <td class="order-list__product-description-cell">
        <a href="{{ shop.url }}{{ line.url }}" target="_blank">

        {% 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 %}

        <span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

        {% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% endif %}

        {% if expand_bundles %}
          {% for component in line.bundle_components %}
            <table>
              <tr class="order-list__item">
                <td class="order-list__bundle-item">
                  <table>
                    <td class="order-list__image-cell">
                      {% if component.image %}
                        <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% elsif component.image_url %}
                        <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% else %}
                        <div class="order-list__no-image-cell small">
                          <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                        </div>
                      {% endif %}
                    </td>

                    <td class="order-list__product-description-cell">
                      <a href="{{ shop.url }}{{ line.url }}" target="_blank">

                      {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                      {% else %}
                        {% assign component_title = component.title %}
                      {% endif %}

                      {% assign component_display = component.quantity %}

                      <span class="order-list__item-title">{{ component_title }}&nbsp;&times;&nbsp;{{ component_display }}</span><br>

                      {% if component.variant.title != 'Default Title'%}
                        <span class="order-list__item-variant">{{ component.variant.title }}</span>
                      {% endif %}
                      </a>
                    </td>
                  </table>
                </td>
              </tr>
            </table>
          {% endfor %}
        {% else %}
          {% for group in line.groups %}
            <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
          {% endfor %}
        {% endif %}

          {% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
            {% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <div class="order-list__item-property">
      <dt>{{ property.first }}:</dt>
      <dd>
      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}" class="link" target="_blank">
        {{ property.last | split: '/' | last }}
        </a>
      {% else %}
        {{ property.last }}
      {% endif %}
      </dd>
    </div>
  {% endif %}
{% endfor %}

          {% endif %}

        {% if line.selling_plan_allocation %}
          <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
        {% endif %}

        {% if line.refunded_quantity > 0 %}
          <span class="order-list__item-refunded">Refunded</span>
        {% endif %}

        {% if line.discount_allocations %}
          {% for discount_allocation in line.discount_allocations %}
            {% if discount_allocation.discount_application.target_selection != 'all' %}
            <p>
              <span class="order-list__item-discount-allocation">
                <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                <span>
                  {{ discount_allocation.discount_application.title | upcase }}
                  (-{{ discount_allocation.amount | money }})
                </span>
              </span>
            </p>
            {% endif %}
          {% endfor %}
        {% endif %}
        </a>
      </td>
        {% if expand_bundles and line.bundle_parent? %}
          <td class="order-list__parent-price-cell">
        {% else %}
          <td class="order-list__price-cell">
        {% endif %}
        {% if line.original_line_price != line.final_line_price %}
          <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
        {% endif %}
          <p class="order-list__item-price">
            {% if line.final_line_price > 0 %}
              {{ line.final_line_price | money }}
            {% else %}
              Free
            {% endif %}
          </p>
        </td>
    </table>
  </td>
</tr>

    {% endfor %}
  </table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">

        
{% assign total_order_discount_amount = 0 %}
{% assign has_shipping_discount = false %}
{% assign epsilon = 0.00001 %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount %}
  {% endif %}
  {% if discount_application.target_type == 'shipping_line' %}
    {% assign has_shipping_discount = true %}
    {% assign shipping_discount_title = discount_application.title %}
    {% if discount_application.total_allocated_amount == 0 %}
      {% assign discount_value_price = discount_application.value | times: 100 %}
    {% else %}
      {% assign discount_value_price = discount_application.total_allocated_amount %}
    {% endif %}
    {% assign shipping_amount_minus_discount_value_price = shipping_price | minus: discount_value_price %}
    {% assign shipping_amount_minus_discount_value_price_abs = shipping_amount_minus_discount_value_price | abs %}
    {% assign discount_application_value_type = discount_application.value_type | strip %}
    {% if shipping_amount_minus_discount_value_price_abs < epsilon or discount_application_value_type == 'percentage' and discount_application.value == 100 %}
      {% assign free_shipping = true %}
    {% else %}
      {% assign discounted_shipping_price = shipping_amount_minus_discount_value_price %}
    {% endif %}
  {% endif %}
{% endfor %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Subtotal</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | plus: total_order_discount_amount | money }}</strong>
  </td>
</tr>



{% if order_discount_count > 0 %}
  {% if order_discount_count == 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discount</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% if order_discount_count > 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discounts</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

    {% endif %}
  {% endfor %}
{% endif %}


        {% unless retail_delivery_only %}
          {% if delivery_method == 'pick-up' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Pickup</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

          {% else %}
            {% if has_shipping_discount %}
  {% if free_shipping == true %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money}} </del>
      <strong>Free</strong>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <del>{{ shipping_price | money }} </del>
      <strong>{{ discounted_shipping_price | money }}</strong>
  </td>
</tr>

  {% endif %}
  <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount_title }} (-{{ discount_value_price | money }})</span>
      </span>
    </p>
  </td>
</tr>

{% else %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

{% endif %}

          {% endif %}
        {% endunless %}

        {% if total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Taxes</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>

      {% assign transaction_size = 0 %}
      {% assign transaction_amount = 0 %}
      {% assign net_transaction_amount_rounding = 0 %}
      {% for transaction in transactions %}
        {% if transaction.status == "success" %}
          {% if transaction.kind == "sale" or transaction.kind == "capture"  %}
              {% assign transaction_size = transaction_size | plus: 1 %}
              {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
              {% if transaction.amount_rounding != nil %}
                {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | plus: transaction.amount_rounding %}
              {% endif %}
          {% elsif transaction.kind == "refund" or transaction.kind == "change" %}
            {% assign transaction_size = transaction_size | plus: 1 %}
            {% assign transaction_amount = transaction_amount | minus: transaction.amount %}
            {% if transaction.amount_rounding != nil %}
              {% assign net_transaction_amount_rounding = net_transaction_amount_rounding | minus: transaction.amount_rounding %}
            {% endif %}
          {% endif %}
        {% endif %}
      {% endfor %}

      <table class="row subtotal-table subtotal-table--total">
      {% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b?  %}
        {% assign next_payment = payment_terms.next_payment %}
        {% assign due_at_date = next_payment.due_at | date: "%b %d, %Y" %}
        {% if net_transaction_amount_rounding != 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
        {% endif %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

        <div class="payment-terms">
          {% assign next_amount_due = total_price %}
          {% if next_payment %}
            {% assign next_amount_due = next_payment.amount_due %}
          {% endif %}

          {% if payment_terms.type == 'receipt' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on receipt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% elsif payment_terms.type == 'fulfillment' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on fulfillment</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% else %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due {{ due_at_date }}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        </div>
      {% else %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

        {% if net_transaction_amount_rounding != 0 %}
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <div class="subtotal-line__value-small">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Cash rounding</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{% if net_transaction_amount_rounding < 0 %}-{% endif %} {{ net_transaction_amount_rounding | abs | money }}</strong>
  </td>
</tr>

          </div>
          {% if financial_status == 'paid' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Paid</span>
        <br>
        <small>{{ gateway | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        {% endif %}
        {% if transaction_amount != total_price and payment_terms == nil%}
          <div class="payment-terms">
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total paid today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction_amount | plus: net_transaction_amount_rounding | money_with_currency }}</strong>
  </td>
</tr>

          </div>
        {% endif %}
      {% endif %}
      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
        </p>
      {% endif %}

      {% unless payment_terms %}
      {% if transaction_size > 1 or transaction_amount < total_price %}
        <table class="row subtotal-table">
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

          {% for transaction in transactions %}
            {% assign amount_rounding = 0 %}
            {% if transaction.amount_rounding != 0 %}
              {% assign amount_rounding =  transaction.amount_rounding %}
            {% endif %}
            {% if transaction.status == "success" and transaction.kind == "capture" or transaction.kind == "sale" %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% capture transaction_name %}Gift card (ending with {{ transaction.payment_details.gift_card_last_four_digits }}){% endcapture %}
              {% elsif 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 class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
            {% if transaction.kind == 'refund' %}
              {% if transaction.payment_details.gift_card_last_four_digits %}
                {% assign refund_method_title = transaction.payment_details.type %}
              {% elsif transaction.payment_details.credit_card_company %}
                {% assign refund_method_title = transaction.payment_details.credit_card_company %}
              {% else %}
                {% assign refund_method_title = transaction.gateway_display_name %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Refund</span>
        <br>
        <small>{{ refund_method_title | replace: '_', ' ' | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>- {{ transaction.amount | plus: amount_rounding | money }}</strong>
  </td>
</tr>

            {% endif %}
          {% endfor %}
        </table>
      {% endif %}


      {% endunless %}
    </td>
  </tr>
</table>


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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Customer information</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                  <td class="customer-info__item">
                    <h4>Shipping address</h4>
                    {{ shipping_address | format_address }}
                  </td>
                {% endif %}
                {% if billing_address %}
                  <td class="customer-info__item">
                    <h4>Billing address</h4>
                    {{ billing_address | format_address }}
                  </td>
                {% endif %}
              </tr>
            </table>
            <table class="row">
              <tr>
                {% if company_location %}
                  <td class="customer-info__item">
                    <h4>Location</h4>
                    <p>
                      {{ company_location.name }}
                    </p>
                  </td>
                {% endif %}
                {% if transaction_size > 0 or payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b? %}
                  <td class="customer-info__item">
                    <h4>Payment</h4>
                    <p class="customer-info__item-content">
                      {% if payment_terms %}
                        {% assign due_date = payment_terms.next_payment.due_at | default: nil %}
                        {% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil %}
                          {{ payment_terms.translated_name }}<br>
                        {% else %}
                          {{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}<br>
                        {% endif %}
                      {% endif %}
                      {% if transaction_size > 0 %}
                        {% for transaction in transactions %}
                          {% if transaction.status == "success" or transaction.status == "pending" %}
                            {% if transaction.kind == "capture" or transaction.kind == "sale" %}
                              {% if transaction.payment_details.gift_card_last_four_digits %}
                                <img src="{{ transaction.payment_details.type | downcase | replace: '_', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card_last_four_digits }}<br>
                              {% elsif transaction.payment_details.credit_card_company %}
                                <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                                <span>ending with {{ transaction.payment_details.credit_card_last_four_digits }}</span><br>
                              {% elsif transaction.gateway_display_name == "Gift card" %}
                                <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                                ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>
                                  &emsp;&emsp;&emsp;&nbsp;Gift card balance - <b>{{ transaction.payment_details.gift_card.balance |  money }}</b>
                              {% elsif transaction.gateway_display_name != "Shop Cash" %}
                                {{ transaction.gateway_display_name }}<br>
                              {% endif %}
                            {% elsif transaction.kind == "authorization" and transaction.gateway_display_name == "Shop Cash" %}
                              <span>Shop Cash</span><br>                              
                            {% endif %}
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    </p>
                  </td>
                {% endif %}
              </tr>
              <tr>
                {% if requires_shipping and shipping_address %}
                  {% if shipping_method %}
                    <td class="customer-info__item">
                      <h4>Shipping method</h4>
                        <p>
                          {% if delivery_promise_branded_shipping_line %}
                            {{ delivery_promise_branded_shipping_line }}
                          {% else %}
                            {{ shipping_method.title }}
                          {% endif %}
                        </p>
                    </td>
                  {% endif %}
                {% endif %}
              </tr>
            </table>

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

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <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>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

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

{%- if billing_address.country_code == 'DE' or billing_address.country_code == 'DK' -%}
  {%- if shop.terms_of_service.body != blank -%}
    {{ shop.terms_of_service | attach_as_pdf: "Terms of service" }}
  {%- endif -%}

  {%- if shop.refund_policy.body != blank -%}
    {{ shop.refund_policy | attach_as_pdf: "Refund policy" }}
  {%- endif -%}
{%- endif -%}

2、draft order invoice

{% capture email_title %}
  {% if payment_terms %}
    Review and confirm to complete your order
  {% else %}
    Complete your purchase
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if item_count > 1 %}
    These items will be reserved for you until {{ reserve_inventory_until | date: format: 'date_at_time' }}.
  {% else %}
    This item will be reserved for you until {{ reserve_inventory_until | date: format: 'date_at_time' }}.
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td>
                      <table class="order-po-number__container">
                        <tr>
                          <td class="order-number__cell">
                            <span class="order-number__text">
                              Invoice {{ name }}
                            </span>
                          </td>
                        </tr>
                        {%- if po_number %}
                            <tr>
                              <td class="po-number__cell">
                                <span class="po-number__text">
                                  PO number #{{ po_number }}
                                </span>
                              </td>
                            </tr>
                        {%- endif %}
                      </table>
                    </td>
                </tr>
              </table>

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

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

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            {% if custom_message != blank %}
              <p>{{ custom_message }}</p>
            {% elsif reserve_inventory_until %}
              <p>{{ email_body }}</p>
            {% endif %}
            {% if payment_terms %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ invoice_url }}" class="button__text">Confirm order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% else %}
              <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ invoice_url }}" class="button__text">Complete your purchase</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

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

            {% endif %}

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

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Order summary</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
  <table class="row">
    {% for line in subtotal_line_items %}
      
<tr class="order-list__item">
  <td class="order-list__item__cell">
    <table>
        {% assign expand_bundles = true %}

      {% if expand_bundles and line.bundle_parent? %}
        <td class="order-list__parent-image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
          </a>
        </td>
      {% else %}
        <td class="order-list__image-cell">
          <a href="{{ shop.url }}{{ line.url }}" target="_blank">

          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% else %}
            <div class="order-list__no-image-cell">
              <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
            </div>
          {% endif %}
        </a>
        </td>
      {% endif %}
      <td class="order-list__product-description-cell">
        <a href="{{ shop.url }}{{ line.url }}" target="_blank">

        {% 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 %}

        <span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

        {% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
          <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
        {% endif %}

        {% if expand_bundles %}
          {% for component in line.bundle_components %}
            <table>
              <tr class="order-list__item">
                <td class="order-list__bundle-item">
                  <table>
                    <td class="order-list__image-cell">
                      {% if component.image %}
                        <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% elsif component.image_url %}
                        <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                      {% else %}
                        <div class="order-list__no-image-cell small">
                          <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                        </div>
                      {% endif %}
                    </td>

                    <td class="order-list__product-description-cell">
                      <a href="{{ shop.url }}{{ line.url }}" target="_blank">
                      {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                      {% else %}
                        {% assign component_title = component.title %}
                      {% endif %}

                      {% assign component_display = component.quantity %}

                      <span class="order-list__item-title">{{ component_title }}&nbsp;&times;&nbsp;{{ component_display }}</span><br>

                      {% if component.variant.title != 'Default Title'%}
                        <span class="order-list__item-variant">{{ component.variant.title }}</span>
                      {% endif %}
                      </a>
                    </td>
                  </table>
                </td>
              </tr>
            </table>
          {% endfor %}
        {% else %}
          {% for group in line.groups %}
            <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
          {% endfor %}
        {% endif %}

          {% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
            {% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <div class="order-list__item-property">
      <dt>{{ property.first }}:</dt>
      <dd>
      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}" class="link" target="_blank">
        {{ property.last | split: '/' | last }}
        </a>
      {% else %}
        {{ property.last }}
      {% endif %}
      </dd>
    </div>
  {% endif %}
{% endfor %}

          {% endif %}

        {% if line.selling_plan_allocation %}
          <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
        {% endif %}

        {% if line.refunded_quantity > 0 %}
          <span class="order-list__item-refunded">Refunded</span>
        {% endif %}

        {% if line.discount_allocations %}
          {% for discount_allocation in line.discount_allocations %}
            {% if discount_allocation.discount_application.target_selection != 'all' %}
            <p>
              <span class="order-list__item-discount-allocation">
                <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                <span>
                  {{ discount_allocation.discount_application.title | upcase }}
                  (-{{ discount_allocation.amount | money }})
                </span>
              </span>
            </p>
            {% endif %}
          {% endfor %}
        {% endif %}
          </a>
      </td>
        {% if expand_bundles and line.bundle_parent? %}
          <td class="order-list__parent-price-cell">
        {% else %}
          <td class="order-list__price-cell">
        {% endif %}
        {% if line.original_line_price != line.final_line_price %}
          <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
        {% endif %}
          <p class="order-list__item-price">
            {% if line.final_line_price > 0 %}
              {{ line.final_line_price | money }}
            {% else %}
              Free
            {% endif %}
          </p>
        </td>
    </table>
  </td>
</tr>

    {% endfor %}
  </table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">

        
{% assign order_discount_count = 0 %}
{% assign total_order_discount_amount = 0 %}
{% assign subtotal_order_amount = 0 %}
{% assign has_shipping_discount = false %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount  %}
    {% assign subtotal_order_amount = subtotal_order_amount | plus: discount_application.total_allocated_amount  %}
  {% endif %}
  {% if discount_application.target_type == 'shipping_line' %}
    {% assign has_shipping_discount = true %}
    {% assign shipping_discount = discount_application.title %}
    {% assign shipping_amount = discount_application.total_allocated_amount %}
    {% assign subtotal_order_amount = subtotal_order_amount | plus: discount_application.total_allocated_amount  %}
    {% assign discounted_shipping_price = shipping_price | minus: shipping_amount %}
  {% endif %}
{% endfor %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Subtotal</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | plus: subtotal_order_amount | money }}</strong>
  </td>
</tr>



{% if order_discount_count > 0 %}
  {% if order_discount_count == 1 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discount</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Order discounts</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>

  {% endif %}
  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

    {% endif %}
  {% endfor %}
{% endif %}


        {% if delivery_method == 'pick-up' %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Pickup</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

        {% else %}
          {% if has_shipping_discount %}
  {% if discounted_shipping_price > 0 %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ discounted_shipping_price | money }}</strong>
  </td>
</tr>

    <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount }} (-{{ shipping_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

  {% else %}
    
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>Free</strong>
  </td>
</tr>

    <tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span class="subtotal-line__discount">
        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
        <span class="subtotal-line__discount-title">{{ shipping_discount }} (-{{ shipping_amount | money }})</span>
      </span>
    </p>
  </td>
</tr>

  {% endif %}
{% else %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Shipping</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

{% endif %}

        {% endif %}

        {% if total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Estimated taxes</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>

      <table class="row subtotal-table subtotal-table--total">
      {% if payment_terms %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due today</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ amount_due_now | money_with_currency }}</strong>
  </td>
</tr>

        <div class="payment-terms">
          {% assign next_payment = payment_terms.next_payment %}
          {% assign due_at_date = next_payment.due_at | date: format: 'date' %}
          {% assign next_amount_due = total_price | minus: amount_due_now %}

          {% if payment_terms.type == 'receipt' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on receipt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% elsif payment_terms.type == 'fulfillment' %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due on fulfillment</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% else %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total due {{ due_at_date }}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ next_amount_due | money_with_currency }}</strong>
  </td>
</tr>

          {% endif %}
        </div>
      {% else %}
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Total</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

      {% endif %}
      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
        </p>
      {% endif %}

      {% unless payment_terms %}


      {% endunless %}
    </td>
  </tr>
</table>


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

          {% if shipping_address or billing_address or shipping_method or company_location or payment_terms %}
            <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Customer information</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
              <table class="row">
                <tr>
                  {% if shipping_address %}
                    <td class="customer-info__item">
                      <h4>Shipping address</h4>
                      {{ shipping_address | format_address }}
                    </td>
                  {% endif %}

                  {% if billing_address %}
                    <td class="customer-info__item">
                      <h4>Billing address</h4>
                      {{ billing_address | format_address }}
                    </td>
                  {% endif %}
                </tr>
              </table>
              {% if shipping_method or company_location or payment_terms %}
                <table class="row">
                  <tr>
                    {% if company_location %}
                      <td class="customer-info__item">
                        <h4>Location</h4>
                        <p>
                          {{ company_location.name }}
                        </p>
                      </td>
                    {% endif %}

                    {% if payment_terms %}
                      <td class="customer-info__item">
                        <h4>Payment</h4>
                        {% assign due_date = payment_terms.next_payment.due_at | default: nil %}
                        {% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' %}
                          <p>{{ payment_terms.translated_name }}</p>
                        {% else %}
                          <p>{{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}</p>
                        {% endif %}
                      </td>
                    {% endif %}
                  </tr>
                  <tr>
                    {% if shipping_method %}
                      <td class="customer-info__item customer-info__item--last">
                        <h4>Shipping method</h4>
                        {% if local_pickup %}
                          <p>Local pickup - {{ shipping_method.title }}</p>
                          {% if local_pickup_address %}
                            {{ local_pickup_address | format_address }}
                          {% endif %}
                        {% else %}
                          <p>{{ shipping_method.title }}<br/>{{ shipping_method.price | money }}</p>
                        {% endif %}
                      </td>
                      <td class="customer-info__item customer-info__item--last">
                      </td>
                    {% endif %}
                  </tr>
                </table>
              {% endif %}

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
          {% endif %}

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <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>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

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

Need a Shopify Specialist? Chat on WhatsApp ✅
Contact iwhyshop@gmail.com for the solutions you need
Problem Solved? ✔Accept and Like solutions to help future merchants
Follow me on Facebook iwhyshop, Susbcribe to my YouTube iwhyshop.Author of app"Ws Instant Bulk Editor"-Batch edit prices instantly without complicated tasks

Product URL in draft order and order confirmation emails

Product URL in draft order and order confirmation emails

Community Blog Articles