How to make the tracking number a clickable tracking link in Shopify notification emails

In a Shopify notification email you can show the shipment tracking number as a clickable link, so the customer can open the carrier's tracking page directly from the email instead of copying the number somewhere else.

Shopify already provides the variables you need:

• fulfillment.tracking_number and fulfillment.tracking_numbers
• fulfillment.tracking_url and fulfillment.tracking_urls

The main principle: do not build the tracking link by hand if Shopify already gives you tracking_url.

Where to find the setting

In your Shopify admin, go to Settings → Notifications → Customer notifications → Shipping confirmation, then choose Edit code. The tracking number is rendered in the Email body (HTML) field.

1. A single tracking number

The simplest version:

{% if fulfillment.tracking_number %}
  <p>
    Tracking number:
    {% if fulfillment.tracking_url %}
      <a href="{{ fulfillment.tracking_url }}" target="_blank">
        {{ fulfillment.tracking_number }}
      </a>
    {% else %}
      {{ fulfillment.tracking_number }}
    {% endif %}
  </p>
{% endif %}

What this does:

• if Shopify has a tracking URL, the tracking number becomes clickable
• if there is no URL, the tracking number is shown as plain text, so the customer still sees it
• target="_blank" opens the carrier's tracking page in a new tab or window

2. Several tracking numbers in one fulfilment

A single fulfilment can contain more than one tracking number. In that case, loop through the arrays:

{% if fulfillment.tracking_numbers.size > 0 %}
  <p class="tracking_number_group">
    {% for tracking_number in fulfillment.tracking_numbers %}

      {% assign tracking_link = fulfillment.tracking_urls[forloop.index0] %}

      {% if tracking_link %}
        <a href="{{ tracking_link }}" target="_blank">
          {{ tracking_number }}
        </a>
      {% else %}
        {{ tracking_number }}
      {% endif %}

      <br>
    {% endfor %}
  </p>
{% endif %}

It is important to use the same index in both arrays. fulfillment.tracking_numbers[0] belongs together with fulfillment.tracking_urls[0], and so on. Using forloop.index0 keeps each number paired with its own link.

3. A tracking number is not a URL

These two variables hold different values.

This is therefore wrong, because a tracking number is not an address:

<a href="{{ fulfillment.tracking_number }}">
  {{ fulfillment.tracking_number }}
</a>

The correct version puts the URL in the link and the number in the text:

<a href="{{ fulfillment.tracking_url }}">
  {{ fulfillment.tracking_number }}
</a>

If no tracking URL is available

Not every carrier hands a tracking URL back to Shopify. When fulfillment.tracking_url is empty, the snippets above fall back to showing the number on its own, which is the intended behaviour.

For parcels sent with the EAS DDP solution, tracking is followed through the EAS tracking portal at https://tracking.easproject.com using the S10 number. See How to track EAS DDP parcels and share tracking with your customer for how to share that with your customer.

If you need help with your notification templates, contact us at support@easproject.com.