NOTE

The code in the following tutorial may differ slightly depending on your Shopify theme. If you are not familiar with coding, we highly recommend asking a Shopify web developer (such as HeyCarson or StoreTasker) for assistance.

Accessing the order confirmation template

Go to your Shopify admin mystore.myshopify.com/admin
Click on Settings (bottom left).
Click on Notifications.
Click Customer Notifications.
Click on Order confirmation.
Click on Edit code.

If you see a notice that your notification template doesn’t use the latest version released by Shopify, click Revert to default at the bottom of the page.
⚠️ This will update your template to the latest version but overwrite any custom changes. Make sure to save or copy your customizations beforehand.

First Steps

Press ctrl + F (cmd + F on Mac) and search for:

{% for line_item_group in line_item_groups %}

You will find this twice. Go to the second occurrence.

Displaying the customized product image

Search for the following lines of code:

            <tr>
              <td class="{{ padding_bottom_none_class }}" valign="top">
                {% if parent_line_item and parent_line_item.image %}
                  <img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
                {% elsif line_item_group.image %}
                  <img src="{{ line_item_group | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
                {% else %}
                  <div class="order-list__no-image-cell">
                    <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="30" height="30" class="order-list__no-product-image"/>
                  </div>
                {% endif %}
              </td>
            </tr>

Replace it with:

            <tr>
              <td class="{{ padding_bottom_none_class }}" valign="top">
                {% assign has_mczr_image = false %}
      
                {% if line_item_group.components %}
                  {% for component in line_item_group.components %}
                    {% if component.properties["_mczr_image"] %}
                      <img src="{{ component.properties["_mczr_image"] }}" align="left" width="60" height="60" class="order-list__product-image" />
                      {% assign has_mczr_image = true %}
                    {% else %}
                      {% continue %}
                    {% endif %}
                  {% endfor %}
                {% endif %}
      
                {% unless has_mczr_image %}
                  {% if parent_line_item and parent_line_item.image %}
                    <img src="{{ parent_line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
                  {% elsif line_item_group.image %}
                    <img src="{{ line_item_group | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
                  {% else %}
                    <div class="order-list__no-image-cell">
                      <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
                    </div>
                  {% endif %}
                {% endunless %}
              </td>
            </tr>

Save your changes (top bar).

Displaying the summary

After the customized product image code, scroll down and find this block:

              <td class="order-list__product-description-cell" colspan="2">
                <span class="order-list__item-title">{{ line_item_group.title }}&nbsp;&times;&nbsp;{{ line_item_group.quantity }}</span><br/>
                {% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
                  <span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
                {% endif %}

Add the following code after it:

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

Result:

              <td class="order-list__product-description-cell" colspan="2">
                <span class="order-list__item-title">{{ line_item_group.title }}&nbsp;&times;&nbsp;{{ line_item_group.quantity }}</span><br/>
                {% if line_item_group.variant and line_item_group.variant.title != 'Default Title' %}
                  <span class="order-list__item-variant">{{ line_item_group.variant.title }}</span>
                {% endif %}

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

Scroll down and find this block:

              {% for component in line_item_group.components %}

{% if true %}
  {% assign order_list_item_class = "order-list__bundle-item" %}
  {% assign css_image_class = 'order-list__image-cell' %}
  {% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
  {% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
  {% if false %}
    {% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
    {% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
    {% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
  {% endif %}
{% endif %}

<tr height="100%">

Insert this line after first line:

{% unless has_mczr_image %}

Result:

              {% for component in line_item_group.components %}
                {% unless has_mczr_image %}

{% if true %}
  {% assign order_list_item_class = "order-list__bundle-item" %}
  {% assign css_image_class = 'order-list__image-cell' %}
  {% assign order_list_product_description_class = 'order-list__product-description-cell' %}
{% else %}
  {% assign order_list_product_description_class = 'order-list__product-description-cell--nested-line-item' %}
  {% if false %}
    {% assign css_curved_line_cell_container_class = 'curved-line-cell-container__top-spacer-cell--show-border' %}
    {% assign css_hide_vertical_line_class = 'vertical-line__content--hide' %}
    {% assign css_curved_line_cell_container_cell__no_padding_class = 'curved-line-cell-container__cell--no-padding' %}
  {% endif %}
{% endif %}

<tr height="100%">

Scroll down to this part:

    </td>
    {% endif %}
</tr>

              {% endfor %}
            {% endif %}
          </table>

Insert this line after </tr>:

{% endunless %}

Result:

    </td>
    {% endif %}
</tr>

                {% endunless %}
              {% endfor %}
            {% endif %}
          </table>

Save your changes (top bar).

✅ All done! Your order confirmation template is now updated.

Setting up your Shopify order confirmation emails

Accessing the order confirmation template

First Steps

Displaying the customized product image

Displaying the summary

Related Articles