Accessing the order confirmation template

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

  2. Click on Settings, at the bottom left.

  3. Click on Notifications.

  4. Click on Order confirmation.

Displaying the 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. Save your changes at the top right of the order confirmation section.

Displaying the 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. Save your changes at the top right of the order confirmation section.

Did this answer your question?