Appearance
Order Confirmation Email Template
Show Keystone Product Options in Shopify order confirmation emails by updating your notification template.
Overview
By default, Shopify's order confirmation email may not display line item properties for all order types — especially when you use + Options bundles with priced cart-transform expansion. This guide provides a pre-patched template that renders customer-selected options in every branch of Shopify's order confirmation layout.
When you need this
Use this template if customers complete checkout but their selected options do not appear in the order confirmation email. Options may still show correctly in the admin order details and cart without this change.
Quick Install
- From your Shopify admin, go to Settings → Notifications
- Open Order confirmation
- Click Edit code
- Select all existing template code and delete it
- Open the full template below, click Copy Code, and paste into the editor
- Click Save
Full order confirmation template (4,061 lines)
liquid
{% assign delivery_method_types = delivery_agreements | map: 'delivery_method_type' | uniq %}
{% assign has_split_cart = false %}
{% assign non_none_count = 0 %}
{% for type in delivery_method_types %}
{% unless type == 'none' %}
{% assign non_none_count = non_none_count | plus: 1 %}
{% endunless %}
{% endfor %}
{% if non_none_count > 1 %}
{% assign has_split_cart = true %}
{% endif %}
{% assign non_none_agreements_count = 0 %}
{% for agreement in delivery_agreements %}
{% unless agreement.delivery_method_type == 'none' %}
{% assign non_none_agreements_count = non_none_agreements_count | plus: 1 %}
{% endunless %}
{% endfor %}
{% capture email_title %}
Thank you for your order!
{% 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 %}
{% elsif payment_charged_on_fulfillment %}
Hi {{ customer.first_name }}, we received your order. Your payment method will be charged when your order is ready to be fulfilled. We'll notify you when it's on its way.
{% else %}
{% if requires_shipping %}
{% if has_split_cart %}
{% case split_cart_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.
{% when 'shipping' %}
We're getting your order ready to be shipped. We will notify you when it has been sent.
{% else %}
We're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% else %}
{% 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 %}
{% endif %}
{% if delivery_instructions != blank %}
<p><b>Delivery information:</b> {{ delivery_instructions }}</p>
{% endif %}
{% unless delivery_method_types.size > 1 %}
{% if consolidated_estimated_delivery_time %}
{% if non_none_agreements_count > 1 %}
<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 %}
{% endunless %}
{% 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 }}; }
.actions-buttons .button__cell--primary { background-color: {{ 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 %}
{% if shop_app_tracking_url and shop_app_tracking_button_variant_key %}
{% if shop_app_tracking_button_variant_key == "track_with_shop" %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
{% capture shop_logo_img %}<img src="{{ 'mailer/shop_logo.png' | cdn_asset_url }}" alt="Shop" width="42" height="17" class="button__shop-logo">{% endcapture %}
<table class="actions-buttons" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="button__cell button__cell--primary" width="50%">
<a href="{{ order_status_url }}" class="button__text">View your order</a>
</td>
<td class="button__cell--separator"></td>
<td class="button__cell button__cell--shop-app" width="50%">
<a href="{{ shop_app_tracking_url }}" class="button__text button__text--shop-app">Track order with {{ shop_logo_img }}</a>
</td>
</tr>
</table>
<div class="actions__group">
{% 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 %}
</div>
</td>
</tr>
</table>
{% else %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
{% capture shop_logo_img %}<img src="{{ 'mailer/shop_logo.png' | cdn_asset_url }}" alt="Shop" width="42" height="17" class="button__shop-logo">{% endcapture %}
<table class="actions-buttons" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="button__cell button__cell--primary" width="50%">
<a href="{{ order_status_url }}" class="button__text">View your order</a>
</td>
<td class="button__cell--separator"></td>
<td class="button__cell button__cell--shop-app" width="50%">
<a href="{{ shop_app_tracking_url }}" class="button__text button__text--shop-app">Download to track with {{ shop_logo_img }}</a>
</td>
</tr>
</table>
<div class="actions__group">
{% 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 %}
</div>
</td>
</tr>
</table>
{% endif %}
{% else %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle">
<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>
</td>
<td valign="middle" style="padding-left: 15px; vertical-align: middle;">
{% if shop.url %}
<table class="link secondary-action-cell" style="margin-top: 0; vertical-align: middle;">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% 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>
{% if delivery_method_types.size > 1 %}
<table class="row">
{% for line in subtotal_line_items %}
{% unless line.delivery_agreement %}
{% if line.groups.size == 0 %}
{% assign legacy_separator = true %}
{% comment %} Skip child add-ons since they will be rendered under the parent line item {% endcomment %}
{% unless line.nested_line_child? %}
{% assign is_parent = false %}
{% assign is_nested_line_parent = line.nested_line_parent? %}
{% if line.bundle_parent? or line.nested_line_parent? %}
{% assign is_parent = true %}
{% endif %}
{% if is_nested_line_parent %}
{% assign css_order_list_cell_nested_line_parent_class = 'order-list__parent-cell' %}
{% assign css_order_list_parent_image_cell_nested_line_parent_class = 'order-list__nested-parent-image-cell' %}
{% endif %}
<tr class="order-list__item">
<td class="order-list__item__cell {{ css_order_list_cell_nested_line_parent_class }}">
<table height="100%">
<td style="padding-bottom: 0px;">
<table height="100%">
<tr valign="top">
{% if false and is_parent %}
<td class="order-list__parent-image-cell {{ css_order_list_parent_image_cell_nested_line_parent_class }}">
{% 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" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% 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 %}
</td>
{% endif %}
</tr>
{% if is_nested_line_parent %}
<tr height="100%">
<td style="padding: 0px;" height="100%">
<table height="100%">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div class="nested-line-item-spacer"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
{% if line.presentment_title %}
{% assign line_title = line.presentment_title %}
{% elsif line.title %}
{% assign line_title = line.title %}
{% else %}
{% assign line_title = line.product.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' and is_parent == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.nested_line_parent? %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.bundle_parent? and false == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
{% comment %} Keystone Options — standard line item properties (start) {% endcomment %}
{% 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 %}
{% comment %} Keystone Options — standard line item properties (end) {% endcomment %}
{% if false %}
{% for child_line in line.bundle_components %}
{% if true %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_display }} × {{ item_title }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in line.groups %}
{% if group.deliverable? %}
<span class="order-list__item-variant">For: {{ group.display_title }}</span><br/>
{% else %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endif %}
{% 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 false and is_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 }}
{% if line.unit_price_measurement %}
<div class="order-list__unit-price">
{{- line.unit_price | unit_price_with_measurement: line.unit_price_measurement -}}
</div>
{% endif %}
{% else %}
Free
{% endif %}
</p>
</td>
{% if line.nested_line_parent? %}
{% for child_line in line.nested_lines %}
{% if false %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="nested-line-item-spacer-cell"style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_title }} × {{ item_display }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% endif %}
</table>
</td>
</tr>
{% endunless %}
{% endif %}
{% endunless %}
{% endfor %}
{% for line_item_group in line_item_groups %}
{% unless line_item_group.components.first.delivery_agreement %}
{% assign legacy_separator = true %}
{% assign final_line_price = 0 %}
{% assign original_line_price = 0 %}
{% assign discount_keys_str = "" %}
{% assign parent_line_item = nil %}
{% if line_item_group.deliverable? == false %}
{% assign line_item_group_class = "order-list__item__cell" %}
{% for component in line_item_group.components %}
{% assign final_line_price = final_line_price | plus: component.final_line_price %}
{% assign original_line_price = original_line_price | plus: component.original_line_price %}
{% for da in component.discount_allocations %}
{% if da.discount_application.target_selection != 'all' %}
{% assign discount_key = da.discount_application.title | append: da.discount_application.type %}
{% assign discount_keys_str = discount_keys_str | append: discount_key | append: "," %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if line_item_group.deliverable? %}
{% assign parent_line_item = line_item_group.parent_sales_line_item %}
{% assign final_line_price = parent_line_item.final_line_price %}
{% assign original_line_price = parent_line_item.original_line_price %}
{% assign line_item_group_class = "order-list__parent_item__cell" %}
{% assign padding_bottom_none_class = "padding-bottom-none" %}
{% endif %}
{% assign discount_keys = discount_keys_str | split: "," | uniq %}
<tr class="order-list__item">
<td class="{{ line_item_group_class }}" style="padding: 15px 0 0px 1px;">
<table height="100%">
<td class="order-list__parent-image-cell">
<table height="100%">
<tr>
<td class="{{ padding_bottom_none_class }}" valign="top">
{% if parent_line_item and parent_line_item.image %}
<img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% elsif line_item_group.image %}
<img src="{{ line_item_group | 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="30" height="30" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
</tr>
{% if line_item_group.deliverable? == true %}
<tr height="100%">
<td height="100%" class="parent-vertical-line__cell">
<table height="100%" style="width: auto;">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div style="width: 6px;"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
<table>
<tr>
<td class="order-list__product-description-cell" colspan="2">
<span class="order-list__item-title">{{ line_item_group.display_title }} × {{ line_item_group.quantity }}</span><br/>
{% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
{% endif %}
{% if line_item_group.deliverable? %}
{% if parent_line_item.discount_allocations %}
{% for discount_allocation in parent_line_item.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 %}
{% else %}
{% for discount_key in discount_keys %}
{% assign discount_amount = 0 %}
{% for component in line_item_group.components %}
{% for da in component.discount_allocations %}
{% assign key = da.discount_application.title | append: da.discount_application.type %}
{% if da.discount_application.target_selection != 'all' and key == discount_key %}
{% assign discount_amount = discount_amount | plus: da.amount %}
{% assign discount_title = da.discount_application.title %}
{% endif %}
{% endfor %}
{% endfor %}
<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_title | upcase }}
(-{{ discount_amount | money }})
</span>
</span>
</p>
{% endfor %}
{% endif %}
</td>
<td class="order-list__parent_price-cell">
{% if original_line_price != final_line_price %}
<del class="order-list__item-original-price">{{ original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if final_line_price > 0 %}
{{ final_line_price | money }}
{% else %}
{{ 'notifications.views.mailers.notifications.discount_free' | t }}
{% endif %}
</p>
</td>
</tr>
{% if line_item_group.deliverable? == false %}
{% for component in line_item_group.components %}
{% if true %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
{% endfor %}
{% endif %}
</table>
</td>
</table>
{% if line_item_group.deliverable? %}
<td height="100%">
{% for component in line_item_group.components %}
<tr>
<td class="order-list__deliverable-item" height="100%" style="padding: 0;">
<table height="100%">
{% if false %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="nested-line-item-spacer-cell" style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
{% endfor %}
</td>
{% endif %}
</td>
</tr>
{% endunless %}
{% endfor %}
</table>
{% if legacy_separator %}
<hr class="order-list__delivery-method-type-separator">
{% endif %}
{% for delivery_agreement in delivery_agreements %}
{% if delivery_agreement.line_items != blank %}
{% if delivery_agreements.size > 1 %}
<h4 class="order-list__delivery-method-type">
{{ delivery_agreement.delivery_method_name }} items
</h4>
{% if delivery_agreement.delivery_method_type == 'pick-up' %}
{% if delivery_agreement.estimated_delivery_date %}
<p class="order-list__estimated-delivery">
Estimated delivery · <strong>{{ delivery_agreement.estimated_delivery_date }}</strong>
</p>
{% endif %}
<p class="order-list__estimated-delivery">
You’ll receive an email when your order is ready for pickup.
</p>
{% elsif delivery_agreement.delivery_method_type == 'shipping'
or delivery_agreement.delivery_method_type == 'local'
or delivery_agreement.delivery_method_type == 'pickup-point' %}
{% if delivery_agreement.presentment_title %}
{% if delivery_agreement.estimated_delivery_date %}
<p class="order-list__estimated-delivery">
Estimated delivery
</p>
{% endif %}
<p class="order-list__estimated-delivery">
{{ delivery_agreement.presentment_title }}{% if delivery_agreement.estimated_delivery_date %} · {{ delivery_agreement.estimated_delivery_date }}{% endif %}
</p>
{% endif %}
{% endif %}
{% endif %}
<table class="row">
{% for line in delivery_agreement.non_parent_line_items %}
{% if line.groups.size == 0 %}
{% comment %} Skip child add-ons since they will be rendered under the parent line item {% endcomment %}
{% unless line.nested_line_child? %}
{% assign is_parent = false %}
{% assign is_nested_line_parent = line.nested_line_parent? %}
{% if line.bundle_parent? or line.nested_line_parent? %}
{% assign is_parent = true %}
{% endif %}
{% if is_nested_line_parent %}
{% assign css_order_list_cell_nested_line_parent_class = 'order-list__parent-cell' %}
{% assign css_order_list_parent_image_cell_nested_line_parent_class = 'order-list__nested-parent-image-cell' %}
{% endif %}
<tr class="order-list__item">
<td class="order-list__item__cell {{ css_order_list_cell_nested_line_parent_class }}">
<table height="100%">
<td style="padding-bottom: 0px;">
<table height="100%">
<tr valign="top">
{% if false and is_parent %}
<td class="order-list__parent-image-cell {{ css_order_list_parent_image_cell_nested_line_parent_class }}">
{% 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" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% 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 %}
</td>
{% endif %}
</tr>
{% if is_nested_line_parent %}
<tr height="100%">
<td style="padding: 0px;" height="100%">
<table height="100%">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div class="nested-line-item-spacer"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
{% if line.presentment_title %}
{% assign line_title = line.presentment_title %}
{% elsif line.title %}
{% assign line_title = line.title %}
{% else %}
{% assign line_title = line.product.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' and is_parent == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.nested_line_parent? %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.bundle_parent? and false == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
{% comment %} Keystone Options — standard line item properties (start) {% endcomment %}
{% 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 %}
{% comment %} Keystone Options — standard line item properties (end) {% endcomment %}
{% if false %}
{% for child_line in line.bundle_components %}
{% if true %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_display }} × {{ item_title }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in line.groups %}
{% if group.deliverable? %}
<span class="order-list__item-variant">For: {{ group.display_title }}</span><br/>
{% else %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endif %}
{% 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 false and is_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 }}
{% if line.unit_price_measurement %}
<div class="order-list__unit-price">
{{- line.unit_price | unit_price_with_measurement: line.unit_price_measurement -}}
</div>
{% endif %}
{% else %}
Free
{% endif %}
</p>
</td>
{% if line.nested_line_parent? %}
{% for child_line in line.nested_lines %}
{% if false %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="nested-line-item-spacer-cell"style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_title }} × {{ item_display }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% endif %}
</table>
</td>
</tr>
{% endunless %}
{% endif %}
{% endfor %}
{% for line_item_group in delivery_agreement.line_item_groups %}
{% if line_item_group.deliverable? == false %}
{% assign final_line_price = 0 %}
{% assign original_line_price = 0 %}
{% assign discount_keys_str = "" %}
{% assign parent_line_item = nil %}
{% if line_item_group.deliverable? == false %}
{% assign line_item_group_class = "order-list__item__cell" %}
{% for component in line_item_group.components %}
{% assign final_line_price = final_line_price | plus: component.final_line_price %}
{% assign original_line_price = original_line_price | plus: component.original_line_price %}
{% for da in component.discount_allocations %}
{% if da.discount_application.target_selection != 'all' %}
{% assign discount_key = da.discount_application.title | append: da.discount_application.type %}
{% assign discount_keys_str = discount_keys_str | append: discount_key | append: "," %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if line_item_group.deliverable? %}
{% assign parent_line_item = line_item_group.parent_sales_line_item %}
{% assign final_line_price = parent_line_item.final_line_price %}
{% assign original_line_price = parent_line_item.original_line_price %}
{% assign line_item_group_class = "order-list__parent_item__cell" %}
{% assign padding_bottom_none_class = "padding-bottom-none" %}
{% endif %}
{% assign discount_keys = discount_keys_str | split: "," | uniq %}
<tr class="order-list__item">
<td class="{{ line_item_group_class }}" style="padding: 15px 0 0px 1px;">
<table height="100%">
<td class="order-list__parent-image-cell">
<table height="100%">
<tr>
<td class="{{ padding_bottom_none_class }}" valign="top">
{% if parent_line_item and parent_line_item.image %}
<img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% elsif line_item_group.image %}
<img src="{{ line_item_group | 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="30" height="30" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
</tr>
{% if line_item_group.deliverable? == true %}
<tr height="100%">
<td height="100%" class="parent-vertical-line__cell">
<table height="100%" style="width: auto;">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div style="width: 6px;"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
<table>
<tr>
<td class="order-list__product-description-cell" colspan="2">
<span class="order-list__item-title">{{ line_item_group.display_title }} × {{ line_item_group.quantity }}</span><br/>
{% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
{% endif %}
{% if line_item_group.deliverable? %}
{% if parent_line_item.discount_allocations %}
{% for discount_allocation in parent_line_item.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 %}
{% else %}
{% for discount_key in discount_keys %}
{% assign discount_amount = 0 %}
{% for component in line_item_group.components %}
{% for da in component.discount_allocations %}
{% assign key = da.discount_application.title | append: da.discount_application.type %}
{% if da.discount_application.target_selection != 'all' and key == discount_key %}
{% assign discount_amount = discount_amount | plus: da.amount %}
{% assign discount_title = da.discount_application.title %}
{% endif %}
{% endfor %}
{% endfor %}
<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_title | upcase }}
(-{{ discount_amount | money }})
</span>
</span>
</p>
{% endfor %}
{% endif %}
</td>
<td class="order-list__parent_price-cell">
{% if original_line_price != final_line_price %}
<del class="order-list__item-original-price">{{ original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if final_line_price > 0 %}
{{ final_line_price | money }}
{% else %}
{{ 'notifications.views.mailers.notifications.discount_free' | t }}
{% endif %}
</p>
</td>
</tr>
{% if line_item_group.deliverable? == false %}
{% for component in line_item_group.components %}
{% if true %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
{% endfor %}
{% endif %}
</table>
</td>
</table>
{% if line_item_group.deliverable? %}
<td height="100%">
{% for component in line_item_group.components %}
<tr>
<td class="order-list__deliverable-item" height="100%" style="padding: 0;">
<table height="100%">
{% if false %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="nested-line-item-spacer-cell" style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
{% endfor %}
</td>
{% endif %}
</td>
</tr>
{% else %}
{% if delivery_agreement == line_item_group.parent_sales_line_item.delivery_agreement %}
{% assign final_line_price = 0 %}
{% assign original_line_price = 0 %}
{% assign discount_keys_str = "" %}
{% assign parent_line_item = nil %}
{% if line_item_group.deliverable? == false %}
{% assign line_item_group_class = "order-list__item__cell" %}
{% for component in line_item_group.components %}
{% assign final_line_price = final_line_price | plus: component.final_line_price %}
{% assign original_line_price = original_line_price | plus: component.original_line_price %}
{% for da in component.discount_allocations %}
{% if da.discount_application.target_selection != 'all' %}
{% assign discount_key = da.discount_application.title | append: da.discount_application.type %}
{% assign discount_keys_str = discount_keys_str | append: discount_key | append: "," %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if line_item_group.deliverable? %}
{% assign parent_line_item = line_item_group.parent_sales_line_item %}
{% assign final_line_price = parent_line_item.final_line_price %}
{% assign original_line_price = parent_line_item.original_line_price %}
{% assign line_item_group_class = "order-list__parent_item__cell" %}
{% assign padding_bottom_none_class = "padding-bottom-none" %}
{% endif %}
{% assign discount_keys = discount_keys_str | split: "," | uniq %}
<tr class="order-list__item">
<td class="{{ line_item_group_class }}" style="padding: 15px 0 0px 1px;">
<table height="100%">
<td class="order-list__parent-image-cell">
<table height="100%">
<tr>
<td class="{{ padding_bottom_none_class }}" valign="top">
{% if parent_line_item and parent_line_item.image %}
<img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% elsif line_item_group.image %}
<img src="{{ line_item_group | 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="30" height="30" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
</tr>
{% if line_item_group.deliverable? == true %}
<tr height="100%">
<td height="100%" class="parent-vertical-line__cell">
<table height="100%" style="width: auto;">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div style="width: 6px;"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
<table>
<tr>
<td class="order-list__product-description-cell" colspan="2">
<span class="order-list__item-title">{{ line_item_group.display_title }} × {{ line_item_group.quantity }}</span><br/>
{% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
{% endif %}
{% if line_item_group.deliverable? %}
{% if parent_line_item.discount_allocations %}
{% for discount_allocation in parent_line_item.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 %}
{% else %}
{% for discount_key in discount_keys %}
{% assign discount_amount = 0 %}
{% for component in line_item_group.components %}
{% for da in component.discount_allocations %}
{% assign key = da.discount_application.title | append: da.discount_application.type %}
{% if da.discount_application.target_selection != 'all' and key == discount_key %}
{% assign discount_amount = discount_amount | plus: da.amount %}
{% assign discount_title = da.discount_application.title %}
{% endif %}
{% endfor %}
{% endfor %}
<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_title | upcase }}
(-{{ discount_amount | money }})
</span>
</span>
</p>
{% endfor %}
{% endif %}
</td>
<td class="order-list__parent_price-cell">
{% if original_line_price != final_line_price %}
<del class="order-list__item-original-price">{{ original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if final_line_price > 0 %}
{{ final_line_price | money }}
{% else %}
{{ 'notifications.views.mailers.notifications.discount_free' | t }}
{% endif %}
</p>
</td>
</tr>
{% if line_item_group.deliverable? == false %}
{% for component in line_item_group.components %}
{% if true %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
{% endfor %}
{% endif %}
</table>
</td>
</table>
{% if line_item_group.deliverable? %}
<td height="100%">
{% for component in line_item_group.components %}
<tr>
<td class="order-list__deliverable-item" height="100%" style="padding: 0;">
<table height="100%">
{% if false %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="nested-line-item-spacer-cell" style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
{% endfor %}
</td>
{% endif %}
</td>
</tr>
{% else %}
{% for component in line_item_group.components %}
{% comment %} Skip child add-ons since they will be rendered under the parent line item {% endcomment %}
{% unless component.nested_line_child? %}
{% assign is_parent = false %}
{% assign is_nested_line_parent = component.nested_line_parent? %}
{% if component.bundle_parent? or component.nested_line_parent? %}
{% assign is_parent = true %}
{% endif %}
{% if is_nested_line_parent %}
{% assign css_order_list_cell_nested_line_parent_class = 'order-list__parent-cell' %}
{% assign css_order_list_parent_image_cell_nested_line_parent_class = 'order-list__nested-parent-image-cell' %}
{% endif %}
<tr class="order-list__item">
<td class="order-list__item__cell {{ css_order_list_cell_nested_line_parent_class }}">
<table height="100%">
<td style="padding-bottom: 0px;">
<table height="100%">
<tr valign="top">
{% if false and is_parent %}
<td class="order-list__parent-image-cell {{ css_order_list_parent_image_cell_nested_line_parent_class }}">
{% if component.image %}
<img src="{{ component | 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" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% if component.image %}
<img src="{{ component | 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 %}
</td>
{% endif %}
</tr>
{% if is_nested_line_parent %}
<tr height="100%">
<td style="padding: 0px;" height="100%">
<table height="100%">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div class="nested-line-item-spacer"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
{% if component.presentment_title %}
{% assign line_title = component.presentment_title %}
{% elsif component.title %}
{% assign line_title = component.title %}
{% else %}
{% assign line_title = component.product.title %}
{% endif %}
{% if line.quantity < component.quantity %}
{% capture line_display %}
{{ line.quantity }} of {{ component.quantity }}
{% endcapture %}
{% else %}
{% assign line_display = component.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if component.variant.title != 'Default Title' and is_parent == false %}
<span class="order-list__item-variant">{{ component.variant.title }}</span><br/>
{% elsif component.variant.title != 'Default Title' and component.nested_line_parent? %}
<span class="order-list__item-variant">{{ component.variant.title }}</span><br/>
{% elsif component.variant.title != 'Default Title' and component.bundle_parent? and false == false %}
<span class="order-list__item-variant">{{ component.variant.title }}</span><br/>
{% endif %}
{% if false %}
{% for child_line in component.bundle_components %}
{% if true %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_display }} × {{ item_title }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in component.groups %}
{% if group.deliverable? %}
<span class="order-list__item-variant">For: {{ group.display_title }}</span><br/>
{% else %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endif %}
{% endfor %}
{% endif %}
{% if component.gift_card and component.properties["__shopify_send_gift_card_to_recipient"] %}
{% for property in component.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 component.selling_plan_allocation %}
<span class="order-list__item-variant">{{ component.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if component.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 false and is_parent %}
<td class="order-list__parent-price-cell">
{% else %}
<td class="order-list__price-cell">
{% endif %}
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% if component.unit_price_measurement %}
<div class="order-list__unit-price">
{{- component.unit_price | unit_price_with_measurement: component.unit_price_measurement -}}
</div>
{% endif %}
{% else %}
Free
{% endif %}
</p>
</td>
{% if component.nested_line_parent? %}
{% for child_line in component.nested_lines %}
{% if false %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="nested-line-item-spacer-cell"style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_title }} × {{ item_display }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% endif %}
</table>
</td>
</tr>
{% endunless %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</table>
{% unless forloop.last %}
<hr class="order-list__delivery-method-type-separator">
{% endunless %}
{% endif %}
{% endfor %}
{% else %}
<table class="row">
{% for line in subtotal_line_items %}
{% if line.groups.size == 0 %}
{% comment %} Skip child add-ons since they will be rendered under the parent line item {% endcomment %}
{% unless line.nested_line_child? %}
{% assign is_parent = false %}
{% assign is_nested_line_parent = line.nested_line_parent? %}
{% if line.bundle_parent? or line.nested_line_parent? %}
{% assign is_parent = true %}
{% endif %}
{% if is_nested_line_parent %}
{% assign css_order_list_cell_nested_line_parent_class = 'order-list__parent-cell' %}
{% assign css_order_list_parent_image_cell_nested_line_parent_class = 'order-list__nested-parent-image-cell' %}
{% endif %}
<tr class="order-list__item">
<td class="order-list__item__cell {{ css_order_list_cell_nested_line_parent_class }}">
<table height="100%">
<td style="padding-bottom: 0px;">
<table height="100%">
<tr valign="top">
{% if false and is_parent %}
<td class="order-list__parent-image-cell {{ css_order_list_parent_image_cell_nested_line_parent_class }}">
{% 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" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% 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 %}
</td>
{% endif %}
</tr>
{% if is_nested_line_parent %}
<tr height="100%">
<td style="padding: 0px;" height="100%">
<table height="100%">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div class="nested-line-item-spacer"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
{% if line.presentment_title %}
{% assign line_title = line.presentment_title %}
{% elsif line.title %}
{% assign line_title = line.title %}
{% else %}
{% assign line_title = line.product.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' and is_parent == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.nested_line_parent? %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% elsif line.variant.title != 'Default Title' and line.bundle_parent? and false == false %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
{% comment %} Keystone Options — standard line item properties (start) {% endcomment %}
{% 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 %}
{% comment %} Keystone Options — standard line item properties (end) {% endcomment %}
{% if false %}
{% for child_line in line.bundle_components %}
{% if true %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_display }} × {{ item_title }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in line.groups %}
{% if group.deliverable? %}
<span class="order-list__item-variant">For: {{ group.display_title }}</span><br/>
{% else %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endif %}
{% 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 false and is_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 }}
{% if line.unit_price_measurement %}
<div class="order-list__unit-price">
{{- line.unit_price | unit_price_with_measurement: line.unit_price_measurement -}}
</div>
{% endif %}
{% else %}
Free
{% endif %}
</p>
</td>
{% if line.nested_line_parent? %}
{% for child_line in line.nested_lines %}
{% if false %}
{% assign css_class = 'order-list__bundle-item' %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign css_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign css_class = 'order-list__deliverable-item_abandoned' %}
{% assign css_image_class = 'order-list__image-cell--nested-line-item' %}
{% assign css_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<table height="100%">
<tr class="order-list__item">
<td class="{{ css_class }}" height="100%">
<table height="100%">
<td class="nested-line-item-spacer-cell"style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ css_image_class }}">
{% if child_line.image %}
<img src="{{ child_line | img_url: 'compact_cropped' }}" 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="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ css_description_class }}">
{% if child_line.product.title %}
{% assign item_title = child_line.product.title %}
{% else %}
{% assign item_title = child_line.title %}
{% endif %}
{% assign item_display = child_line.quantity %}
<span class="order-list__item-title">{{ item_title }} × {{ item_display }}</span><br>
{% if child_line.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ child_line.variant.title }}</span><br/>
{% endif %}
{% if child_line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ child_line.selling_plan_allocation.selling_plan.name }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% endif %}
</table>
</td>
</tr>
{% endunless %}
{% endif %}
{% endfor %}
{% for line_item_group in line_item_groups %}
{% assign final_line_price = 0 %}
{% assign original_line_price = 0 %}
{% assign discount_keys_str = "" %}
{% assign parent_line_item = nil %}
{% if line_item_group.deliverable? == false %}
{% assign line_item_group_class = "order-list__item__cell" %}
{% for component in line_item_group.components %}
{% assign final_line_price = final_line_price | plus: component.final_line_price %}
{% assign original_line_price = original_line_price | plus: component.original_line_price %}
{% for da in component.discount_allocations %}
{% if da.discount_application.target_selection != 'all' %}
{% assign discount_key = da.discount_application.title | append: da.discount_application.type %}
{% assign discount_keys_str = discount_keys_str | append: discount_key | append: "," %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if line_item_group.deliverable? %}
{% assign parent_line_item = line_item_group.parent_sales_line_item %}
{% assign final_line_price = parent_line_item.final_line_price %}
{% assign original_line_price = parent_line_item.original_line_price %}
{% assign line_item_group_class = "order-list__parent_item__cell" %}
{% assign padding_bottom_none_class = "padding-bottom-none" %}
{% endif %}
{% assign discount_keys = discount_keys_str | split: "," | uniq %}
<tr class="order-list__item">
<td class="{{ line_item_group_class }}" style="padding: 15px 0 0px 1px;">
<table height="100%">
<td class="order-list__parent-image-cell">
<table height="100%">
<tr>
<td class="{{ padding_bottom_none_class }}" valign="top">
{% if parent_line_item and parent_line_item.image %}
<img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% elsif line_item_group.image %}
<img src="{{ line_item_group | 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="30" height="30" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
</tr>
{% if line_item_group.deliverable? == true %}
<tr height="100%">
<td height="100%" class="parent-vertical-line__cell">
<table height="100%" style="width: auto;">
<tr>
<td height="100%" class="nested-line-item-spacer-cell">
<div style="width: 6px;"></div>
</td>
<td height="100%" class="parent-vertical-line__cell">
<div class="parent-vertical-line__content"></div>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</td>
<td class="order-list__product-description-cell">
<table>
<tr>
<td class="order-list__product-description-cell" colspan="2">
<span class="order-list__item-title">{{ line_item_group.display_title }} × {{ line_item_group.quantity }}</span><br/>
{% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
{% endif %}
{% if line_item_group.deliverable? %}
{% if parent_line_item.discount_allocations %}
{% for discount_allocation in parent_line_item.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 %}
{% else %}
{% for discount_key in discount_keys %}
{% assign discount_amount = 0 %}
{% for component in line_item_group.components %}
{% for da in component.discount_allocations %}
{% assign key = da.discount_application.title | append: da.discount_application.type %}
{% if da.discount_application.target_selection != 'all' and key == discount_key %}
{% assign discount_amount = discount_amount | plus: da.amount %}
{% assign discount_title = da.discount_application.title %}
{% endif %}
{% endfor %}
{% endfor %}
<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_title | upcase }}
(-{{ discount_amount | money }})
</span>
</span>
</p>
{% endfor %}
{% endif %}
</td>
<td class="order-list__parent_price-cell">
{% if original_line_price != final_line_price %}
<del class="order-list__item-original-price">{{ original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if final_line_price > 0 %}
{{ final_line_price | money }}
{% else %}
{{ 'notifications.views.mailers.notifications.discount_free' | t }}
{% endif %}
</p>
</td>
</tr>
{% if line_item_group.deliverable? == false %}
{% for component in line_item_group.components %}
{% if true %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if false %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
{% endfor %}
{% endif %}
</table>
</td>
</table>
{% if line_item_group.deliverable? %}
<td height="100%">
{% for component in line_item_group.components %}
<tr>
<td class="order-list__deliverable-item" height="100%" style="padding: 0;">
<table height="100%">
{% if false %}
{% assign order_list_item_class = "order-list__bundle-item" %}
{% assign css_image_class = 'order-list__image-cell' %}
{% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
{% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
{% if forloop.last %}
{% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
{% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
{% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
{% endif %}
{% endif %}
<tr height="100%">
<td class="nested-line-item-spacer-cell" style="padding: 1px;">
<div class="nested-line-item-spacer"></div>
</td>
<td class="curved-line-cell-container" valign="top">
<div style="width: 0px;">
<table>
<tr>
<td class="{{ css_curved_line_cell_container_cell__no_padding_class }}" style="mso-padding-right-alt: 10px;">
<div class="curved-line-cell-container__top-spacer {{ css_curved_line_cell_container_class }}"></div>
</td>
</tr>
<tr>
<td class="curved-line-cell-container__curvedLine-cell">
<div class="curved-line-cell-container__curvedLine-cell__curvedLine"></div>
</td>
</tr>
</table>
</div>
</td>
<td class="vertical-line" height="100%">
<div class="vertical-line__content {{ css_hide_vertical_line_class }}"></div>
</td>
<td class="nested-line-item-spacer-cell--right">
<div class="nested-line-item-spacer"></div>
</td>
<td class="{{ order_list_item_class }} {{ css_image_class }}" valign="top">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="20" height="20" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="{{ order_list_product_description_class }}" valign="top">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% if line_item_group.deliverable? %}
<span class="order-list__item-title">{{ component_title }} × {{ component.quantity }}</span>
{% else %}
<span class="order-list__item-title">{{ component.quantity }} × {{ component_title }}</span>
{% endif %}
<br>
{% if component.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}
{% if line_item_group.deliverable? %}
{% if component.discount_allocations %}
{% for discount_allocation in component.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 %}
{% endif %}
</td>
{% if line_item_group.deliverable? %}
<td class="order-list__price-cell">
{% if component.original_line_price != component.final_line_price %}
<del class="order-list__item-original-price">{{ component.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if component.final_line_price > 0 %}
{{ component.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
{% endfor %}
</td>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
{% endif %}
<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 %}
{% assign discount_value_price = discount_application.total_allocated_amount %}
{% 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 %}
{% assign shipping_type_total = 0 %}
{% assign shipping_type_original_total = 0 %}
{% for method in shipping_methods %}
{% assign shipping_type_total = shipping_type_total | plus: method.price_with_discounts %}
{% assign shipping_type_original_total = shipping_type_original_total | plus: method.original_price %}
{% endfor %}
{% assign pickup_type_total = 0 %}
{% for method in pickup_methods %}
{% assign pickup_type_total = pickup_type_total | plus: method.price_with_discounts %}
{% endfor %}
{% assign render_fallback_delivery_subtotal = false %}
{% if shipping_methods.size == 0 and pickup_methods.size == 0 %}
{% assign render_fallback_delivery_subtotal = true %}
{% endif %}
{% if delivery_method_for_subtotal == 'pick-up' and pickup_methods.size == 0 %}
{% assign render_fallback_delivery_subtotal = true %}
{% endif %}
{% if shipping_methods.size > 0 and render_fallback_delivery_subtotal != true %}
{% if has_shipping_discount %}
{% if free_shipping == true or shipping_type_total == 0 %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<del>{% if shipping_type_original_total != 0 %}{{ shipping_type_original_total | money }}{% endif %} </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">
<strong>{{ shipping_type_total | 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 }}
{% if discount_value_price != 0 %}
(-{{ discount_value_price | money }})
{% endif %}
</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_type_total | money }}</strong>
</td>
</tr>
{% endif %}
{% endif %}
{% if pickup_methods.size > 0 %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Pickup</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ pickup_type_total | money }}</strong>
</td>
</tr>
{% if has_shipping_discount and shipping_methods.size == 0 %}
<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 }}
{% if discount_value_price != 0 %}
(-{{ discount_value_price | money }})
{% endif %}
</span>
</span>
</p>
</td>
</tr>
{% endif %}
{% endif %}
{% if render_fallback_delivery_subtotal %}
{%- capture fallback_delivery_title -%}
{%- if delivery_method_for_subtotal == 'pick-up' -%}
Pickup
{%- else -%}
Shipping
{%- endif -%}
{%- endcapture -%}
{% if has_shipping_discount %}
{% if free_shipping == true or shipping_price == 0 %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ fallback_delivery_title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<del>{% if shipping_price != 0 %}{{ shipping_price | money }}{% endif %} </del>
<strong>Free</strong>
</td>
</tr>
{% else %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ fallback_delivery_title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<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 }}
{% if discount_value_price != 0 %}
(-{{ discount_value_price | money }})
{% endif %}
</span>
</span>
</p>
</td>
</tr>
{% else %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ fallback_delivery_title }}</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 %}
{% assign authorized_amount = 0 %}
{% assign has_refunds = false %}
{% assign shopify_pay_captured = false %}
{% assign shop_cash_offers_captured = false %}
{% for transaction in transactions %}
{% if transaction.kind == "sale" or transaction.kind == "capture" %}
{% if transaction.status == "success" %}
{% if transaction.payment_details.credit_card_company %}
{% assign shopify_pay_captured = true %}
{% endif %}
{% if transaction.gateway == "shop_cash" or transaction.gateway == "shop_offer" %}
{% assign shop_cash_offers_captured = true %}
{% endif %}
{% 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 %}
{% endif %}
{% elsif transaction.kind == "authorization" %}
{% if transaction.status == "success" %}
{% assign authorized_amount = authorized_amount | plus: transaction.amount %}
{% endif %}
{% elsif transaction.kind == "refund" or transaction.kind == "change" %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | minus: transaction.amount %}
{% assign has_refunds = true %}
{% if transaction.amount_rounding != nil %}
{% assign net_transaction_amount_rounding = net_transaction_amount_rounding | minus: transaction.amount_rounding %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% # Add shop cash/offer transactions to totals if shopify pay is captured and shop cash/offer is not captured yet %}
{% if shopify_pay_captured == true and shop_cash_offers_captured == false %}
{% for transaction in transactions %}
{% if transaction.status == "success" %}
{% if transaction.kind == "authorization" and transaction.gateway == "shop_cash" or transaction.gateway == "shop_offer" %}
{% 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 %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
<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>
{% if total_discounts > 0 %}
<tr class="subtotal-line">
<td></td>
<td class="subtotal-line__value total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</td>
</tr>
{% endif %}
<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 %}
{% elsif total_outstanding > 0 %}
{% assign next_amount_due = total_outstanding %}
{% 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>
{% if total_discounts > 0 and net_transaction_amount_rounding == 0 %}
<tr class="subtotal-line">
<td></td>
<td class="subtotal-line__value total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</td>
</tr>
{% endif %}
{% 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 total_discounts > 0 %}
<tr class="subtotal-line">
<td></td>
<td class="subtotal-line__value total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</td>
</tr>
{% endif %}
{% 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>{{ order.transactions | map: 'gateway_display_name' | uniq | join: ', ' }}</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%}
{% if transaction_amount == 0 and authorized_amount > 0 and has_refunds == false %}
{% else %}
<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 %}
{% endif %}
</table>
{% 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>
{% elsif shopify_pay_captured and shop_cash_offers_captured == false and transaction.kind == "authorization" and transaction.gateway == "shop_cash" or transaction.gateway == "shop_offer" %}
{% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
<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' and transaction.gateway != "shop_offer" %}
{% if transaction.payment_details.gift_card_last_four_digits %}
{% assign refund_method_title = transaction.payment_details.type %}
{% elsif transaction.payment_details.local_payment %}
{% assign refund_method_title = transaction.payment_details.payment_method_name %}
{% 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 %}
{% if transaction.gateway == 'shopify_store_credit' %}
{% assign link_url = routes.account_profile_url %}
{% capture link_text %}View{% endcapture %}
{% else %}
{% assign link_url = nil %}
{% assign link_text = nil %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | replace: '_', ' ' | capitalize }}</small>
<a href="{{ link_url }}" class="small">{{ link_text }}</a>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | plus: amount_rounding | times: -1 | 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 %}
{% capture payment_section_body %}
{% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false %}
{% 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 transactions.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.payment_icon_source | 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.type == "shop_pay_installments" and transaction.payment_details.credit_card_company == "unknown" %}
<img src="{{ 'notifications/shop-pay.svg' | shopify_asset_url }}" class="customer-info__item-shop-pay">
<br>
<span>Paid with Shop Pay installments</span><br>
{% elsif transaction.payment_details.type == "card" %}
<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>
{% if transaction.first_installment_amount %}
<span>{{ transaction.first_installment_amount | money }}/month for {{ transaction.installment_count }} months</span><br>
{% endif %}
{% elsif transaction.gateway_display_name == "Gift card" %}
<img src="{{ transaction.gateway_icon_source | payment_type_img_url }}" class="customer-info__item-credit" height="24">
ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>
    Gift card balance - <b>{{ transaction.payment_details.gift_card.balance | money }}</b>
{% elsif transaction.payment_details.local_payment? %}
<img src="{{ transaction.payment_details.payment_icon_source | payment_type_img_url }}" class="customer-info__item-credit" height="24">
<span>{{ transaction.payment_details.payment_method_display_name }}</span><br>
{% elsif transaction.gateway_display_name != "Shop Cash" and transaction.gateway != "shop_offer" %}
{{ 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 %}
{% endcapture %}
{% assign show_payment_section = false %}
{% if b2b? %}{% assign show_payment_section = true %}{% endif %}
{% assign payment_section_body_stripped = payment_section_body | strip %}
{% if payment_section_body_stripped != "" %}{% assign show_payment_section = true %}{% endif %}
{% if show_payment_section %}
<td class="customer-info__item">
<h4>Payment</h4>
<p class="customer-info__item-content">
{{ payment_section_body }}
</p>
</td>
{% endif %}
</tr>
<tr>
{% if requires_shipping and shipping_address %}
{% if shipping_methods.size > 0 %}
<td class="customer-info__item">
<h4>Shipping method</h4>
{%- assign unique_shipping_titles = shipping_methods | map: 'title' | uniq -%}
<p>
{%- if unique_shipping_titles.size == 1 and delivery_promise_branded_shipping_line -%}
{{ delivery_promise_branded_shipping_line }}
{%- else -%}
{%- for shipping_title in unique_shipping_titles -%}
{{ shipping_title }}{% unless forloop.last %}<br>{% endunless %}
{%- endfor -%}
{%- endif -%}
</p>
</td>
{% elsif 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 -%}Back up first
Copy your current order confirmation template to a text file before replacing it. If anything goes wrong, you can restore the original from Settings → Notifications → Order confirmation → Revert to default.
What the Template Does
Shopify repeats the same HTML structure across multiple conditional branches (split cart, delivery agreements, bundles, and so on). The Keystone template adds 11 property blocks in the right places so options display regardless of which branch your order uses.
Each block is wrapped in searchable comments:
liquid
{% comment %} Keystone Options — standard line item properties (start) {% endcomment %}
...
{% comment %} Keystone Options — standard line item properties (end) {% endcomment %}liquid
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
...
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}Search the file for Keystone Options to find every insertion point.
Property Block Reference
Block Type A — Standard Line Items (line.properties)
When: A product has options but no priced cart-transform expansion (a normal single line item).
Skips: Blank values and any property name starting with _ (internal Keystone keys).
| # | Lines | Template path | Search nearby |
|---|---|---|---|
| A1 | 428–446 | Split cart | {% if delivery_method_types.size > 1 %} → subtotal_line_items |
| A2 | 1185–1203 | Delivery agreement | delivery_agreement.non_parent_line_items |
| A3 | 2603–2621 | Non-split (most stores) | {% else %} after delivery loop → subtotal_line_items |
Block Type B — Bundle Components (component.properties)
When: Cart transform expands priced options (+ Options bundle with child lines).
Skips: Same rules as Block Type A.
| # | Lines | Template path | Search nearby |
|---|---|---|---|
| B1 | 855–873 | Split cart bundle | line_item_groups → deliverable? == false component loop |
| B2 | 991–1009 | Split cart bundle | Same group → order-list__deliverable-item nested loop |
| B3 | 1609–1627 | Delivery bundle | delivery_agreement.line_item_groups → deliverable false |
| B4 | 1745–1763 | Delivery bundle | Same → deliverable nested loop |
| B5 | 1993–2011 | Delivery bundle (alt) | delivery_agreement == line_item_group.parent_sales_line_item.delivery_agreement |
| B6 | 2127–2145 | Delivery bundle (alt) | Same section → deliverable nested loop |
| B7 | 3024–3042 | Non-split (most stores) | {% else %} → line_item_groups → deliverable false |
| B8 | 3158–3176 | Non-split bundle | Same → deliverable nested loop |
Line numbers
Line numbers match the current template file. If you edit the template, search for Keystone Options instead of relying on line numbers.
Block Snippets
Use these snippets when manually patching an existing template instead of replacing the full file.
Type A — Standard line item properties
Paste after the variant title, before {% if false %}:
liquid
{% comment %} Keystone Options — standard line item properties (start) {% endcomment %}
{% 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 %}
{% comment %} Keystone Options — standard line item properties (end) {% endcomment %}Type B — Bundle component properties
Paste after the component variant title:
liquid
{% comment %} Keystone Options — bundle component properties (start) {% endcomment %}
{% for property in component.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 %}
{% comment %} Keystone Options — bundle component properties (end) {% endcomment %}What We Did Not Change
The Keystone template only adds property rendering blocks. These sections are unchanged from Shopify's default:
- Original Shopify gift card property blocks (still behind the
gift_cardcondition) - Layout, pricing, shipping, customer info, and payment sections
Troubleshooting
| Symptom | Likely cause |
|---|---|
| Properties on simple products missing | Block Type A not in the path your order uses — check A1, A2, or A3 |
| Properties on + Options bundles missing | Block Type B not in path — check B7 for typical stores |
_key_* showing in email | Filter broken — blocks must skip names starting with _ |
| Gift card fields duplicated | New Block A and the original gift card block both render — add unless line.gift_card to Block A if needed |
Verify the template is active
- Place a test order with options on a simple product and on a + Options bundle
- In Settings → Notifications → Order confirmation, click Send test
- Confirm selected options appear under each line item
Properties show in admin but not email
This usually means the order is hitting a template branch without a Keystone block. Search your active template for Keystone Options — you should find 11 start/end comment pairs (3 Type A, 8 Type B).
Related
- Getting Started — verify options appear in cart and checkout
- Price Add-Ons — how priced options become bundle line items
- Legacy Theme Installation — manual theme setup for older themes