Add Tracking Clips to Your Store and Shipping Notifications
Platforms: All platforms
AfterShip Tracking’s Tracking clips feature is a step ahead in giving your customers the exceptional tracking experience they deserve to stay loyal to your brand. Unlike our branded tracking page, which allows shoppers to get real-time updates on their order journey on a completely personalized and on-brand portal, tracking clips allow the same experience without navigating your customers away from your website or email notifications to track their orders.
You can set up tracking clips on your AfterShip Tracking admin and add them to your website pages or email notifications.
What are tracking clips?
Webpage tracking clips
Email tracking clips
Add tracking clips to webpages
- On the order details page
- On the orders page
Add tracking clips to emails
- Shopify email notifications
- Klaviyo emails
Tracking clips are interactive elements that enhance the tracking experience by keeping customers informed about their shipment status. They can be seamlessly integrated into web pages or emails, providing customers with real-time order updates without requiring customers to leave the page or email.
The following types are supported for displaying tracking clips on webpages.
Popup: Displays shipment status in a pop-up window on any webpage, such as the orders or order details page.
Drawer: Shows shipment status in a drawer that can be added to webpages like the orders or order details pages.
The following types are supported for displaying tracking clips in emails.
Estimated delivery date (EDD): Highlights the estimated delivery date alongside a progress bar and status description.
Simple progress bar: Features a basic design showing the status description and a progress bar.
Locations: Displays the origin and destination of the shipment, with a status description and progress bar.
Dates: This shows the ship date, estimated delivery date, status description, and progress bar.
Plans: Enterprise Standard and Advanced
Before adding a tracking clip to any web page, you must create and customize a tracking clip based on your specific requirements.
You can create either a Pop-up or a Drawer clip, depending on the functionality and aesthetics of your store.
Navigate to Tracking pages, then Tracking clips in your AfterShip Tracking admin.
Selectthe type of page tracking clip you want.
Preview the tracking clips on the pop-up window before creating.
Click Select clip to set up and customize the chosen clip.
Give the tracking clip a name for easy reference. Naming convention comes in handy if you want to personalize tracking clips based on where you want to add them on your website.
For example, if you want to add a pop-up style tracking clip on your website’s order detail page, label it as Order Detail Page.
Once the tracking clip type is selected, you will land on the tracking clip editor, where you can personalize the content and appearance of your page clips.
Under this tab, you can adjust what and how the customer-facing content will be displayed.
Clip type: If you wish to change the tracking clip type, you can change it here.
Tabs for other items in order: If the customer’s order contains multiple items divided into multiple shipments. Activating this option enables customers to quickly switch between different packages in their order for full visibility and easy tracking.
a. If you embed the tracking clip into the orders or order details page, enable this tab to show split shipment visibility for multiple packages. If it's a single package, you can disable it.
b. The tabs are displayed only when you use order number as the lookup parameter. They will not appear if you use tracking number as the lookup parameter. To learn more about order lookup options on the branded tracking page, please refer to this article.
c. To display Tabs for other items in order, you must connect your store or use the AfterShip Commerce API to feed AfterShip with order resources.
Redirect package: Add a link to the carrier's website to enable customers to request address changes for their delivery.
Status descriptions: In this section, you can customize the title and name of the respective statuses. Once the order is updated to that particular status, the title and name will change accordingly.
a. Pre-ship status: Customize the title and name of the order’s pre-shipment status.
To show pre-shipment statuses, you must connect your store or use the AfterShip Commerce API to provide AfterShip with the order resources.
b. Shipment status: Edit the title and name to reflect the current shipment status.
c. Error titles and descriptions: Edit the title and name of the error statuses when the order is updated to expired or non-existent status.
Set the Size and Shape of the Pop-up or Drawer.
Modify the Font for the Estimated Delivery Date (EDD), Title, and Body text in your clips.
Once you're satisfied with the adjustments, click Save to apply the changes.
To create a tracking pop-up that opens when users click the Track button on your order details page, follow these steps:
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to store button for the clip you want to add.
Copy the code from the popup. We will use this code in the next steps.
The steps provided here are for Shopify Hydrogen, which is based on the Remix React framework. If you're using a different stack (Next.js, React, Vue, Svelte, etc.), some minor adjustments may be needed.
In your Shopify Hydrogen project, locate and open the app/root.tsx file. Then, insert the tracking clips SDK script tag within the <head> tag. This will be the first line of the code you copy.
Open the file that handles the order details, typically app/routes/account.orders.$id.tsx in a standard Hydrogen app. Add a “Track” button below the "View Order Status" button.
Bind the onClick handler for this button to open the tracking clip using the rest of the code you copied.
To add a pop-up for tracking details when users click the Track button on your orders page, follow these steps:
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to store button for the clip you want to add.
Copy the code from the popup. We will use this code in the next steps.
The following steps are for Shopify Hydrogen, which is based on the Remix React framework. If you're using a different stack (Next.js, React, Vue, Svelte, etc.), minor adjustments may be required.
In your Shopify Hydrogen project, open the app/root.tsx file and add the tracking clips SDK script tag to the <head> tag, which will be the first line of the code you copy.
Open the file that handles the order list, typically app/routes/account.orders._index.tsx in a standard Hydrogen app.
Add a Track button below the original View Order button and bind the onClick handler to open the tracking clip using the remaining code you copied.
Plans: All plans
Before adding a tracking clip to any email, you must create and customize a tracking clip based on your specific requirements. Currently, we support adding tracking clips to Shopify and Klaviyo email notifications.
You can create either an estimated delivery date, dates, locations, or a simple progress bar tracking clip. Based on your setup, these tracking clips will appear in your emails to keep customers up to date on their shipments.
Navigate to Tracking pages, then Tracking clips** in your AfterShip Tracking admin
Select the type of email tracking clip you want.
Preview the tracking clips on the pop-up window before creating.
Click Select clip to set up and customize the chosen clip.
Give the tracking clip a name for easy reference. Naming convention comes in handy if you want to personalize tracking clips based on the type of email notifications you want to add them to.
For example, if you want to add a Locations-style tracking clip to your Shopify email notifications, label it as Shopify order updates - Locations.
Once the tracking clip type is selected, you will land on the tracking clip editor, where you can personalize the content and appearance of your email clips.
Under this tab, you can adjust what and how the customer-facing content will be displayed.
EDD: Display the estimated delivery date and the date the order was delivered. Set the status from Disabled to Enabled.
Progress Bar: Choose the design and style of the progress bar you want to showcase. The progress bar visually represents the different stages of a shipment’s journey. You can choose
a. Dates: This will showcase the trajectory of the order from one point to another based on the date and the status.
b. Locations: This will showcase the trajectory of the order from one point to another based on the origin and the destination location.
c. Line: This will showcase the simple progress of the order depending upon the overall status of the order.
Status descriptions: In this section, you can customize the title and name of the respective statuses. Once the order is updated to that particular status, the title and name will change accordingly.
a. Pre-ship status: Customize the title and name of the order’s pre-shipment status.
To show pre-shipment statuses, you must connect your store or use the AfterShip Commerce API to provide AfterShip with the order resources.
b. Shipment status: Edit the title and name to reflect the current shipment status.
c. Error titles and descriptions: Edit the title and name of the error statuses when the order is updated to expired or non-existent status.
Set the Size and Color for the tracking clip.
Personalize the Font, Font size, Text color, and Alignment for the Estimated Delivery Date (EDD), progress bar, dates, or locations (based on the type you’ve selected) in your clips.
Once you're satisfied with the adjustments, click Save to apply the changes.
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to email button for the clip you want to include.
Copy the code from the popup, which we’ll use later.
The following instructions use Shopify notifications and Klaviyo as examples. If you're using a different platform, you may need to make minor adjustments to the code.
Navigate to your Shopify store > Settings > Notifications > Customer notifications.
The following emails are recommended for adding the AfterShip tracking clips:
Shipping confirmation
Shipping update
Out for delivery
Delivered
Click the Edit code button.
Add the Email clip as instructed below.
For Shipping confirmation, Shipping update, and Delivered emails, it’s recommended to place the clip above the original View your order button. (You can search for View your order to locate it.)
For the Out for delivery emails, place the clip above the original Track my shipment button. (Search for Track my shipment to find it.)
Preview and send a test email to check if the changes work correctly.
5 Save the changes once you’re satisfied with the results.
Guide your customers to the AfterShip branded tracking results page when they click the Track order button in Klaviyo Emails or SMS.
Go to Flows in your Klaviyo admin.
Open the email editor for your desired notification flow.
Add an email clip by dragging an HTML block into the editor.
Replace the HTML content with the code you copied.
Please note: In the <img src="https://username.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }}" alt="AfterShip Tracking Clips" width="100%"> replace "username" with your AfterShip Organization's Short name.
Go to your Organization settings in your AfterShip Tracking admin.
Move to Basic information and click Edit.
Copy the Short name and add it in the URL mentioned above.
Example: Based on the screenshot below, add "antiquevase" in the URL like this <img src="https://antiquevase.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }}" alt="AfterShip Tracking Clips" width="100%">
Preview and test your flow before saving the changes.
If your flow’s event data source is not AfterShip, the property name may differ from {{event.AllShipmentsInThisOrder.0.TrackingNumber|default:''}}. You’ll need to find the correct tracking number property name from your event’s property list.
Overview
AfterShip Tracking’s Tracking clips feature is a step ahead in giving your customers the exceptional tracking experience they deserve to stay loyal to your brand. Unlike our branded tracking page, which allows shoppers to get real-time updates on their order journey on a completely personalized and on-brand portal, tracking clips allow the same experience without navigating your customers away from your website or email notifications to track their orders.
You can set up tracking clips on your AfterShip Tracking admin and add them to your website pages or email notifications.
What you'll learn
What are tracking clips?
Webpage tracking clips
Email tracking clips
Add tracking clips to webpages
- On the order details page
- On the orders page
Add tracking clips to emails
- Shopify email notifications
- Klaviyo emails
What are tracking clips?
Tracking clips are interactive elements that enhance the tracking experience by keeping customers informed about their shipment status. They can be seamlessly integrated into web pages or emails, providing customers with real-time order updates without requiring customers to leave the page or email.
Webpage tracking clips
The following types are supported for displaying tracking clips on webpages.
Popup: Displays shipment status in a pop-up window on any webpage, such as the orders or order details page.
Drawer: Shows shipment status in a drawer that can be added to webpages like the orders or order details pages.
Email tracking clips
The following types are supported for displaying tracking clips in emails.
Estimated delivery date (EDD): Highlights the estimated delivery date alongside a progress bar and status description.
Simple progress bar: Features a basic design showing the status description and a progress bar.
Locations: Displays the origin and destination of the shipment, with a status description and progress bar.
Dates: This shows the ship date, estimated delivery date, status description, and progress bar.
Add tracking clips to webpages
Plans: Enterprise Standard and Advanced
Before adding a tracking clip to any web page, you must create and customize a tracking clip based on your specific requirements.
Step 1: Create tracking clips
You can create either a Pop-up or a Drawer clip, depending on the functionality and aesthetics of your store.
Navigate to Tracking pages, then Tracking clips in your AfterShip Tracking admin.
Selectthe type of page tracking clip you want.
Preview the tracking clips on the pop-up window before creating.
Click Select clip to set up and customize the chosen clip.
Give the tracking clip a name for easy reference. Naming convention comes in handy if you want to personalize tracking clips based on where you want to add them on your website.
For example, if you want to add a pop-up style tracking clip on your website’s order detail page, label it as Order Detail Page.
Step 2: Customize tracking clips
Once the tracking clip type is selected, you will land on the tracking clip editor, where you can personalize the content and appearance of your page clips.
1. Settings
Under this tab, you can adjust what and how the customer-facing content will be displayed.
Clip type: If you wish to change the tracking clip type, you can change it here.
Tabs for other items in order: If the customer’s order contains multiple items divided into multiple shipments. Activating this option enables customers to quickly switch between different packages in their order for full visibility and easy tracking.
a. If you embed the tracking clip into the orders or order details page, enable this tab to show split shipment visibility for multiple packages. If it's a single package, you can disable it.
b. The tabs are displayed only when you use order number as the lookup parameter. They will not appear if you use tracking number as the lookup parameter. To learn more about order lookup options on the branded tracking page, please refer to this article.
c. To display Tabs for other items in order, you must connect your store or use the AfterShip Commerce API to feed AfterShip with order resources.
Redirect package: Add a link to the carrier's website to enable customers to request address changes for their delivery.
Status descriptions: In this section, you can customize the title and name of the respective statuses. Once the order is updated to that particular status, the title and name will change accordingly.
a. Pre-ship status: Customize the title and name of the order’s pre-shipment status.
To show pre-shipment statuses, you must connect your store or use the AfterShip Commerce API to provide AfterShip with the order resources.
b. Shipment status: Edit the title and name to reflect the current shipment status.
c. Error titles and descriptions: Edit the title and name of the error statuses when the order is updated to expired or non-existent status.
2. Styles
Set the Size and Shape of the Pop-up or Drawer.
Modify the Font for the Estimated Delivery Date (EDD), Title, and Body text in your clips.
Once you're satisfied with the adjustments, click Save to apply the changes.
Step 3: Add clips to webpages
1. On the order details page
To create a tracking pop-up that opens when users click the Track button on your order details page, follow these steps:
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to store button for the clip you want to add.
Copy the code from the popup. We will use this code in the next steps.
The steps provided here are for Shopify Hydrogen, which is based on the Remix React framework. If you're using a different stack (Next.js, React, Vue, Svelte, etc.), some minor adjustments may be needed.
In your Shopify Hydrogen project, locate and open the app/root.tsx file. Then, insert the tracking clips SDK script tag within the <head> tag. This will be the first line of the code you copy.
html
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href={resetStyles}></link>
<link rel="stylesheet" href={appStyles}></link>
<Meta />
<Links />
<!-- Add the tracking clips SDK -->
<script src="https://username.aftership.com/tracking-clips/sdk.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>Open the file that handles the order details, typically app/routes/account.orders.$id.tsx in a standard Hydrogen app. Add a “Track” button below the "View Order Status" button.
Bind the onClick handler for this button to open the tracking clip using the rest of the code you copied.
jsx
<p>
<a target="_blank" href={order.statusPageUrl} rel="noreferrer">
View Order Status →
</a>
</p>
{/* Add a "Track" button */}
<button
style={{backgroundColor: '#000', color: '#fff', padding: '12px 20px', borderRadius: '8px', cursor: 'pointer'}}
onClick={() => {
// Initialize the tracking clips SDK
const clips = new window.AfterShipTrackingClips("9fa5dbe2799f4d129b555911b3a1a521");
// Open the tracking clip with lookup parameters
// Option 1: Look up by tracking number
// clips.open({trackingNumber: "YOUR_TRACKING_NUMBER"});
// Option 2: Look up by order number and email
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", email: "YOUR_EMAIL"});
// Option 3: Look up by order number and phone number
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", phoneNumber: "YOUR_PHONE_NUMBER"});
// Option 4: Look up by order number and postal code
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", postalCode: "YOUR_POSTAL_CODE"});
}}
>
Track
</button>2. On the orders page
To add a pop-up for tracking details when users click the Track button on your orders page, follow these steps:
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to store button for the clip you want to add.
Copy the code from the popup. We will use this code in the next steps.
The following steps are for Shopify Hydrogen, which is based on the Remix React framework. If you're using a different stack (Next.js, React, Vue, Svelte, etc.), minor adjustments may be required.
In your Shopify Hydrogen project, open the app/root.tsx file and add the tracking clips SDK script tag to the <head> tag, which will be the first line of the code you copy.
html
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href={resetStyles}></link>
<link rel="stylesheet" href={appStyles}></link>
<Meta />
<Links />
<!-- Add the tracking clips SDK -->
<script src="https://username.aftership.com/tracking-clips/sdk.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>Open the file that handles the order list, typically app/routes/account.orders._index.tsx in a standard Hydrogen app.
Add a Track button below the original View Order button and bind the onClick handler to open the tracking clip using the remaining code you copied.
<Link to={`/account/orders/${btoa(order.id)}`}>View Order → </Link>
{/* Add a "Track" button */}
<button
style={{backgroundColor: '#000', color: '#fff', padding: '12px 20px', borderRadius: '8px', cursor: 'pointer'}}
onClick={() => {
// bind handler to open a clip
// 1. initialize an SDK instance
const clips = new window.AfterShipTrackingClips(
"9fa5dbe2799f4d129b555911b3a1a521"
);
// 2. open a clip with look up parameters, you can choose your prefered option.
// option 1: look up by `trackingNumber`
// clips.open({trackingNumber: "YOUR_TRACKING_NUMBER"});
// option 2: look up by `orderNumber` and `email`
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", email: "YOUR_EMAIL"});
// option 3: look up by `orderNumber` and `phoneNumber`
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", phoneNumber: "YOUR_PHONE_NUMBER"});
// option 4: look up by `orderNumber` and `postalCode`
// clips.open({orderNumber: "YOUR_ORDER_NUMBER", postalCode: "YOUR_POSTAL_CODE"});
}}
>
Track
</button>Add tracking clips to emails
Plans: All plans
Before adding a tracking clip to any email, you must create and customize a tracking clip based on your specific requirements. Currently, we support adding tracking clips to Shopify and Klaviyo email notifications.
Step 1: Create tracking clips
You can create either an estimated delivery date, dates, locations, or a simple progress bar tracking clip. Based on your setup, these tracking clips will appear in your emails to keep customers up to date on their shipments.
Navigate to Tracking pages, then Tracking clips** in your AfterShip Tracking admin
Select the type of email tracking clip you want.
Preview the tracking clips on the pop-up window before creating.
Click Select clip to set up and customize the chosen clip.
Give the tracking clip a name for easy reference. Naming convention comes in handy if you want to personalize tracking clips based on the type of email notifications you want to add them to.
For example, if you want to add a Locations-style tracking clip to your Shopify email notifications, label it as Shopify order updates - Locations.
Step 2: Customize tracking clips
Once the tracking clip type is selected, you will land on the tracking clip editor, where you can personalize the content and appearance of your email clips.
1. Settings
Under this tab, you can adjust what and how the customer-facing content will be displayed.
EDD: Display the estimated delivery date and the date the order was delivered. Set the status from Disabled to Enabled.
Progress Bar: Choose the design and style of the progress bar you want to showcase. The progress bar visually represents the different stages of a shipment’s journey. You can choose
a. Dates: This will showcase the trajectory of the order from one point to another based on the date and the status.
b. Locations: This will showcase the trajectory of the order from one point to another based on the origin and the destination location.
c. Line: This will showcase the simple progress of the order depending upon the overall status of the order.
Status descriptions: In this section, you can customize the title and name of the respective statuses. Once the order is updated to that particular status, the title and name will change accordingly.
a. Pre-ship status: Customize the title and name of the order’s pre-shipment status.
To show pre-shipment statuses, you must connect your store or use the AfterShip Commerce API to provide AfterShip with the order resources.
b. Shipment status: Edit the title and name to reflect the current shipment status.
c. Error titles and descriptions: Edit the title and name of the error statuses when the order is updated to expired or non-existent status.
2. Styles
Set the Size and Color for the tracking clip.
Personalize the Font, Font size, Text color, and Alignment for the Estimated Delivery Date (EDD), progress bar, dates, or locations (based on the type you’ve selected) in your clips.
Once you're satisfied with the adjustments, click Save to apply the changes.
Step 3: Add clips to your emails
Visit the respective tracking clips' editor page or the My clips section on the Tracking clips dashboard and click the Add to email button for the clip you want to include.
Copy the code from the popup, which we’ll use later.
The following instructions use Shopify notifications and Klaviyo as examples. If you're using a different platform, you may need to make minor adjustments to the code.
1. Shopify email notifications
Navigate to your Shopify store > Settings > Notifications > Customer notifications.
The following emails are recommended for adding the AfterShip tracking clips:
Shipping confirmation
Shipping update
Out for delivery
Delivered
Click the Edit code button.
Add the Email clip as instructed below.
For Shipping confirmation, Shipping update, and Delivered emails, it’s recommended to place the clip above the original View your order button. (You can search for View your order to locate it.)
html
<td class="actions__cell">
<!-- Replace YOUR_TRACKING_NUMBER with {{ fulfillment.tracking_numbers.first }} -->
<img src="https://username.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number=284110561924" alt="AfterShip Tracking Clips" width="100%"/>
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
</td>For the Out for delivery emails, place the clip above the original Track my shipment button. (Search for Track my shipment to find it.)
html
<tr>
<!-- Replace YOUR_TRACKING_NUMBER with {{ fulfillment.tracking_numbers.first }} -->
<img src="https://username.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ fulfillment.tracking_numbers.first }}" alt="AfterShip Tracking Clips" width="100%" />
</tr>
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Track my shipment</a></td>
</tr>Preview and send a test email to check if the changes work correctly.
5 Save the changes once you’re satisfied with the results.
2. Klaviyo emails
Guide your customers to the AfterShip branded tracking results page when they click the Track order button in Klaviyo Emails or SMS.
Go to Flows in your Klaviyo admin.
Open the email editor for your desired notification flow.
Add an email clip by dragging an HTML block into the editor.
Replace the HTML content with the code you copied.
html
<!-- Replace YOUR_TRACKING_NUMBER with {{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }} -->
<img src="https://username.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }}" alt="AfterShip Tracking Clips" width="100%">Please note: In the <img src="https://username.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }}" alt="AfterShip Tracking Clips" width="100%"> replace "username" with your AfterShip Organization's Short name.
Go to your Organization settings in your AfterShip Tracking admin.
Move to Basic information and click Edit.
Copy the Short name and add it in the URL mentioned above.
Example: Based on the screenshot below, add "antiquevase" in the URL like this <img src="https://antiquevase.aftership.com/api/tracking-clips/email?clip_id=a07079d98c5349ae89ced25e59b79fab&tracking_number={{ event.AllShipmentsInThisOrder.0.TrackingNumber|default:'' }}" alt="AfterShip Tracking Clips" width="100%">
Preview and test your flow before saving the changes.
If your flow’s event data source is not AfterShip, the property name may differ from {{event.AllShipmentsInThisOrder.0.TrackingNumber|default:''}}. You’ll need to find the correct tracking number property name from your event’s property list.
Updated on: 25/03/2025
Thank you!