Customizing your transactional emails is a great way to enhance your customer's experience experience

✏️ Editing Shopify Emails

Tip: Checkout Shopify's official documentation

By default, Shopify will send several transactional emails to a customer during the lifecycle of an order.

Order Confirmation
Shipment Confirmation
Out for Delivery*
Delivered*

You can find these emails in the Shopify Admin > Settings > Notifications.

Without any customization, these emails look like this:

*These emails can be disabled on any Shopify Account, learn more

Add a Wonderment link - Storefront Tracking (Most Common)

Tip If your Tracking Page URL looks like this:

https://storeURL.com/pages/tracking?search=

and the page was built within your Shopify editor, you have a Storefront Tracking Page.

Place this code at the top of the email. Make sure to update the variable 'tracking-page' with the handle of the Wonderment Tracking Page.

{%comment%} REPLACE 'tracking-page' with your page handle {% endcomment %}
{% assign tp_handle = 'tracking-page' %}
{% assign tracking_page = shop.url | append:'/pages/' | append: tp_handle | append:'?search=' | append: order_name | replace:'#','' %}

Then replace the links in the body of the email with:

{{ tracking_page }}

Let's go through the lines above one by one:

Line	Purpose
{%comment%} REPLACE 'tracking-page' with your page handle {% endcomment %}	This is a comment to let you know what elements need to be replaced.
{% assign tp_handle = 'tracking-page' %}	Replace 'tracking-page' with the handle of your tracking page. The handle is highlighted in the example below: https://storeURL.com/pages/tracking?search=
{% assign tracking_page = shop.url \| append:'/pages/' \| append: tp_handle \| append:'?search=' \| append: order_name \| replace:'#','' %}	This tells the email to combine all of the elements into your own branded tracking page!
{{ tracking_page }}	Replace the button links in your Shopify Notifications with this variable to direct customers to the tracking page. {{ fulfillment.tracking_url }} is an example of what your button link may look like.

Delete Table

- Column

+ Column

+ Row

- Row

Add a Wonderment link - Wonderment Tracking Page Editor (Legacy)

Tip: If your Tracking Page URL looks like this: https://storeURL.com/apps/wonderment/tracking?search= and the page was built within the Wonderment app, you have the Wonderment Tracking Page Editor.

Create a variable to use in your email template

{% assign tracking_page = shop.url | append:'/apps/wonderment/tracking?search=' | append: order_name | replace:'#','' %}

Now use {{ tracking_page }} anywhere in the email template to link to the wonderment tracking page.

You may want to update the link in several places

{% if fulfillment.tracking_numbers.size > 0 %}
  <p class="disclaimer__subtext">
    <br/>
    {% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
      {{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
    {% elsif fulfillment.tracking_numbers.size == 1 %}
      Tracking number: {{ fulfillment.tracking_numbers.first }}
    {% else %}
      Tracking numbers:<br />
      {% for tracking_number in fulfillment.tracking_numbers %}
        {{ tracking_number }}<br />
      {% endfor %}
    {% endif %}
  </p>
{% endif %}

UPDATE VIDEO FILE:

✉️ Update Shopify's notification emails

✏️ Editing Shopify Emails

Add a Wonderment link - Storefront Tracking (Most Common)

Add a Wonderment link - Wonderment Tracking Page Editor (Legacy)