Set up your Shopify order confirmation emails

You need to edit your Shopify order confirmation emails to properly display the image of the customized product and summary.

Accessing the order confirmation template

  1. Go to your admin panel (mystore.myshopify.com/admin).

  2. Click on Settings, at the bottom left.

3. Click on Notifications.

4. Click on Order confirmation.

Show customized product image

  1. Find where the image is displayed. Search for the following lines of code :

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

2. Replace the previous code block with :

<td>
{% if line.image %}
{% if line.properties["_mczr_image"] %}
{% for property in line.properties %}
{% if property.first == '_mczr_image' %}
<img src="{{ property.last }}" align="left" width="60" height="60"
class="order-list__product-image"/>
<br/>
{% else %}
{% continue %}
{% endif %}
{% endfor %}
{% else %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60"
height="60" class="order-list__product-image"/>
{% endif %}
{% endif %}
</td>

3. Don't forget to save your changes at the top right of the order confirmation section.

Show summary

  1. Search for lines of code that are in the next block :

{% if line.variant_title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant_title }}</span><br/>
{% endif %}
<---INSERT NEXT CODE BLOCK HERE--->
{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}

2. Code to insert :

<ul>
{% for property in line.properties %}
{% unless property.first contains '_mczr' %}
<li>{{ property.first }}: {{ property.last }}</li>
{% endunless %}
{% endfor %}
</ul>

3. It should look like this when you are done:

{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
<ul>
{% for property in line.properties %}
{% unless property.first contains '_mczr' %}
<li>{{ property.first }}: {{ property.last }}</li>
{% endunless %}
{% endfor %}
</ul>
{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}

4. Don't forget to save your changes at the top right of the order confirmation section.