Create a tracking page anywhere via HTML code

The default tracking page lives at yourstore.com/apps/parcel-track (see Change your tracking page URL). But sometimes you want more control over where the tracking experience appears:

• You want the page at a path like /pages/track-your-order so it inherits your theme’s page template, header, and footer styling.
• You build pages with a page builder (PageFly, GemPages, Shogun, etc.) and want tracking inside a designed layout.
• You want to add extra content around the tracker — FAQs, shipping policies, a contact form.

For all of these, Parcel Track provides an HTML embed snippet that renders the complete tracking page — lookup form, status timeline with map, estimated delivery dates, and product recommendations — inside any page you choose.

Step 1: Copy the embed code

1. From your Shopify admin, go to Apps → Parcel Track → Tracking Page.
2. Scroll to the Embed on a custom page section.
3. Click Copy code. The snippet is a small <div> plus a script tag, similar to:

<div id="parcel-track-page"></div>
<script async src="https://cdn.parcel-track.com/embed.js"></script>

The snippet is unique to your store — always copy it from your own admin rather than from this article.

Step 2: Create a new Shopify page

1. In Shopify admin, go to Online Store → Pages.
2. Click Add page.
3. Give it a title customers will recognize, e.g. Track Your Order.
4. In the content editor toolbar, click the <> (Show HTML) button to switch to HTML view.
5. Paste the snippet you copied in Step 1.
6. Set Visibility to Visible and click Save.

Your tracking page is now live at yourstore.com/pages/track-your-order (Shopify generates the handle from the title — you can edit it under Search engine listing).

Tip: Add the new page to your navigation under Online Store → Navigation so customers can find it from your header or footer menu.

Using a page builder instead

Every major page builder has an “HTML” or “Custom code” element:

1. Open your page in the builder and drag in the HTML / Custom code block where you want the tracker to appear.
2. Paste the Parcel Track snippet.
3. Save and publish.

The embedded page is responsive and fills the width of whatever container you place it in, so it works in full-width sections as well as boxed layouts.

What the embedded page includes

The embed renders the same experience as the default proxy page, and it respects all your settings:

• Theme colors, fonts, and layout from Tracking Page settings
• Any custom CSS you’ve added
• Custom pre-shipment statuses
• Multilingual translations with automatic locale detection

Direct-link parameters also work. A URL like yourstore.com/pages/track-your-order?nums=1Z999AA10123456784 opens the shipment immediately, so you can use the custom page as the destination for your notification and Shopify email links.

Embed page vs. lookup widget

The HTML embed in this article renders the full tracking page. If you only want a small search box (order number + email) on your homepage, FAQ, or footer that sends customers to the tracking page, use the lighter order lookup widget instead.

Note: Avoid placing two full tracking page embeds on the same page — only the first one will initialize.

Troubleshooting

• The block area is blank. Make sure you pasted the snippet in the page’s HTML view, not the rich text view (which escapes the code as visible text).
• Styles look off. Some themes apply aggressive CSS to page content. A few lines of custom CSS usually fixes it — or email support@parcel-track.com with your page URL and we’ll adjust it for you.