Shopify notifications and storefront theme

The guide requires some basic knowledge of Liquid and HTML. If you need help, please get in touch with me.

Example use case

Let's assume your customer purchased a few trackable products from you. During the fulfilment process (e.g. order picking), you've added the serial numbers (or are using the unique item IDs provided by the app) and/or warranty duration/expiry. You would like to share this information with the customer when the items have been delivered or are in the progress of being delivered.

Since sold items of trackable ("track items" enabled) product variants are stored in order metafields, the information is accessible in other parts of Shopify. This guide will show you how to share item information via the "Shipping confirmation" email notification; learn more about notifications. However, the same principle applies to embedding metafields into other email or SMS notifications, your website's theme, and other apps supporting customisable templates with order metafields.

Unfortunately, this guide does not apply to order confirmation notifications since items are created after the order confirmation.

It also assumes that you are using default notifications. There may be some minor changes required for the customized notification templates.

Setup

It's recommended to run through this guide on a test store first.

Open the "Shipping confirmation" email notification in Shopify admin settings (Settings > Notifications > Shipping confirmation). In there, you should see the markup for the email body. Let's add some markup to display serial numbers and warranty information under each tracked line item.

In the email body, you should notice

{% for line in fulfillment.fulfillment_line_items %}

or similar (if you are not using the default template). This is our starting block. It loops through each line item and displays information about it.

Let's add some markup for the tracked lines under the product variant's title. You should see a code block that looks similar to the following:

{% if line.line_item.variant.title != 'Default Title' %}
   <span class="order-list__item-variant">
    {{ line.line_item.variant.title }}
   </span>
   <br/>
{% endif %}

Let's put the following code block right under:

{% assign tracked_line_items = order.metafields.serializer.properties.items | where: "lineItemId", line.line_item.id %}

{% if tracked_line_items.size > 0 %}
  {% assign sns = tracked_line_items | where: "serialNumber" | map: "serialNumber" %}
  {% if sns.size > 0 %}
    <small>
     Serial number(s): {{ sns | join: ", " }}
    </small>
  {% endif %}
  {% if tracked_line_items[0].warrantyDuration.value > 0 %}
      <small>
        Warranty duration: {{ tracked_line_items[0].warrantyDuration.value }} {{ tracked_line_items[0].warrantyDuration.unit }}(s)
      </small>
  {% endif %}
{% endif %}

The above snippet pulls the tracked items from the order metafields. If any serial numbers are populated for the line, it displays the "Serial number(s): " label and the serial numbers separated by a comma. It also displays the warranty duration for the line item if the value is set. It assumes that every tracked item uses the same warranty period and therefore picks the first one. Still, you could show the warranty durations of every item individually by looping through the tracked_line_items array.

Embed serial numbers in notifications

Tips

Serialize test order to preview

Unfortunately, the fake order in the preview is not serialized. Therefore, you would not be able to preview serial numbers or any other item information. To test the edited template, you need to serialize a test order and send a dummy notification.

Non-shipping notifications

If you're editing notification templates outside the "Shipping" section (e.g. "Order invoice"), you may need to replace the line.line_item.id with line.id. The variable line represents the shipping line in shipping notifications and the line item in other order notifications.

Auto-generated serial number

If you wish to display unique item IDs provided by the app, replace all "serialNumber" with "itemId" in the snippet above, e.g.

{% assign sns = tracked_line_items | where: "itemId" | map: "itemId" %}

Access item information in other parts of Shopify

To access serialized order items in other parts of Shopify (e.g. when editing your online store theme), you may need to add .value after the metafield's key, i.e. replace order.metafields.serializer.properties.items with order.metafields.serializer.properties.value.items.

Warranty expiry date

While the app only stores warranty duration, your liquid code could calculate an expiry date based on an order or shipping date (i.e. add duration to the date) using Liquid date arithmetic, e.g.

{% if item.warrantyDuration.value > 0 %}
        
  {% if item.warrantyDuration.unit == 'day' %}
    {% assign duration_in_seconds = day_in_seconds | times: item.warrantyDuration.value %}
  {% elsif item.warrantyDuration.unit == 'month' %}
    {% assign duration_in_seconds = month_in_seconds | times: item.warrantyDuration.value %}
  {% elsif item.warrantyDuration.unit == 'year' %}  
    {% assign duration_in_seconds = year_in_seconds | times: item.warrantyDuration.value %}  
  {% endif %}
        
  {% if duration_in_seconds %}
    <td class="last">{{ order.created_at | date: "%s" | plus: duration_in_seconds | date: "%Y-%m-%d" }}</td>
  {% endif %}
{% endif %}