Add estimated delivery date on Product page in Shopify without app

A lightweight custom Liquid solution for displaying Estimated Delivery Dates on your Shopify product pages, no app required.
It works with the Horizon and Dawn themes, and is fully customizable to match your store’s style and shipping logic.

1. Click on Edit theme.
2. Open Product page template
3. Add custom liquid and insert code.

{% assign start_date = "now" | date: "%s" | plus: 86400 | date: "%m/%d/%Y" %}
{% assign end_date = "now" | date: "%s" | plus: 345600 | date: "%m/%d/%Y" %}

<div class="delivery-estimate">
  Estimated delivery: {{ start_date }} – {{ end_date }}
</div>


<style>.delivery-estimate{background:
#d9edda;
padding:8px;
border-radius:5px;
}</style>

4. Customize code
– Adjust the number of seconds (delivery range)
The delivery range is calculated by adding a specific number of seconds to the current date.
You can change these values to match your preferred delivery window.

{% assign start_date = "now" | date: "%s" | plus: 172800 | date: "%m/%d/%Y" %}
{% assign end_date = "now" | date: "%s" | plus: 345600 | date: "%m/%d/%Y" %}

<div class="delivery-estimate">
  Estimated delivery: {{ start_date }} – {{ end_date }}
</div>


<style>.delivery-estimate{background:
#d9edda;
padding:8px;
border-radius:5px;
}</style>

1 day = 86400 sec
2 days= 2×86400 sec = 172800
3 days= 3×86400 sec = 259200
4 days= 4×86400 sec = 345600
5 days= 5×86400 sec = 432000

– Change date format (optional)
By default, the date is displayed in the %m/%d/%Y format (MM/DD/YYYY).
You can modify this format to match your store’s regional preferences. For example (2 to 4 days):

• %d/%m/%Y → DD/MM/YYYY
• %Y-%m-%d → YYYY-MM-DD
• %B %d, %Y → Month Day, Year (e.g., March 12, 2025)

Simply replace the date format inside the Liquid code:

date: "%Y-%m-%d"

– Customize background and text colors (optional)

You can also change the background color and text color in the CSS section to match your store’s branding.
Simply update the values inside the .delivery-estimate style block:

.delivery-estimate {
  background: #d9edda;   /* change background color */
  color: #000000;        /* change text color */
}