When I first started helping a friend manage their small Shopify store, I thought the hardest part would be getting the initial sales. I was wrong. The real nightmare started after the orders came in.
My inbox was flooded with the same question, day after day: "Where is my order?"
We were spending hours every week just copy-pasting tracking numbers into email replies. It was exhausting, and it was taking time away from actually growing the business. The customers were getting anxious, and we were getting frustrated.
So I decided to build something.
The Post-Purchase Black Hole
In e-commerce, there is a concept called the "post-purchase black hole." Once a customer clicks the buy button, they get a neat confirmation email. But then, they enter a void. They don't hear anything else until the physical package magically appears on their porch.
This leads to WISMO tickets. WISMO stands for "Where Is My Order." It is the most common support request in e-commerce.
Think of it like ordering food at a restaurant. If the waiter takes your order and then disappears for an hour without telling you if your food is being cooked or if it is out for delivery, you would probably walk up to the counter to ask. In a digital store, that "walking up to the counter" looks like an email to support.
Ignoring this problem has a real cost. Every WISMO ticket costs time to answer. More importantly, it damages trust. If a customer feels ignored after giving you their money, they are much less likely to come back. Providing a transparent, branded tracking experience isn't just a nice-to-have feature; it is a fundamental part of keeping customers happy.
The Technical Approach
I needed a way to give customers real-time tracking status from major carriers without forcing store owners to hire developers to edit their theme code. Store owners shouldn't have to touch Liquid files just to show a tracking page.
My solution was to use Shopify App Embed blocks.
For those who are new to Shopify development, an App Embed block allows an app to inject HTML, CSS, and JavaScript directly into a store's theme without requiring the merchant to manually edit the theme code. The merchant just toggles a switch in their theme editor, and the app handles the rest. It is a much cleaner, safer approach.
Here is a simplified look at the App Embed block code I wrote to render the tracking widget on the order status pages:
{% 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>
Let's break down what is happening here for the beginners.
First, we create a standard HTML div container. We use Shopify's Liquid templating language to pass dynamic data directly into the HTML attributes. {{ order.id }} grabs the unique database ID for the order, {{ order.name }} gets the customer-facing order number (like #1001), and {{ shop.name }} gets the store's name.
Next, we use a self-executing JavaScript function to load our tracking script asynchronously. We do this to ensure we don't block the rest of the page from loading, which keeps the site fast.
Once the script loads, the onload event fires. We then call Parcelglance.init() and pass it the data attributes we grabbed from the HTML. The script takes that order ID, fetches the real-time tracking status from the carrier, and renders a customizable tracking widget right inside that div.
Because the widget reads the store's theme settings, it automatically matches the store's branding. The customer stays in a familiar, branded environment rather than being bounced to a generic third-party courier website.
Practical Results
The biggest win with this approach was the installation process. Because it relies on Shopify App Embed blocks, merchants can install the tracking page in just a few clicks. There is no need to dig into theme code or worry about breaking the site layout during a theme update.
What surprised me the most was the psychological impact of the branded experience. Even if the tracking data simply said "In Transit," having it displayed on a page that looked exactly like the rest of the store significantly reduced customer anxiety. It made the store look professional and in control of the shipping process.
If I were to start over, I would change how I initially handled the backend. I originally overcomplicated the webhook handlers for order fulfillments, trying to build a massive internal logistics database. I quickly realized that keeping the frontend lightweight and relying on direct carrier API lookups was much more efficient. Sometimes the simplest architecture is the most maintainable.
Moving Forward
Dealing with WISMO tickets is a rite of passage for almost every e-commerce store owner, but it doesn't have to be a permanent burden. Providing a clear, post-purchase tracking experience is one of the most effective ways to reduce support overhead and build long-term customer trust.
If you are running a Shopify store and want to see how this works in practice, I packaged this solution into a free tool called Parcelglance. You can check out the Shipment Tracking Widget and see how it can help you create a better post-purchase experience for your customers at parcelglance.com.
Full disclosure: I'm the developer of Parcelglance. I built this because I needed it myself.
Top comments (0)