Order confirmation email (options)

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

Automatic

The app has an integrated email editor that can automatically edit the Shopify email templates to include the product options and the live preview image.  

In the App > Settings > Online Store settings section:

Navigate to Shopify Templates:

In the editor, click on the Supported templates links to open the settings in your Shopify store:

Select and copy the full HTML Email body:

Paste into the editor in the app:

The editor automatically updates the content and provides the updated version, then Copy to clipboard:

Paste it back in Shopify:

Email test

If you want to test the updated email without creating a new order, you can visit a previous order (one that already has custom options) and at the bottom Timeline, click on View email for the order confirmation email:

Select Resend email, and select Yourself as the recipient:

Revert to default

If the email is not showing as expected, it might be due to your previous email template having a different structure. In this case, it's recommended to first "Revert to default" and then copy the content back into the app, let it convert again, and copy back into Shopify:

Manual

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

order-confirmation.bundle.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