Add Tracking Page on Shopify Store and Notifications Using Proxy URL
Platforms: Shopify
Embedding the AfterShip branded tracking page into your Shopify store using the proxy URL gives your customers a consistent and branded user experience. This method lets you direct your customers to the tracking page through Shopify orders or shipping notifications.
The entire tracking experience feels more brand-aligned when placed between the header and footer of your Shopify store.
The tracking page embedding using the Shopify Proxy URL doesn’t give you any control over the header and footer of the page. They will remain aligned with the Shopify store theme and layout. You can configure the tracking page layout from the order lookup widget, review widget, page styling, and chat widget, to basic functional settings through the tracking page editor.

In this article, we will show you:
There are two ways to embed the AfterShip tracking page into your Shopify store.
Embedding the tracking page with AfterShip's default URL: This method uses AfterShip’s standard URL for tracking. The page is hosted on AfterShip’s platform but still provides a consistent tracking experience for your customers.
Embedding the tracking page with Shopify proxy URL: Embedding through the Shopify Proxy URL ensures the tracking page fits seamlessly within your store’s layout, appearing between the header and footer of your site.
Go to Tracking pages > Embedding in the AfterShip Tracking admin.
Your default tracking page will appear here, along with its auto-generated Proxy URL, which will display the tracking page embedded between the store's header and footer.
If your organization has multiple stores connected, the default tracking page for each store, along with their respective proxy URLs, will be listed here.
You can decide where you want the proxy URL to point to when the customer decides to visit your tracking page under the Points to section.
You can set your proxy URL to show dynamic content or a fixed tracking page. Here's how the 2 options work:
a. Default page or follow segmentation rules: If you want to segment your tracking experience across your audience, opt for this option.
If you haven't set up segmentation rules, your proxy URL will show your default tracking page.
If you've set up segmentation rules, the proxy URL will display a tracking page tailored to those rules. Customers who meet the criteria of the segmentation rules will be directed to the corresponding tracking page via the proxy URL.
b. Specific page: If you want to show all customers the same tracking page you will select, opt for this option.
Upon selecting this option, you must select the tracking page variation from the dropdown where all the customers visiting this page will be directed.
Once set up, click Copy proxy URL.
There are multiple ways to redirect your customers to the AfterShip tracking page directly from within Shopify.
You can redirect customers from their order status page when they click on the tracking number.
Supported for checkout.liquid only. Support for Checkout extensibility is coming soon.
Steps:
Go to AfterShip Tracking admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

For customers viewing their order history, redirect them to the AfterShip tracking page by clicking the tracking number in their account section.
Only legacy customer accounts are supported currently.
Steps:
Go to AfterShip Tracking admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

Make it easy for customers to track their orders by adding a link to your store’s header or footer.
Steps:
In your Shopify admin, go to Online Store > Navigation.
Decide whether you want to embed your tracking page into the Main menu or the Footer menu.
Click + Add menu item.
Enter the Menu title (e.g., Track your order).
Paste the copied proxy URL from AfterShip Tracking admin from this step in the link field, then click Add.

Incorporate a “Track Order” link in your FAQ section, directing customers to the branded tracking page.
Steps:
Create a FAQ article titled `Where is my order?`or something similar in your store's blog/article page.
Paste the copied proxy URL from AfterShip Tracking admin from this step in the article’s content.

Redirect your business staff from Shopify’s admin order details page to the AfterShip tracking page. (By default it’s linked to the courier’s tracking page).
Steps:
Go to AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

You can also include the AfterShip tracking page in Shopify's email and SMS notifications.

Go to your Shopify store > Settings > Notifications > Customer notifications.
We recommend adding the AfterShip tracking page to the following emails:
Order confirmation
Shipping confirmation
Shipping update
Out for delivery
Delivered
Click Edit code for each of these email templates.
Let's take the example of order confirmation email.
Redirect customers to the tracking page from the default order confirmation email by providing a seamless transition using the "View your order" button. This button will direct them to the tracking page, integrated with your Shopify Proxy URL.
Steps:
Go to Notifications settings in your Shopify admin.
Go to Customer notifications. The settings page allows you to customize the email template of different notifications triggered by Shopify.
Select Order confirmation under Order processing notifications section to access the email template configuration window.
Click Edit code.
Locate the following code snippet in the Email body (HTML):
Replace it with the code snippet below:
Swap out http://track.aftership.com with your AfterShip tracking page proxy URL, which you obtained in this step. For example:
Preview and send a test email.
Click on the “View your order” button in the test email to ensure it properly redirects to the tracking page.
Save the changes.
Repeat the same process for other notifications as well. For complete instructions on how to redirect customers to the AfterShip tracking page from different Shopify notifications, refer to this article.

Go to your AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify proxy URLsection, ensure your proxy URL is set up correctly ( follow the steps here).
Check Redirecting to your proxy URL from notifications.
In Klaviyo, go to Flows.
In your notification flow’s email/SMS editor, add a Track order status button.
Paste {{ event.OrderTrackingURL|default:'' }} or {{ event.ShipmentTrackingURL|default:'' }} into the template.
OrderTrackingURL directs customers to the full order tracking page, showing all shipments linked to that order.
ShipmentTrackingURL directs customers to a single shipment’s tracking page.
Preview and test before saving.

Redirect customers to AfterShip branded tracking pages when they click the Track order button in the AfterShip tracking emails and SMSes.

Go to your AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify proxy URL section, ensure your proxy URL is set up correctly ( follow the steps here).
Check Redirecting to your proxy URL From notifications.
In the AfterShip admin, go to Notifications > Flows. Edit the event flow where you want to add the AfterShip tracking page link.
Add a Track order status button in your email and SMS notifications through the email/SMS editor or edit the default track button.
Click Insert merge tag and select Tracking URL or Order URL.
Tracking_URL directs to a single shipment’s tracking page.
Order_URL directs to the full order tracking page.
Preview and test before saving.

By following these steps, you’ll ensure your customers have a seamless experience from receiving notifications to tracking their orders directly on your AfterShip branded page.
You can edit the proxy URL of the page by either updating the path or parameters or both to suit your needs better.
Click the {...} icon given alongside your proxy URL. Click Edit proxy URL.
Select the new URL from the dropdown or change the parameter. The preview of the new URL will display under the configuration field.
The Proxy URL in the AfterShip admin must match the proxy URL you add for AfterShip in your Shopify settings, so make sure you update the proxy URL in Shopify too. Click Edit proxy URL in Shopify to be redirected to the Shopify settings or follow the steps below.
As mentioned earlier, the final Proxy URL in your AfterShip admin should match the App Proxy URL for AfterShip in your Shopify settings. If you’ve modified the proxy URL in AfterShip, be sure to update it in your Shopify settings as well to prevent any errors. Here are the steps to update the URL in Shopify.
Go to Settings > Apps and sales channels in the Shopify admin.
Select AfterShip Tracking app.
Scroll down to App proxy, click Customize URL.
Update the URL parameters as done in AfterShip Tracking admin and click Save.

Overview
Embedding the AfterShip branded tracking page into your Shopify store using the proxy URL gives your customers a consistent and branded user experience. This method lets you direct your customers to the tracking page through Shopify orders or shipping notifications.
The entire tracking experience feels more brand-aligned when placed between the header and footer of your Shopify store.
The tracking page embedding using the Shopify Proxy URL doesn’t give you any control over the header and footer of the page. They will remain aligned with the Shopify store theme and layout. You can configure the tracking page layout from the order lookup widget, review widget, page styling, and chat widget, to basic functional settings through the tracking page editor.

What you'll learn
In this article, we will show you:
Tracking page embedding options
There are two ways to embed the AfterShip tracking page into your Shopify store.
Embedding the tracking page with AfterShip's default URL: This method uses AfterShip’s standard URL for tracking. The page is hosted on AfterShip’s platform but still provides a consistent tracking experience for your customers.
Embedding the tracking page with Shopify proxy URL: Embedding through the Shopify Proxy URL ensures the tracking page fits seamlessly within your store’s layout, appearing between the header and footer of your site.
How to get your Shopify proxy URL
Go to Tracking pages > Embedding in the AfterShip Tracking admin.
Your default tracking page will appear here, along with its auto-generated Proxy URL, which will display the tracking page embedded between the store's header and footer.
If your organization has multiple stores connected, the default tracking page for each store, along with their respective proxy URLs, will be listed here.
You can decide where you want the proxy URL to point to when the customer decides to visit your tracking page under the Points to section.
You can set your proxy URL to show dynamic content or a fixed tracking page. Here's how the 2 options work:
a. Default page or follow segmentation rules: If you want to segment your tracking experience across your audience, opt for this option.
If you haven't set up segmentation rules, your proxy URL will show your default tracking page.
If you've set up segmentation rules, the proxy URL will display a tracking page tailored to those rules. Customers who meet the criteria of the segmentation rules will be directed to the corresponding tracking page via the proxy URL.
b. Specific page: If you want to show all customers the same tracking page you will select, opt for this option.
Upon selecting this option, you must select the tracking page variation from the dropdown where all the customers visiting this page will be directed.

Once set up, click Copy proxy URL.
Redirect customers to the AfterShip tracking page from Shopify
There are multiple ways to redirect your customers to the AfterShip tracking page directly from within Shopify.
1. From Shopify order status page
You can redirect customers from their order status page when they click on the tracking number.
Supported for checkout.liquid only. Support for Checkout extensibility is coming soon.
Steps:
Go to AfterShip Tracking admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

2. From Shopify customer account (order history) page
For customers viewing their order history, redirect them to the AfterShip tracking page by clicking the tracking number in their account section.
Only legacy customer accounts are supported currently.
Steps:
Go to AfterShip Tracking admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

3. Add a "Track order" button to your store’s header or footer
Make it easy for customers to track their orders by adding a link to your store’s header or footer.
Steps:
In your Shopify admin, go to Online Store > Navigation.
Decide whether you want to embed your tracking page into the Main menu or the Footer menu.
Click + Add menu item.
Enter the Menu title (e.g., Track your order).
Paste the copied proxy URL from AfterShip Tracking admin from this step in the link field, then click Add.

4. Add a "Track Order" button to your customer support/FAQ page
Incorporate a “Track Order” link in your FAQ section, directing customers to the branded tracking page.
Steps:
Create a FAQ article titled `Where is my order?`or something similar in your store's blog/article page.
Paste the copied proxy URL from AfterShip Tracking admin from this step in the article’s content.

Redirect staff to the AfterShip tracking page from the Shopify admin
Redirect your business staff from Shopify’s admin order details page to the AfterShip tracking page. (By default it’s linked to the courier’s tracking page).
Steps:
Go to AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify Proxy URL section, check Redirecting to your proxy URL From Shopify links.

Redirect customers to the AfterShip tracking page from email/SMS notifications
You can also include the AfterShip tracking page in Shopify's email and SMS notifications.
1. From Shopify notifications

Go to your Shopify store > Settings > Notifications > Customer notifications.
We recommend adding the AfterShip tracking page to the following emails:
Order confirmation
Shipping confirmation
Shipping update
Out for delivery
Delivered
Click Edit code for each of these email templates.
Let's take the example of order confirmation email.
A. Order confirmation
Redirect customers to the tracking page from the default order confirmation email by providing a seamless transition using the "View your order" button. This button will direct them to the tracking page, integrated with your Shopify Proxy URL.
Steps:
Go to Notifications settings in your Shopify admin.
Go to Customer notifications. The settings page allows you to customize the email template of different notifications triggered by Shopify.
Select Order confirmation under Order processing notifications section to access the email template configuration window.
Click Edit code.
Locate the following code snippet in the Email body (HTML):
<a href="{{ order_status_url }}" class="button__text">View your order</a>
Replace it with the code snippet below:
<a href="https://track.aftership.com/order-status?order-number={{ order_number }}&email={{ email }}" class="button__text">View your order</a>
Swap out http://track.aftership.com with your AfterShip tracking page proxy URL, which you obtained in this step. For example:
<a href="https://protection-staging-multi-currency.myshopify.com/apps/aftership/order-status?order-number={{ order_number }}&email={{ email }}" class="button__text">View your order</a>
Preview and send a test email.
Click on the “View your order” button in the test email to ensure it properly redirects to the tracking page.
Save the changes.
Repeat the same process for other notifications as well. For complete instructions on how to redirect customers to the AfterShip tracking page from different Shopify notifications, refer to this article.

2. From Klaviyo notifications
Go to your AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify proxy URLsection, ensure your proxy URL is set up correctly ( follow the steps here).
Check Redirecting to your proxy URL from notifications.
In Klaviyo, go to Flows.
In your notification flow’s email/SMS editor, add a Track order status button.
Paste {{ event.OrderTrackingURL|default:'' }} or {{ event.ShipmentTrackingURL|default:'' }} into the template.
OrderTrackingURL directs customers to the full order tracking page, showing all shipments linked to that order.
ShipmentTrackingURL directs customers to a single shipment’s tracking page.
Preview and test before saving.

3. From AfterShip Tracking notifications
Redirect customers to AfterShip branded tracking pages when they click the Track order button in the AfterShip tracking emails and SMSes.

Go to your AfterShip admin > Tracking Pages > Embedding.
Under the Embed using Shopify proxy URL section, ensure your proxy URL is set up correctly ( follow the steps here).
Check Redirecting to your proxy URL From notifications.
In the AfterShip admin, go to Notifications > Flows. Edit the event flow where you want to add the AfterShip tracking page link.
Add a Track order status button in your email and SMS notifications through the email/SMS editor or edit the default track button.
Click Insert merge tag and select Tracking URL or Order URL.
Tracking_URL directs to a single shipment’s tracking page.
Order_URL directs to the full order tracking page.
Preview and test before saving.

By following these steps, you’ll ensure your customers have a seamless experience from receiving notifications to tracking their orders directly on your AfterShip branded page.
Edit Proxy URL (Optional)
Update app Proxy URL in AfterShip
You can edit the proxy URL of the page by either updating the path or parameters or both to suit your needs better.
Click the {...} icon given alongside your proxy URL. Click Edit proxy URL.
Select the new URL from the dropdown or change the parameter. The preview of the new URL will display under the configuration field.
The Proxy URL in the AfterShip admin must match the proxy URL you add for AfterShip in your Shopify settings, so make sure you update the proxy URL in Shopify too. Click Edit proxy URL in Shopify to be redirected to the Shopify settings or follow the steps below.
Update app Proxy URL in Shopify
As mentioned earlier, the final Proxy URL in your AfterShip admin should match the App Proxy URL for AfterShip in your Shopify settings. If you’ve modified the proxy URL in AfterShip, be sure to update it in your Shopify settings as well to prevent any errors. Here are the steps to update the URL in Shopify.
Go to Settings > Apps and sales channels in the Shopify admin.
Select AfterShip Tracking app.
Scroll down to App proxy, click Customize URL.
Update the URL parameters as done in AfterShip Tracking admin and click Save.

Updated on: 11/02/2025
Thank you!