How I Built a Custom Shopify Tracking Widget to Save Time

When I first started helping a friend manage their Shopify store, I thought the hard part was getting sales. I was wrong. The real headache started after the checkout.

Every day, the support inbox was flooded with the same question: "Where is my order?" Customers were anxious, and my friend was spending hours copy-pasting tracking numbers from carrier websites into emails. It was exhausting. We tried a few popular tracking apps, but they felt a bit heavy for our needs, slowed down the site, and looked completely different from the store's clean design.

I realized we didn't need a massive suite of marketing tools. We just needed a simple, beautiful way to show customers where their package was, right on the store. So I decided to build something.

The Hidden Cost of the "Black Hole" Post-Purchase

In e-commerce, there is a dreaded acronym: WISMO. It stands for "Where Is My Order?" and it is the bane of every store owner's existence.

Think about it from the customer's perspective. Imagine you buy a birthday gift for your partner. You pay, you get a confirmation email, and then... silence. The store goes dark. You start wondering if the site was a scam, or if they forgot to ship it. That anxiety leads directly to WISMO emails.

If you don't provide a clear, easy-to-find tracking experience, you are forcing customers to reach out to your support team. The cost of ignoring this isn't just the time spent answering emails. It erodes trust. A customer who feels anxious about their delivery is much less likely to buy from you again. The post-purchase experience is your last chance to make a great impression before the product even arrives in their hands.

Building the Solution: A Beginner-Friendly Approach

When I set out to fix this, I wanted to avoid the bloated apps. I needed something lightweight that matched the store's theme perfectly.

My technical approach centered around Shopify's "App Embed blocks." If you are new to Shopify development, think of App Embeds like a smart plugin. In the past, if you wanted to add a custom widget to a store, you had to manually edit the store's theme code (the Liquid files). That was risky; one missing bracket could break the whole site. App Embed blocks allow you to inject code safely without touching the core theme files. The store owner just toggles a switch in the theme editor.

Here is a simplified look at the core Liquid and JavaScript code that powers the widget on the order status page:

{% 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, keeping it simple.

First, we create a container div with the ID parcelglance-widget. We use Shopify's Liquid templating language (the code inside the curly braces like {{ order.id }}) to pass the specific order details directly into the HTML as data- attributes. This is a secure and clean way to pass data from the server to the client-side JavaScript. We also set a min-height so the page doesn't jump around awkwardly while the widget loads.

Next, we write a small JavaScript function. Notice that we create a new script tag dynamically and set its src to our widget's URL. Crucially, we set script.async = true. This means the browser will download our tracking widget in the background without blocking the rest of the page from loading. If we didn't do this, a slow network could delay the entire order status page from showing up.

Once the script finishes loading (script.onload), we call our initialization function, passing in the order details we grabbed from the HTML data attributes. The widget then fetches the real-time tracking status from the major carriers and renders it inside that container div.

On the backend, we use Shopify webhooks to listen for fulfillment updates. Whenever an order is marked as shipped, Shopify sends a secure payload to our server, which we verify using an HMAC hash to ensure it's actually from Shopify and not a malicious actor. We then store the tracking number and carrier so the frontend widget can display it.

What Worked, What Surprised Me, and What I'd Change

Building this taught me a lot about keeping things simple.

What worked best was the App Embed approach. Because we didn't have to instruct store owners to edit their theme code, the installation process became incredibly smooth. They just install the app, go to the theme editor, and turn the block on. It felt like magic compared to the old way of doing things.

What surprised me was how much the visual design mattered. I initially thought customers only cared about the raw tracking data. But when I added simple customization options to match the widget's colors and fonts to the store's theme, the feedback was overwhelmingly positive. It made the store look cohesive and professional. A branded experience makes the customer feel like they are still in the store, even when they are checking on a carrier delivery.

If I could change one thing about my initial build, it would be my feature scope. My very first prototype tried to include email notification builders, SMS alerts, and a massive analytics dashboard. It was a mess. I quickly realized that store owners just wanted to stop the WISMO emails. I stripped out all the extra features and focused entirely on making a beautiful, fast, and reliable tracking widget. Less really is more.

Try It Yourself

If you are running a Shopify store and drowning in "Where is my order?" emails, you don't need a massive, expensive enterprise app to fix it. Sometimes, a lightweight, well-designed widget is all you need to keep your customers happy and your inbox clear.

I packaged the tool I built into a free resource for the community. You can check out the free Shipment Tracking Widget and see how it works for your store at parcelglance.com.

---

Full disclosure: I'm the developer of Parcelglance. I built this because I needed it myself.