How to build Shopify’s canceled list functionality

As a Shopify user, you probably are already accustomed with an array of features that the eCommerce platform offers. It enables you to choose to have email notifications sent to you, your staff, or your customers. It also lets you send automated notifications to customers via email to confirm their order along with shipping updates.

In some cases, the order placed by the customer might be not be fulfilled completely due to the products being temporarily unavailable or unexpected demand surges.

Hence, it is imperative that you show these unavailable products in the same shipping confirmation email for clarity.

As Shopify does not offer this functionality, we built it so that eCommerce store owners could offer a better user experience to their customers –

Path – admin/email_templates/shipping_confirmation/edit

you can edit the following code as per your HTML structure.

{% comment %}For unfulfilled items {% endcomment %}
{% if fulfillment.item_count != item_count %} 
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Canceled items</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for item in line_items %}
{% assign found_item = false %}
{% for fulfilled_item in fulfillment.fulfillment_line_items %}
{% if item.id == fulfilled_item.line_item.id %}
{% assign found_item = true %}
{% unless item.quantity == fulfilled_item.quantity and line.fulfillment_status != 'fulfilled' %}
{% comment %}<td>{{ item.title }}: {{ item.quantity | minus: fulfilled_item.quantity }}</td>{% endcomment %}
{% endunless %}
{% endif %}
{% endfor %}
{% unless found_item %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if item.image %}
<img src="{{ item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if item.product.title %}
{% assign line_title = item.product.title %}
{% else %}
{% assign line_title = item.title %}
{% endif %}

{% if line.quantity < item.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ item.quantity }} {% endcapture %}
{% else %}
{% assign line_display = item.quantity  %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if item.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ item.variant.title }}</span><br/>
{% endif %}
{% if item.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if item.discount_allocations %}
{% for discount_allocation in item.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
{% endif %}
{% endfor %}
{% endif %}
</td>
</table>
</td>
</tr>  {% endunless %}
{% endfor %}
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
{% endif %}
{% comment %}For unfulfilled items {% endcomment %}

Click on ‘Save’ and you are done!

This functionality helps you maintain transparency, thus providing a better customer experience to your customers.

Should you need to develop a custom functionality for your business, get in touch with our experts at [email protected] or visit us at www.grazitti.com.