Enable Pre-Purchase AI-Predicted Estimated Delivery Dates (EDD)
Plans : Premium, Enterprise Platforms : Shopify, API users
Cart abandonment usually happens when there’s no clarity over the delivery time. Therefore, businesses must share an estimated delivery date to keep shoppers interested. With AfterShip Tracking, you can show AI-predicted estimated delivery dates on product and checkout pages of your Shopify store.
If you are an API user, you can refer to the pre-purchase API document to start getting pre-purchase EDDs through API.
In this tutorial, we’ll discuss steps on how Shopify users can show AI-predicted Estimated Delivery Dates on their Shopify Product and Checkout Pages.
Rule Settings
a. EDD calculation settings
b. Product exclusion settings
c. Checkout page EDD settings
Product page EDD widget configuration
Checkout page EDD widget configuration
FAQs
You first need to set up your shipping and order processing rules in the Aftership Tracking admin under the Ship-From Locations section, which will be shared with our AI Model to predict EDDs for you. Therefore, you must set up accurate settings for accurate predictions.
You can also find access the configuration settings in the Pre-purchase EDD section under Setting page shown as below.
You must choose AEDD- supported carriers and location regions as the default shipping rule otherwise you are not able to enable any pre-purchase AEDD feature.
Check the detailed guide to set up your location and shipping rules here .
You can select specific products, product types, and scenarios where you do not want the EDD widget displaying the estimated delivery date to show. Estimation delivery dates will be only available for products live for sale.
Go to the Pre-purchase EDD setup portal in your AfterShip Tracking admin.
Under the Settings tab, scroll down to the Product exclusion settings .
Select the logic(s) you wish to configure.
a. Oversold products : If selected, the EDD widget will automatically be hidden from the product pages that are sold more than the actual units available in inventory.
b. Specific products : If selected, you can choose specific products in your eCommerce platform where the EDD widget will not display.
Click Manage products .
On the Add products modal, search product by title or variant name or filter product selection by type .
Select the checkbox of products and click Add .
c. Specific product types : You can choose specific product types in your eCommerce platform following which all the existing and future products labeled with that particular product type will automatically hide the estimated delivery date widget from their pages.
You can decide how the EDD for an order will be calculated at checkout if some of the products in an order are excluded from displaying an estimated delivery date. You can select between the following options.
a. Don't calculate an EDD for the order if any of the products are without EDD.
b. Calculate an EDD for the order based on the remaining products' EDDs.
Move to the Widget tab. On the Product page EDD card, click Manage .
Start customizing the product page EDD widget on the left panel and preview the modifications on the right panel.
Under the Configuration settings, set up the core settings of the product page EDD widget.
Date Format : Choose how dates appear based on your preference. You can choose among the available date formats.
EDD Format : Decide if you want to show a single date or a date range EDD on the page.
AfterShip leverages historical data to caculate the most likely day for delivery.
Icon Location : Choose where the icon appears—next to customer location, next to EDD, or remove it from your widget.
Message : Edit the customer-facing text in your EDD widget. You can insert merge tags like |EDD| and |COUNTDOWN_TO_CUTOFF| to auto-populate data from AfterShip database. The countdown timer shows the time left until your order cut-off time.
Under the Style settings, set up how your product page EDD widget will look, tailored to your brand tone.
Layout Margin : Drag the radio button along the lines to adjust how far your EDD widget is from other parts of the page from top and buttom
Container : Change the background color and padding (space inside the widget) for your EDD widget. You can also pick the border color, width, and shape.
Icon : Replace the icon image with one of your choice. The image file can't be bigger than 1 MB and must be JPG, JPEG, or PNG format.
Text : Customize the text color, size, boldness, and underline for different elements of your EDD widget—body text, EDD text, countdown timer text, and destination address text.
Click Save to activate all your configurations.
For the Product page EDD, we support 3 methods:
Go to Pre-purchase EDD in your AfterShip Tracking admin
Move to the Widget dashboard, click Install widget and select Copy widget code from the dropdown. Click Copy code on the pop-up window.
Go to Shopify admin > Online store > Themes > Edit code
Search the main-product file in Theme liquid
Find product-form-installment- and paste the code under it
Click Save to display the EDD on the product page
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Move to the Widget tab. On the Product EDD card, click Install widget and select Add as app block . You will land on the Shopify theme editor where the widget will be automatically installed to your default product page.
Drag the app block up or down to move it to the position you want on the page. When ready, save your changes.
To add the widget to another product page or if you have multiple Shopify stores, go to your store’s Shopify theme editor.
Select the Products page from the top dropdown and click on + Add block in the left panel under Templates
Search for AfterShip EDD under the Apps tab and click on it. You can drag it to where you want it on the page and then click Save when finished.
This is how the EDD will look to your customers on the Product page:
Tapcart is a mobile app builder that helps stores improve mobile conversions and retain customers. With Tapcart, you can sync your Shopify store’s backend, then build and launch your brand's mobile app to enhance the mobile shopping experience.
Make sure the AfterShip Tracking app is installed in your Tapcart account to enable the product page EDD in your Tapcart app.
Go to the Tapcart Integration Page and enter your Shopify Domain Name.
Click on the Update Integration button to save your connection.
We support two installation methods:
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Navigate to the Tapcart Widget dashboard, click Install Widget, and select Copy Widget Code from the dropdown.
Choose the store where you want to install the widget, then click Copy Code and Continue in the pop-up window.
Click Go to Product Detail Page, which will direct you to the Tapcart installation page.
On your Tapcart Product Detail page, click Custom, then Launch Blocks Editor .
Replace the default HTML code with a blank line, as shown below. (Do not delete the code entirely.)
After pasting the JavaScript code, click Save. When prompted to name the block, we suggest AfterShip - Product Detail Page EDD.
In the custom section, you’ll now see the block. Drag it to the desired position on the page.
Finally, click Save & Update when prompted.
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Navigate to the Tapcart Widget dashboard, click Install Widget, and select Add as App Block from the dropdown.
Click Go to Product Detail Page in the pop-up window.
On the Product Detail page, click the Integration tab. Drag the AfterShip - Product Detail Page EDD block to the desired position.
To finish, click Save Changes when prompted.
Please note that the style of our widget will automatically adjust to match your store's brand kit settings.
Move to the Widget tab. On the Checkout EDD (Shopify plus) card, click Manage .
Start customizing the checkout page EDD widget on the left panel and preview the modifications on the right panel.
On the Checkout EDD editor, choose how you want to show the dates on the page—**Single date or Date range**
For the Checkout page EDD, you can enable directly with the Shopify extension.
Go to Pre-purchase EDD in your AfterShip Tracking admin
Move to the Widget tab. On the Checkout EDD card, click Install widget and select Add as app block . Read the instructions on the pop-up window and click Go to Shopify .
This will take you to your Shopify checkout. Select the Shipping page from the dropdown at the top of the page.
In the left side panel under Delivery , click + Add app block . Then select AfterShip EDD and click Save when you're done.
If you have multiple Shopify stores, go to your store’s Shopify theme editor.
Select the Shipping page from the top dropdown and click on + Add block in the left panel under Order summary
Search for AfterShip EDD under the Apps tab and click on it.
Check the Include app in Shop Pay box if your store has activated Shop Pay.
You can drag it to where you want it on the page and then click Save when finished.
If you find your shipping method is displayed with a Transit time value after it, it may be a duplicated display with AfterShip EDD on your Checkout page .
You can go to your Shopify Shipping Setting and change the rate type to Custom Rate to remove the Shopify transit time display.
C. Customer experience
This is how the EDD will look to your customers on the Checkout page:
Answer: If your configured custom shipping rule's carrier or location is not covered under AEDD, we will use the default shipping rule to calculate EDD for you. The default shipping rule takes precedence if your request does not fall under any other custom shipping rules.
Answer: You can refer to the EDD dashboard page to check the error message. You need to set up a valid default shipping rule to enable any pre-purchase EDD feature.
If you have any queries, feel free to connect with our support team for quick assistance.
Answer: Your EDD widget might be hidden under the following circumstances:
EDD functionality may be disabled for your account or specifically for the product in question.
The product may be categorized as non-sellable, or it could be a virtual product that doesn't require shipping.
The buyer's address might be outside the supported service area for AEDD prediction (refer to the list of supported prediction countries ).
Answer: The EDD value might display as "-" due to the following reasons:
The buyer has entered an invalid address.
The system cannot determine the buyer's address based on their IP address, and the buyer has not provided address information through the widget.
Typically, when no specific SKU is selected, the EDD widget defaults to displaying the EDD for the first SKU. However, if the system fails to calculate the EDD for the first SKU or if the EDD for the first SKU is set to be hidden, this can cause the EDD widget to show "-" as the EDD value.
Overview
Cart abandonment usually happens when there’s no clarity over the delivery time. Therefore, businesses must share an estimated delivery date to keep shoppers interested. With AfterShip Tracking, you can show AI-predicted estimated delivery dates on product and checkout pages of your Shopify store.
If you are an API user, you can refer to the pre-purchase API document to start getting pre-purchase EDDs through API.
What you’ll learn
In this tutorial, we’ll discuss steps on how Shopify users can show AI-predicted Estimated Delivery Dates on their Shopify Product and Checkout Pages.
Rule Settings
a. EDD calculation settings
b. Product exclusion settings
c. Checkout page EDD settings
Product page EDD widget configuration
Checkout page EDD widget configuration
FAQs
Step 1: Rule settings
1. EDD calculation settings
You first need to set up your shipping and order processing rules in the Aftership Tracking admin under the Ship-From Locations section, which will be shared with our AI Model to predict EDDs for you. Therefore, you must set up accurate settings for accurate predictions.
You can also find access the configuration settings in the Pre-purchase EDD section under Setting page shown as below.
You must choose AEDD- supported carriers and location regions as the default shipping rule otherwise you are not able to enable any pre-purchase AEDD feature.
Check the detailed guide to set up your location and shipping rules here .
2. Product exclusion settings
You can select specific products, product types, and scenarios where you do not want the EDD widget displaying the estimated delivery date to show. Estimation delivery dates will be only available for products live for sale.
Go to the Pre-purchase EDD setup portal in your AfterShip Tracking admin.
Under the Settings tab, scroll down to the Product exclusion settings .
Select the logic(s) you wish to configure.
a. Oversold products : If selected, the EDD widget will automatically be hidden from the product pages that are sold more than the actual units available in inventory.
b. Specific products : If selected, you can choose specific products in your eCommerce platform where the EDD widget will not display.
Click Manage products .
On the Add products modal, search product by title or variant name or filter product selection by type .
Select the checkbox of products and click Add .
c. Specific product types : You can choose specific product types in your eCommerce platform following which all the existing and future products labeled with that particular product type will automatically hide the estimated delivery date widget from their pages.
3. Checkout page EDD settings
You can decide how the EDD for an order will be calculated at checkout if some of the products in an order are excluded from displaying an estimated delivery date. You can select between the following options.
a. Don't calculate an EDD for the order if any of the products are without EDD.
b. Calculate an EDD for the order based on the remaining products' EDDs.
Step 2: Product page EDD widget configuration
1. Customize the product page EDD widget
Move to the Widget tab. On the Product page EDD card, click Manage .
Start customizing the product page EDD widget on the left panel and preview the modifications on the right panel.
Under the Configuration settings, set up the core settings of the product page EDD widget.
Date Format : Choose how dates appear based on your preference. You can choose among the available date formats.
EDD Format : Decide if you want to show a single date or a date range EDD on the page.
AfterShip leverages historical data to caculate the most likely day for delivery.
Icon Location : Choose where the icon appears—next to customer location, next to EDD, or remove it from your widget.
Message : Edit the customer-facing text in your EDD widget. You can insert merge tags like |EDD| and |COUNTDOWN_TO_CUTOFF| to auto-populate data from AfterShip database. The countdown timer shows the time left until your order cut-off time.
Under the Style settings, set up how your product page EDD widget will look, tailored to your brand tone.
Layout Margin : Drag the radio button along the lines to adjust how far your EDD widget is from other parts of the page from top and buttom
Container : Change the background color and padding (space inside the widget) for your EDD widget. You can also pick the border color, width, and shape.
Icon : Replace the icon image with one of your choice. The image file can't be bigger than 1 MB and must be JPG, JPEG, or PNG format.
Text : Customize the text color, size, boldness, and underline for different elements of your EDD widget—body text, EDD text, countdown timer text, and destination address text.
Click Save to activate all your configurations.
2. Install the product page EDD widget on your Shopify store
For the Product page EDD, we support 3 methods:
a. Copy the code with Shopify liquid
Go to Pre-purchase EDD in your AfterShip Tracking admin
Move to the Widget dashboard, click Install widget and select Copy widget code from the dropdown. Click Copy code on the pop-up window.
Go to Shopify admin > Online store > Themes > Edit code
Search the main-product file in Theme liquid
Find product-form-installment- and paste the code under it
Click Save to display the EDD on the product page
b. Enable directly with the Shopify extension
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Move to the Widget tab. On the Product EDD card, click Install widget and select Add as app block . You will land on the Shopify theme editor where the widget will be automatically installed to your default product page.
Drag the app block up or down to move it to the position you want on the page. When ready, save your changes.
To add the widget to another product page or if you have multiple Shopify stores, go to your store’s Shopify theme editor.
Select the Products page from the top dropdown and click on + Add block in the left panel under Templates
Search for AfterShip EDD under the Apps tab and click on it. You can drag it to where you want it on the page and then click Save when finished.
Customer experience
This is how the EDD will look to your customers on the Product page:
c. Enable Pre-purchase EDD in Tapcart
Tapcart is a mobile app builder that helps stores improve mobile conversions and retain customers. With Tapcart, you can sync your Shopify store’s backend, then build and launch your brand's mobile app to enhance the mobile shopping experience.
Make sure the AfterShip Tracking app is installed in your Tapcart account to enable the product page EDD in your Tapcart app.
Go to the Tapcart Integration Page and enter your Shopify Domain Name.
Click on the Update Integration button to save your connection.
We support two installation methods:
a. Install via widget code
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Navigate to the Tapcart Widget dashboard, click Install Widget, and select Copy Widget Code from the dropdown.
Choose the store where you want to install the widget, then click Copy Code and Continue in the pop-up window.
Click Go to Product Detail Page, which will direct you to the Tapcart installation page.
On your Tapcart Product Detail page, click Custom, then Launch Blocks Editor .
Replace the default HTML code with a blank line, as shown below. (Do not delete the code entirely.)
After pasting the JavaScript code, click Save. When prompted to name the block, we suggest AfterShip - Product Detail Page EDD.
In the custom section, you’ll now see the block. Drag it to the desired position on the page.
Finally, click Save & Update when prompted.
b. Enable directly with the Tapcart app block
Go to Pre-purchase EDD in your AfterShip Tracking admin.
Navigate to the Tapcart Widget dashboard, click Install Widget, and select Add as App Block from the dropdown.
Click Go to Product Detail Page in the pop-up window.
On the Product Detail page, click the Integration tab. Drag the AfterShip - Product Detail Page EDD block to the desired position.
To finish, click Save Changes when prompted.
Please note that the style of our widget will automatically adjust to match your store's brand kit settings.
Step 3: Checkout page EDD widget configuration
1. Customize the checkout page EDD widget
Move to the Widget tab. On the Checkout EDD (Shopify plus) card, click Manage .
Start customizing the checkout page EDD widget on the left panel and preview the modifications on the right panel.
On the Checkout EDD editor, choose how you want to show the dates on the page—**Single date or Date range**
2. Install the checkout EDD widget on your Shopify store
For the Checkout page EDD, you can enable directly with the Shopify extension.
Go to Pre-purchase EDD in your AfterShip Tracking admin
Move to the Widget tab. On the Checkout EDD card, click Install widget and select Add as app block . Read the instructions on the pop-up window and click Go to Shopify .
This will take you to your Shopify checkout. Select the Shipping page from the dropdown at the top of the page.
In the left side panel under Delivery , click + Add app block . Then select AfterShip EDD and click Save when you're done.
If you have multiple Shopify stores, go to your store’s Shopify theme editor.
Select the Shipping page from the top dropdown and click on + Add block in the left panel under Order summary
Search for AfterShip EDD under the Apps tab and click on it.
Check the Include app in Shop Pay box if your store has activated Shop Pay.
You can drag it to where you want it on the page and then click Save when finished.
If you find your shipping method is displayed with a Transit time value after it, it may be a duplicated display with AfterShip EDD on your Checkout page .
You can go to your Shopify Shipping Setting and change the rate type to Custom Rate to remove the Shopify transit time display.
C. Customer experience
This is how the EDD will look to your customers on the Checkout page:
FAQs
1. Will AEDD still do the prediction if my carrier is not supported?
Answer: If your configured custom shipping rule's carrier or location is not covered under AEDD, we will use the default shipping rule to calculate EDD for you. The default shipping rule takes precedence if your request does not fall under any other custom shipping rules.
2. Why I cannot turn on my pre-purchase EDD feature despite being on the AEDD plan?
Answer: You can refer to the EDD dashboard page to check the error message. You need to set up a valid default shipping rule to enable any pre-purchase EDD feature.
If you have any queries, feel free to connect with our support team for quick assistance.
3. Why is my Estimated Delivery Date (EDD) widget hidden despite enabling the AEDD feature?
Answer: Your EDD widget might be hidden under the following circumstances:
EDD functionality may be disabled for your account or specifically for the product in question.
The product may be categorized as non-sellable, or it could be a virtual product that doesn't require shipping.
The buyer's address might be outside the supported service area for AEDD prediction (refer to the list of supported prediction countries ).
4. Why is my Estimated Delivery Date (EDD) widget showing "-" as the EDD value?
Answer: The EDD value might display as "-" due to the following reasons:
The buyer has entered an invalid address.
The system cannot determine the buyer's address based on their IP address, and the buyer has not provided address information through the widget.
Typically, when no specific SKU is selected, the EDD widget defaults to displaying the EDD for the first SKU. However, if the system fails to calculate the EDD for the first SKU or if the EDD for the first SKU is set to be hidden, this can cause the EDD widget to show "-" as the EDD value.
Updated on: 07/11/2024
Thank you!