Display a dynamic delivery estimate on the product page with countdown and automatically calculated dates.
Delivery Estimation
The Delivery Estimation block displays an estimated delivery date directly on the product page. It automatically calculates dates based on the cutoff time, shipping delay, and business days.
How to Add It
- Open the Shopify theme editor
- Navigate to a product page
- Click Add a block in the product section
- Select Delivery Estimation
ℹ️This block is limited to 1 per section. A dedicated JavaScript file (
js-delivery-estimation.js) handles the dynamic date calculation and countdown.2 Display Formats
The block offers two radically different display modes:
| Format | Description | Ideal For |
|---|---|---|
| Visual (timeline) | Two columns with icons: countdown + shipping date | Maximum impact, premium product pages |
| Text | Compact message with icon, countdown, and date inline | Discreet display, integration into the product flow |
Visual format
The visual format displays a timeline in two columns:
- Left column: Clock icon + "Order within" label + real-time countdown
- Separator: Progress arrow
- Right column: Calendar icon + "Ships" label + calculated day
Text format
The text format displays a compact message with dynamic placeholders:
| Placeholder | Replaced By | Example |
|---|---|---|
{countdown} | Time remaining before cutoff | 2h 34min |
{date} | Estimated shipping date (fixed mode) | Wednesday, February 26 |
{date_min} | Minimum date (range mode) | Tuesday, February 25 |
{date_max} | Maximum date (range mode) | Friday, February 28 |
Settings
Visual Format Labels
These settings are visible only when the Visual format is selected:
| Setting | Default | Description |
|---|---|---|
| Cutoff label | "Order within" | Text above the countdown |
| Shipping label | "Ships" | Text above the date |
| Cutoff passed label | "Order today" | Text when the cutoff time has passed |
Text Format Messages
These settings are visible only when the Text format is selected:
| Setting | Default | Description |
|---|---|---|
| Enable cutoff | Yes | Displays the message with countdown |
| Cutoff message | "Order within {countdown} for same-day dispatch!" | Message with the countdown |
| Cutoff color | Accent 1 | Cutoff text color |
| Delivery message (fixed) | "Get it by {date}" | Message with fixed date |
| Delivery message (range) | "Arrives {date_min} - {date_max}" | Message with date range |
Cutoff Time
| Setting | Type | Range | Default | Description |
|---|---|---|---|---|
| Hour | Range | 0-23 | 14 | Cutoff hour for same-day shipping |
| Minute | Range | 0-59 | 0 | Cutoff minute |
💡Set the cutoff time to the actual time when you stop preparing orders. For example, if your warehouse stops order preparation at 2 PM, set it to 14:00. This creates authentic urgency: "Order before 2 PM for same-day shipping."
Delivery Delay
| Setting | Type | Range | Default | Description |
|---|---|---|---|---|
| Type | Select | Fixed / Range | Fixed | Delay calculation mode |
| Days (fixed) | Range | 1-30 | 3 | Number of delivery days |
| Minimum days | Range | 1-30 | 2 | Range minimum |
| Maximum days | Range | 1-30 | 5 | Range maximum |
| Exclude weekends | Checkbox | - | Yes | Only counts business days |
⚠️If you enable Exclude weekends, Saturdays and Sundays are not counted in the delay. An order placed on Friday with a 3-day delay will show Wednesday (not Monday).
Style
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Style | Select | Filled / Outline / Minimal | Filled | Container appearance |
| Color palette | Color scheme | - | Background 2 | Block colors (except minimal) |
| Border radius | Range | 0-20px | 8px | Corner rounding (except minimal) |
| Icon | Select | Icon list | local_shipping | Displayed icon (text format) |
| Custom icon | Image picker | - | - | Image to use as icon (text format) |
How the Calculation Works
The JavaScript script automatically calculates dates using this logic:
- Cutoff time check: If the current time is before the cutoff, the countdown shows the remaining time. Otherwise, the starting day shifts to tomorrow.
- Delay calculation: From the starting day, the script adds the configured number of days.
- Weekend exclusion: If enabled, Saturdays and Sundays are skipped in the calculation.
- Localization: Dates are formatted in the visitor's language (via
request.locale.iso_code).
Use Cases
Standard e-commerce
- Visual format, filled style
- Cutoff at 2 PM, 3 fixed days delay, weekends excluded
- Creates urgency with the real-time countdown
Products with variable delivery
- Text format, range type
- Min 2 days, max 5 days delay
- Message: "Arrives {date_min} - {date_max}"
Dropshipping / long delays
- Text format, 7-14 day delay
- Disable the cutoff to avoid creating false urgency
- Simple message with the date range
💡The visual format with its real-time countdown is the most effective for conversion. The ticking countdown creates a natural sense of urgency that drives immediate purchase.