How can I add line item info under my products in the order confirmation email on Shopify?

By default, Shopify's order confirmation email doesn't display any line item properties or attributes attached to the products the customer purchased. These will already show in the checkout, but oftentimes you want to add this information to your order confirmation email as well.

To add this information to the order confirmation/thank you email, here are the steps:

Find the Order Confirmation Email Template

From the Shopify Admin, go to Settings > Notifications > Customer Notifications.

Find the Order confirmation email and click on Edit code to open the HTML template.

Edit the Order Confirmation Email Template

In the Email body (HTML), find where it has the product line item code by looking for this snippet:
{% if line.selling_plan_allocation %}
   <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}

Copy and paste this snippet underneath that:

{% 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>
        {{ property.last }}
      </dd>
    </div>
  {% endif %}
{% endfor %}

Don't forget to Save your changes.

Your order confirmation emails will now show all public line item properties attached to the product they purchased. In the case of Early Bird, this will include the Purchase Option (i.e. Pre-order or Back-order), and in some cases the Expected Ship Date (when using pre-orders).

Detecting if it's an Early Bird Pre-order/Back-order

To manually write a message for any Early Bird order (pre-order or back-order via our app), you can use the following code snippet underneath the product line item, and customize the wording shown in bold as needed:

{% if line.properties['_EarlyBird'] %}
  <span class="order-list__item-pre-order-type">This item is a pre-order.</span><br/>
{% endif %}