How to Integrate the EDD Product Widget in a Headless Storefront

Overview

The AfterShip Estimated Delivery Date Widget allows you to show your customers the estimated delivery time for their orders. The pre-purchase EDD widget configuration is now supported for headless Shopify storefronts. Since headless environments don’t expose the built-in JavaScript Global object— windows.Shopify, which contains useful information like product  ID, shop name, and variant info, because of its custom-built forefront, you’ll need to pass a few additional parameters manually when initializing the widget.

A Headless Shopify Storefront is a way to build an online store where the frontend user experience (what users see) is completely separate from the backend commerce engine (where products, orders, and data live). They communicate using the APIs.This allows merchants to define the exact experience they want, for both buyers and administrative users, as opposed to traditional storefronts, where the frontend and the backend are closely connected with a predefined experience for both the end users and the administrative users.

Prerequisites

Before you start, make sure you have the following ready:

• Your AfterShip AppKey. You can find it in your AfterShip Tracking Apps section.

1. Open your Shopify store connections.
2. The App key is the first part of the store address before .myshopify.com.

In the below example, yijin-1014 is the AppKey.

                     yijin-1014.myshopify.com

• The Product ID of the product currently being displayed.
• The Product Variant ID of the selected product variant.

Notable restrictions

Please note that in the headless storefront environment, A/B testing or automatic analytics tracking on the product page is not supported. If you need those functionalities, you’ll have to set them up yourself manually. 

Steps to set up the EDD product widget in a headless storefront

Step 1: Copy the script 

1. Go to Estimated delivery dates > Pre-purchase EDD in your AfterShip Tracking admin.
2. Go to Widgets and click Install widget for the page where you want to install the widget.
3. Click Add to headless store and copy the code displayed on the screen.

This code snippet provided in AfterShip Admin is part of the widget initialization process and is used to:

• Load the EDD widget 
• Authenticate using your AppKey
• Render the EDD component dynamically 

Where should this code be added?

The code should be added to your frontend codebase such as:

• Index.html (for simpler setups)
• Root layout or component (React, Next.js, Hydrogen)

Step 2:  Choose an integration method

There are two ways to integrate the EDD widget depending on your storefront steup. Choose the one that best fits your needs. 

Method A: Custom HTML-Based Integration (<aftership-aedd>)

Use this method for a simpler, declarative approach. 

• Automatic rendering: The widget renders automatically when the script loads.
• Reactive updates: Automatically triggers a re-render whenever the element’s attributes (product-id, variant-id, language, etc.) change.

This method is best suited when:

• You product data is mostly static 
• You prefer minimal JavaScript 
• You don’t need complex variant handling 

How to implement

1. Add the script to your page

Start by adding this widget script to your main HTML file (frontend codebase e.g., index.html):

<script src="https://widgets.automizely.com/aftership-aedd-v2/index.iife.js" defer></script>

This script enables the <aftership-aedd> component. 

2. Place the widget element

Add the <aftership-aedd> element anywhere in your frontend UI where you want the estimated delivery date widget to appear. 

<aftership-aedd> is a web component provided by AfterShip that renders the Estimated delivery date (EDD) on your storefront.

<aftership-aedd
  app-platform="shopify"
  app-key="YOUR_APP_KEY"
  product-id="YOUR_PRODUCT_ID"
  variant-id="YOUR_VARIANT_ID"
  language="en"
></aftership-aedd>

Typically, merchants place the EDD widget:

* Below the product price 
* Near the “Add to cart” button
* Under variant selectors (size, color)

Method B: JavaScript API (window.__AFTERSHIP_EDD__)

This method is recommended for dynamic stores and is best suited for 

• Dynamic product variant selection 
• React/Next..js/Hydrogen applications
• Full control over rendering

window.__AFTERSHIP_EDD__ is the global JavaScript object (SDK) that the AfterShip EDD script exposes in your browser. This object gives you methods to initialize, render, update, and remove the widget.

1. Load and initialize 

<script src="https://widgets.automizely.com/aftership-aedd-v2/index.iife.js"></script>
<script>
  window.__AFTERSHIP_EDD__.init({
    appKey: 'YOUR_APP_KEY'
  });

  const eddInstance = window.__AFTERSHIP_EDD__.render({
    target: '#edd-widget-container',
    productId: 'YOUR_PRODUCT_ID',
    variantId: 'YOUR_VARIANT_ID',
    language: 'en'
  });
</script>

2. Add container in your UI

Place a container element where you want the widget to appear

<div id="edd-widget-container"></div>

The EDD widget renders inside the container element.

3. Update when the variant changes 

Call .update() whenever a shopper selects a different variant.

eddInstance.update({
  productId: 'YOUR_PRODUCT_ID',
  variantId: 'NEW_VARIANT_ID',
  language: 'en'
});

4. Remove the widget

eddInstance.remove();

5. Async loading (Optional)

If you need to load the script dynamically.

function loadWidget(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.defer = true;
    script.onload = () => resolve(window.__AFTERSHIP_EDD__);
    script.onerror = () => reject(new Error(Failed to load script: ${url}));
    document.head.appendChild(script);
  });
}

loadWidget('https://widgets.automizely.com/aftership-aedd-v2/index.iife.js')
  .then((sdk) => {
    sdk.init({ appKey: 'YOUR_APP_KEY' });
    sdk.render({ target: '#edd-widget-container', productId: '...', variantId: '...' });
  })
  .catch(err => console.error(err));

6. Alternative: Use the onload callback

For a simple, non-blocking way to load the script without using Promises, you can use the onload attribute:

<script
  src="https://widgets.automizely.com/aftership-aedd-v2/index.iife.js"
  defer
  onload="initEDD()"
></script>
<script>
  function initEDD() {
    window.__AFTERSHIP_EDD__.init({ appKey: 'YOUR_APP_KEY' });
    window.__AFTERSHIP_EDD__.render({
      target: '#edd-widget-container',
      productId: 'YOUR_PRODUCT_ID',
      variantId: 'YOUR_VARIANT_ID',
      language: 'en'
    });
  }
</script>

The onload event ensures that the script is fully loaded before initEDD() runs, so window.__AFTERSHIP_EDD__ will always be available when the widget is initialized.

Supported languages

The language parameter accepts the following codes:

Parameter reference

Key Takeaways

• <aftership-aedd> is a Web Component used to display the AfterShip Estimated Delivery Date (EDD) widget and works automatically once the script is loaded.
• window.__AFTERSHIP_EDD__ is the global JavaScript API created when you load the AfterShip EDD script. It lets you control the widget programmatically in dynamic integrations.
• They are not used with Shopify Liquid.
• The widget must be placed within your frontend UI layout.
• The script handles loading while the component/container controls placement on your storefront.
• Custom HTML method (<aftership-aedd>) is used for for simple implementations.
• JavaScript API (window.__AFTERSHIP_EDD__) is used for dynamic storefronts.

Updated on: 27/04/2026