Skip to content

How to show line item properties in Draft Order Invoice

Jump to bottom
Axel Kee edited this page Apr 18, 2023 · 10 revisions

To edit the template to include line item properties, go to your store admin > Settings > Notifications > Draft Order Invoice.

settings

template settings

Replace the code shown in the template with the code below, then scroll up and click "Save" on the top right corner.

The edited invoice template will look like this :
invoice template with line item properties

Email subject :

Invoice {{name}}

** The line item snippet ** :

{% unless line.properties == empty %}
<ul style="list-style-type: none; padding: 0;">
  {% for property in line.properties %}
  <li><span class="order-list__item-variant">{{ property.first }}: {{ property.last }}</span></li>
  {% endfor %}
</ul>
{% endunless %}

Full Email body example (HTML) :

{% capture email_title %}Complete your purchase{% endcapture %}
{% capture email_body %}
  {% if item_count > 1 %}
    These items will be reserved for you until: <strong>{{ reserve_inventory_until | date: "%A, %B %-d, %Y at %-l:%M %P %z" }}</strong>
  {% else %}
    This item will be reserved for you until: <strong>{{ reserve_inventory_until | date: "%A, %B %-d, %Y at %-l:%M %P %z" }}</strong>
  {% 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 class="order-number__cell">
                      <span class="order-number__text">
                        Invoice {{ name }}
                      </span>
                    </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 %}
            <table class="row actions">
  <tr>
    <td class="empty-line"> </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>


            </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>
        <td>
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
        </td>
        <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 }} × {{ line_display }}</span><br/>

          {% if line.variant.title != 'Default Title' %}
            <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
          {% 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 %}

          {% unless line.properties == empty %}
          <ul style="list-style-type: none; padding: 0;">
            {% for property in line.properties %}
            <li><span class="order-list__item-variant">{{ property.first }}: {{ property.last }}</span></li>
            {% endfor %}
          </ul>
          {% endunless %}

          {% if line.discount_allocations %}
            {% for discount_allocation in line.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                <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>
              {% endif %}
            {% endfor %}
          {% endif %}
        </td>
          <td class="order-list__price-cell">
            {% 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">
        {% for discount_application in discount_applications %}
          {% if discount_application.target_selection == 'all' %}
            {% capture discount_title %}
              {% if discount_application.title %}
                {{ discount_application.title | upcase }}
              {% else %}
                Discount
              {% endif %}
            {% endcapture %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Discount</span>
        <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_title }}</span>
        </span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>-{{ discount_application.total_allocated_amount | money }}</strong>
  </td>
</tr>

          {% 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 | money }}</strong>
  </td>
</tr>

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

        {% if current_total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Duties</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ current_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>
      <table class="row subtotal-table subtotal-table--total">
        
<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>

      </table>

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

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

      {% if transaction_size > 1 or transaction_amount < total_price %}
        <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 %}
            {% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
              {% if transaction.payment_details.credit_card_company %}
                {% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
              {% else %}
                {% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ transaction.amount | money }}</strong>
  </td>
</tr>

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

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

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


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

          {% if shipping_address or billing_address or shipping_method %}
            <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 %}
                <table class="row">
                  <tr>
                    <td class="customer-info__item customer-info__item--last">
                      <h4>Shipping method</h4>
                      <p>{{ shipping_method.title }}<br/>{{ shipping_method.price | money }}</p>
                    </td>
                  </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>
Clone this wiki locally