When I first started diving into Shopify app development, I kept noticing a massive drain on store owners' time and energy: the dreaded WISMO emails. "Where Is My Order?" It’s a question every e-commerce merchant faces, but the sheer volume of support tickets it generates can be paralyzing. I was struggling to understand why such a simple question caused so much friction, especially when the technology to solve it already existed. I realized the issue wasn't just about tracking numbers; it was about the entire post-purchase experience. So I decided to build something.
The Problem with the Post-Purchase Experience
WISMO tickets are a symptom of a broken customer journey. When a shopper completes a purchase, their excitement peaks. But the moment the checkout confirmation page closes, that excitement drops to zero, replaced by anxiety about when their package will actually arrive.
By default, Shopify handles this by sending an email with a link to the carrier’s tracking page (like UPS or FedEx). While functional, this approach has significant trade-offs. First, it completely breaks the brand experience. The customer is abruptly redirected to a third-party site that looks nothing like the store they just bought from. Second, carrier pages are often cluttered, confusing, and not mobile-optimized.
The cost of ignoring this experience is high. Customers who feel uninformed don't just email support; they lose trust in the brand. Reducing WISMO tickets isn't just about saving time on customer service; it's about retaining customers and turning a stressful waiting period into an engaging brand touchpoint.
Comparing Technical Approaches
When tackling this problem, I analyzed three main technical approaches for implementing a tracking solution on Shopify. Each has distinct trade-offs.
1. The Default Carrier Redirects
Pros: Zero development time, no additional costs.
Cons: Zero brand control, poor mobile UX, high WISMO volume because customers can't easily find their status.
2. Heavy Third-Party SaaS Widgets
Pros: Beautiful, feature-rich UIs, highly customizable.
Cons: Expensive monthly subscriptions, heavy JavaScript payloads that can negatively impact Core Web Vitals and page load speeds, and you rarely own the underlying data.
3. Custom Shopify App Embed Blocks
Pros: Native feel, lightweight, cost-effective, keeps the customer on your domain.
Cons: Requires Shopify OS 2.0 themes, requires careful state management.
I chose the App Embed approach. It offers the best balance of performance, brand consistency, and developer control. By using Shopify's App Embed blocks, we can inject a tracking widget directly into the order status page without modifying the core theme code.
Here is how the core implementation looks. We use Liquid to safely pass the order data into the DOM, and an asynchronous script to initialize the widget without blocking the main thread.
{% comment %}
Renders shipment tracking widget on order status pages
{% endcomment %}
<div id="parcelglance-widget"
data-order-id="{{ order.id }}"
data-order-number="{{ order.name }}"
data-store-name="{{ shop.name }}"
style="min-height: 200px;">
</div>
<script>
(function() {
const script = document.createElement('script');
script.src = 'https://cdn.parcelglance.com/widget.js';
script.async = true;
script.onload = function() {
Parcelglance.init({
orderId: document.getElementById('parcelglance-widget').dataset.orderId,
orderNumber: document.getElementById('parcelglance-widget').dataset.orderNumber,
storeName: document.getElementById('parcelglance-widget').dataset.storeName,
container: 'parcelglance-widget',
});
};
document.head.appendChild(script);
})();
</script>
Why this architecture works
The key decision here was keeping the frontend initialization lightweight. By wrapping the script injection in an Immediately Invoked Function Expression (IIFE) and setting script.async = true, we ensure that fetching the tracking widget logic doesn't delay the rendering of the rest of the order status page.
We pass the orderId, orderNumber, and storeName via data attributes. This is much cleaner and more secure than trying to inject variables directly into the JavaScript context. The widget script then uses these identifiers to fetch the real-time tracking status from our backend, which aggregates data from major carriers.
On the backend, the heavy lifting involves listening to Shopify webhooks (like orders/fulfilled) to capture tracking numbers and carrier details, then polling the respective carrier APIs for real-time status updates. This separation of concerns keeps the storefront fast while ensuring the tracking data is always accurate.
Practical Results and Lessons Learned
Building this custom App Embed approach yielded some great practical benefits. What worked exceptionally well was the performance profile. Because the widget loads asynchronously and only renders when the container is present on the page, we saw zero negative impact on Lighthouse performance scores.
What surprised me the most was the shift in customer behavior. When presented with a clean, branded tracking page that matched the store's theme, customers actually engaged with it. Instead of immediately emailing support the moment a package was delayed, they checked the widget, saw the real-time status, and felt informed. The branded experience turned a passive waiting period into active post-purchase engagement.
If I were to change anything about the initial build, it would be how I handled carrier data. Early on, I tried to write custom parsers for every single carrier's API response. It was a maintenance nightmare. I eventually pivoted to relying on standardized carrier API structures and focusing my development time on the frontend widget experience and the Shopify integration, which is where the actual value for the merchant lies.
Moving Forward
I eventually packaged this exact App Embed architecture into a tool called Parcelglance. It’s a Shopify app that adds a fully branded, real-time shipment tracking page to your store, designed specifically to reduce WISMO tickets and improve the post-purchase experience. It installs easily via Shopify App Embed blocks and lets you customize the widget to match your store's theme.
If you're dealing with post-purchase friction or just want to give your customers a better tracking experience, you can check out the free Shipment Tracking Widget at parcelglance.com.
Full disclosure: I'm the developer of Parcelglance. I built this because I needed it myself.
Top comments (0)