Order confirmation email (options)

If you want to show the options and live preview on the order confirmation email, follow the steps below.

The app saves all the selected options on the order line item properties.

You can edit your order confirmation email template to include the options.  

Template

In the Shopify Admin, click on settings in the bottom left corner:

Select "Notifications": 

Select "Customer notifications" > "Order confirmation":

Line items

Inside the template, look for the following line item code:

All of the following examples have to be added below this line: (at the desired location inside the table cell)

{% for line in subtotal_line_items %}

Options

To show all selected options you can use the following code:

{% for p in line.properties %}
    {% unless p.last == blank %}
        {% if p.first.first == '_' %}{% continue %}{%- endif -%}
        <span class="order-list__item-variant">{{ p.first }}: {{ p.last }}</span><br/>
    {% endunless %}
{% endfor %}

Preview image

If you have setup the live preview as described in:  Cart image live preview

Then you can show the live preview image on the product image using the following code:

{% if line.properties['_preview'] %}
   <img src="{{ line.properties['_preview'] }}" align="left" width="60" height="60" class="order-list__product-image">
{% elsif line.image %}
   <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}

Full template example

You can download the full template with the modifications: order-confirmation.liquid

Shopify - Shipping confirmation

For the standard shipping confirmation email, you can adjust the code from above to reference the right line item variable: line.line_item.properties

{% for p in line.line_item.properties %}    
   {% unless p.last == blank %}
        {% if p.first.first == '_' %}{% continue %}{%- endif -%}
        <span class="order-list__item-variant">{{ p.first }}: {{ p.last }}</span><br/>
    {% endunless %}
{% endfor %}

<!—- Preview —->
{% if line.line_item.properties['_preview'] %}
   <img src="{{ line.line_item.properties['_preview'] }}" align="left" width="60" height="60" class="order-list__product-image">
{% elsif line.line_item.image %}
   <img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}

Order Printer - Packing slip

To include the preview as the product image on the Order Printer app, you can use the following code:

<td class="product-image-wrapper">
          {% assign custom_preview = false %}
          {% for p in line_item.properties %}
              {% if p.first == "_preview" %}
                <img class="product-image" src="{{ p.last }}" />
                {% assign custom_preview = true %}
              {% endif %}
          {% endfor %}
          {% if custom_preview == false and line_item.image != blank %}
              <img class="product-image" src="{{ line_item.image | img_url: 'medium' }}"/>
          {% endif %}
</td>

Shopify - Packing slip

To list the custom options on the standard packing slip template, you can use the following code:

{% if line_item.sku != blank %}
    <span class="line-item-description-line">
       {{ line_item.sku }}
    </span>
{% endif %}

{%- comment %} CUSTOM OPTIONS {%- endcomment %}
{% for p in line_item.properties %}
     {% unless p.last == blank %}
     {% if p.first.first == '_' %}{% continue %}{%- endif -%}
        <span class="line-item-description-line">{{ p.first }}: {{ p.last }}</span><br/>
     {% endunless %}
{% endfor %}

Note: external images are not allowed on this template.  

You can download the full template with the modifications: packing-slip.liquid