If your storefront runs on Shopify's headless stack (e.g. Hydrogen, Next.js, or another custom front end), AfterShip Tracking works with your store. Headless only changes your front-end experience, but your data connection and most features are unchanged. This article covers what stays the same, highlights the few areas that are set up differently, and links to the detailed guides for each.

Order, tracking number, and shipment data import the same way regardless of your front end. Headless Shopify only changes how pages render for shoppers. It doesn't change how AfterShip pulls data from your store.

If you haven't already, just add the AfterShip Tracking app to your Shopify organization. No additional setup is needed for data import itself.

The standard Shopify App Proxy URL embed (e.g. yourstore.com/apps/aftership) doesn't work on a headless store, because it's tied to the Shopify online-store theme that a headless build replaces.

Use one of these methods instead, both work exactly as usual on headless, including tracking page analytics and revenue attribution reporting correctly:

The pre-purchase EDD widget normally reads Shopify's built-in front-end context (the window.Shopify global — product ID, variant, shop, locale), which a headless store doesn't expose.
​

On headless, youn need to install the widget through a dedicated integration method.

Load the AfterShip EDD script and pass the product ID, variant ID, and language manually when initializing it.

For any further questions or help, please contact our chat support team.