By continuing to use our website, you consent to the use of cookies. Please refer our cookie policy for more details.

    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.

    blog-image

    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 info@grazitti.com or visit us at www.grazitti.com.

    Get in Touch

    Thanks for your request. We will get in touch with you shortly.