How to add an Estimated Delivery Date to the storefront
Overview
This app shows a predictive delivery date based on your Smart Estimated Delivery Date setup. It can display a single date or date range for the customer.
How to set it?
1. You can go to your Shopify Theme Editor and drag and drop the app block where you want to show the delivery estimate. Click the Save button on the top-left corner after you are happy with the look.
You need to add 🎯 Smart Delivery Estimate App Block to the pages you want to show.
Now let's see customer experience:
Automatically shows estimated delivery date based on customer geolocation
Customers can change their selected address or pick based on their account.
The address typing come with a helpful autocomplete feature
A new address was selected - new time was recalculated based on it.
Another example with turn-on delivery ranges and different date format
How does it work?
The app automatically checks if the user looking at your page is:
- Logged customer - in this case, it picks the customer's default delivery address.
- Not logged customer or visitor - in this case, it picks the location based on user IP Geolocation. You can read more below.
Based on the location, a calculation is done for this customer, and the delivery date is shown.
Note that the user can always change the location on demand by clicking on it. We keep the last picked location in a cookie related to your domain, so every time that customer comes or moves through the product pages, they can see their preferred destination.
Customization
Let’s see what you can customize in this app block:
General
In the General section, you can configure the following settings:
Date format
You can specify the date format for the app block.
Available formats are:
- Aug 31 (MMM D)
- Wed, 31 Aug (ddd, DD, MMM)
- 31 Aug (D MMM)
- Wed, Aug 31 (ddd, MMM DD)
- 31.8 (D.M)
- Wed 31.8 (ddd D.M)
- 31-8 (D-M)
- 2021-08-31 (YYYY-MM-DD)
- 2021.08.31 (YYYY.MM.DD)
Style
This section allows you to style the button with colors.
Right-to-left
Based on the language you selected for your page, you can set the direction of the text in the app block.
Title text color
Customize the text color of the message
Link text color
Pick a color for the link
Link text hover color
Pick a color when someone hovers over the link
CSS style
Additional styles you want to add
Troubleshooting
How to report a wrong IP location?
Rush uses Maxmind as a geolocation database and updates its GeoIP database weekly.
You can use the Maxmind tool to ensure that Maxmind shows the correct country code. If the data is incorrect:
- Please submit IP correction requests through Maxmind.
- Contact the Support Team if Maxmind shows the correct country code, but the Rush shows data incorrectly.
Contact us
If you would like more information, please feel free to contact us.