How to Display Estimated Delivery Date and Time in Shopify Store

  • How to Display Estimated Delivery Date and Time in Shopify Store

    Technical Writer

  • 10819 Views
  • Last updated: July 6, 2022
  • 7 Minutes
How to Display Estimated Delivery Date and Time in Shopify Store

Apart from the product quality, what customers are more concerned about when buying any product is the delivery of that product. In this blog, we will see different ways to add either estimated delivery date or order delivery date and time to your Shopify store.

You may have gone through the product reviews like:

“The product has been timely delivered”
“Excellent product, very good quality, and quick delivery”
“Good product with reliable delivery”
“Good service, don’t have to wait too long for delivery”

When you commit to a more accurate delivery date and deliver the item or product on the same date or before, it proves that you care about your customers.

Contents hide
1 Benefits of Showing Estimated Delivery Date and Time in Shopify Store:
2 Adding Estimated Delivery Date & Time in Shopify Store
2.1 Showing estimated delivery date on the product pages
2.2 Allow customers to pick their convenient order delivery date and time
3 Display Shopify Estimated Delivery Date Using Scripts
3.1 Steps to add the Estimated Delivery Date using Scripts
3.2 Adding the Estimated Delivery Date in Shopify 2.0 Themes
4 Display Delivery Date & Time Using Shopify Apps
4.1 Top 5 Shopify Delivery Date Apps 2021
5 Order Delivery Date
6 Delivery Date Schedule
7 In Store Pickup Local Delivery
8 Delivery Date & Time Picker
9 Delivery Date By Omega
10 Wrapping Up!

Benefits of Showing Estimated Delivery Date and Time in Shopify Store:

  1. Improve the customer experience
  2. Enhance the reputation of your store
  3. Increase your sales and store profit
  4. Raise in your customer’s faith

Adding Estimated Delivery Date & Time in Shopify Store

You can enable the Delivery Date and Time in two ways:

Showing estimated delivery date on the product pages

When your requirement is limited to just showing the estimated delivery date to the customers, then you should use scripts to show the delivery date. If you are not sure about editing the code, you can use the Delivery Date Schedule app. With this Shopify delivery app, you can show the estimated delivery date and time with a countdown on the product page.

estimated-delivery-by-delivery-date-schedule

Allow customers to pick their convenient order delivery date and time

When you want to implement advanced features like:

  1. delivery date calendar
  2. time picker with various time-slots
  3. cut-off time
  4. modify order delivery time post-purchase
  5. holiday control and many more

For that, it’s best to use the Shopify plugins (or we can also call it Shopify apps) to show delivery date and time.

Best Shopify App That Lets Customers To Select Delivery Date And Time

Display Shopify Estimated Delivery Date Using Scripts

It will show the estimated delivery date of the product when the customer is on the product page of your Shopify store. Therefore, before buying a product, the customer will be able to see the expected delivery date.

The script that we are going to use to show the order delivery date will show the range of dates to deliver the product.

The outcome will look like this:
output-estimated-delivery-date-using-scripts
Here, the expected delivery shows two dates:

  1. Minimum delivery date: The start date is taken 5 days after the order is placed
  2. Maximum delivery date: The end date is taken 10 days after the order is placed

Therefore, the gap between these two dates is “5 days”. You can also change the number of days in the script at your convenience.

Steps to add the Estimated Delivery Date using Scripts

Note: These steps won’t work for the Shopify 2.0 themes. (Please check out the next section to add the estimated delivery date using scripts in Shopify 2.0 themes.)

Step 1: Log in to your Shopify store.

Step 2: Go to Online Store > Themes.

Step 3: In your current theme, click on Actions > Edit code.

Step 4: In the “Sections”, open product-template.liquid file. (if you don’t have a product-template.liquid go to the Templates > product.liquid).

Step 5: Copy the below code and paste it on the 159 line in the product-template.liquid file.

<p> <img src="https://cdn-icons-png.flaticon.com/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(5);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(10);
if (toDate.is().saturday() || toDate.is().sunday()) {
toDate = toDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dddd MMMM dS');
document.getElementById('toDate').innerHTML = toDate.toString('dddd MMMM dS');
</script>

 

If you want to change the Minimum delivery date, you need to set the number of days in var fromDate = Date.today().addDays(5); in place of “5”.

Similarly, if you want to change the Maximum delivery date, just replace the “10” with the number of days in var toDate = Date.today().addDays(10);

Step 6: Save the changes you’ve made in the file by clicking the Save button.

Step 7: Click on the Preview button to review your store, if it is working correctly.
icart cart drawer cart upsell

Adding the Estimated Delivery Date in Shopify 2.0 Themes

When using the Dawn theme or any other Shopify 2.0 theme, you don’t need to edit the theme code. Let’s see how to do that with the step-by-step instructions:

Step 1: Go to Online Store > Themes.

Step 2: In your Shopify 2.0 theme, click on the Customize button.

Step 3: Open the Product > Default product template on the theme editor. Or use your custom product page template if you’ve created any.

Step 4: Add a Custom Liquid section on the product page. Move the section anywhere on the page you wish to show the estimated delivery date.

Step 5: Copy the exact code (given in the above section) and paste it on the Custom liquid input box.

Step 6: Save the changes.

shopify-2-0-estimated-delivery-date-using-scripts

Display Delivery Date & Time Using Shopify Apps

As previously mentioned, you can enable special features in your Shopify sites for your customers and give them a unique experience. There are hundreds of Shopify Delivery Date apps that can assist you if you aren’t technically inclined.

Top 5 Shopify Delivery Date Apps 2021

1. Order Delivery Date by Identixweb
2. Delivery Date Schedule by Appsonrent
3. In Store Pickup Local Delivery by LogBase
4. Delivery Date & Time Picker by Roundtrip
5. Delivery Date By Omega

Order Delivery Date

order-delivery-date

 

 

In addition to the delivery date and time picker, the Order Delivery Date app offers a variety of unique features for your online store. It helps you to manage the holidays and cut-off times for your store.

This Shopify delivery date app consists of various add-ons like store pick-up and local delivery, multiple cut-offs, order limit, shipping price, and many more for which you only pay when you add to your store.

Buyers have the option of selecting the most convenient arrival date and time. As a result, the app will improve your customers’ shopping experience, making it simpler to gain their trust and loyalty.

To know more about the core functionalities, integrations, and add-ons in detail, go to the app page.

Demo  Get It Now

 

Delivery Date Schedule

delivery-date-schedule-app

Delivery Date Schedule allows your consumers to choose the date and time of delivery for their purchase. Florists, chocolatiers, furniture stores, blessing stores, and other shops whose customers want to schedule delivery can use the Delivery Date Schedule app.

This Shopify delivery date app also handles the minimum delivery day, and cut-off time on the minimum delivery day. This app is best suited for local delivery services or same-day delivery.

To know more about the core functionalities, integrations, and upcoming features in detail, go to the app page.

Demo  Get It Now

 

In Store Pickup Local Delivery

in-store-pickup-local-delivery-app
To help you match your online shop, the “In Store Pickup Local Delivery” app offers a fantastic layout. It offers various advanced features like multi-language support, cut-off time, delivery rates setting by zip/postcode, and many more.

This app allows you to create time slots from 1 hr to 15 minutes for days on which you want to allow pickups or local delivery. You can limit the number of pickups or deliveries per time slot to avoid crowding at the store.

To know more about the comprehensive features, integration in detail, go to the app page.

Demo  Get It Now

 

Delivery Date & Time Picker

delivery-date-and-time-picker-app
This Shopify delivery date app comes with smart and versatile features that allow your customers to choose a date and time for local delivery or in-store pickup straight from your store’s cart page.

The selected date and time are added to the order notes after your customer completes the checkout process. On the schedule view, you can see all of your orders at a glance, with sortable dates and times.

To know more about the key features and pricing in detail, go to the app page.

Demo  Get It Now

 

Delivery Date By Omega

delivery-date-by-omega-app

The Delivery Date enables you to customize working days for order delivery. Using this Shopify app, you can disable delivery on weekends, holidays, or any specific dates in the delivery calendar on the cart page.

The Delivery Date By Omega also allows you to set daily order limits and delivery time intervals, making it easier to manage capacity and minimize customer disappointment.

To know more about the key features and pricing in detail, go to the app page.

Demo  Get It Now

Wrapping Up!

Hope you found your Shopify Delivery Date solution here! If not, will you mind sharing it with us? Please contact us and let us help you out.

30 Responses

  1. Hello thanks for the code but I have a problem , it doesn’t display the icon of delivery … How can I solve this problem ?

    Reply

    1. Hey Mel, Thanks for your response!
      The image is perfectly working for my store.
      You can check using other images for the delivery icons. Just replace the image link!
      You can find more icons here!

      Reply

      1. Hi Sagarika,

        Thank you so much for the code. It’s absolutely brilliant! I have a question please. Is there a way of adding to the code to make the text size smaller? (Get it before etc). Thanks so much I’m so glad I found your article. Sarah.

        Reply

  2. Hi

    I’m using shopify 2.0 theme “dawn” and i don’t have product-template.liquid or Templates > product.liquid.

    I only have Templates > product.json and i dont think line 159 is what you referring to.

    help please.

    Thanks

    Reply

    1. Hello Etay,
      Thank you for the question!

      When using “Dawn” or any other Shopify 2.0 theme, you don’t need to edit the theme code.

      You can easily achieve this using a Custom Liquid section on the product page and then pasting the exact code (given above in the guide) in it.
      Please refer to this screenshot: https://i.imgur.com/tk1ppkb.png

      Reply

      1. Thanks! it’s working!
        Although i still have a problem changing the days.
        I changes the minimum days to 1 and it worked.
        but when i change the max days it still shows 10 days. any idea why?

        Also, is there a way to show a specific day and not a range?

        thanks!

        Reply

        1. Always happy to help you 🙂

          Please attach the screenshot so that I can understand the issue.

          And yes!! You can show a specific day instead of a range. Use the below code:

          <p> <img src="https://image.flaticon.com/icons/png/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Get it on <strong><span id="fromDate"></span> 
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(5);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dddd MMMM dS');
</script>

          Output: https://i.imgur.com/e91niHZ.png

          Reply

  3. Hi Sagarika,

    Thank you so much for helping. The code didn’t work for me, and the font remained the same size. Do I perhaps need to move the addition next to where the text starts in the code,m rather than next to the image of the delivery icon?

    Thanks!
    Sarah

    Reply

  5. Hello Sagarika,

    Is it possible to run the custom liquid for Dawn 2.0 on two different featured products on the same page? It works great on my product pages, and on the first featured product on my home page, but it quits working on my home page after the first product.

    Reply

    1. Hello Robert,
      Thanks for your response!

      I found the solution! When you are using the code multiple times on a single page, you need to change the variable name of the From Date (fromDate) and To Date (toDate). I tried using this code on the second Featured product and it worked!

      <p> <img src="https://image.flaticon.com/icons/png/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Get it between <strong><span id="fDate"></span> - <span id="tDate"></span></strong></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fDate = Date.today().addDays(5);
if (fDate.is().saturday() || fDate.is().sunday()) {
fDate = fDate.next().monday();
}
var tDate = Date.today().addDays(10);
if (tDate.is().saturday() || tDate.is().sunday()) {
tDate = tDate.next().monday();
}
document.getElementById('fDate').innerHTML = fDate.toString('dddd MMMM dS');
document.getElementById('tDate').innerHTML = tDate.toString('dddd MMMM dS');
</script>
      Reply

  6. Hello Sagarika Das,

    Great work, thank you so much.

    Is there a posibillity to change the language of days and months in Romanian?

    Thank you again for your support !

    Reply

    1. Thank you so much! 😊

      Yes! It’s possible. Please insert the below code: 

      <p> <img src="https://image.flaticon.com/icons/png/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/> 
Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong>
</p> {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }} 
<script> 
var fromDate = Date.today().addDays(5); 
if (fromDate.is().saturday() || fromDate.is().sunday()) { 
fromDate = fromDate.next().monday(); 
} 
var toDate = Date.today().addDays(10); 
if (toDate.is().saturday() || toDate.is().sunday()) { 
toDate = toDate.next().monday(); 
} 
let options = { weekday: 'long', month: 'long', day: 'numeric' }; 
document.getElementById('fromDate').innerHTML = fromDate.toLocaleString('ro-RO',options); 
document.getElementById('toDate').innerHTML = toDate.toLocaleString('ro-RO',options); 
</script>
      Reply

    1. Hello Safeer,
      Thank you for your response!

      Yes, we can remove weekdays from the message. Please insert the below code:

      <p> <img src="https://image.flaticon.com/icons/png/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Get it between <strong><span id="fDate"></span> - <span id="tDate"></span></strong></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fDate = Date.today().addDays(5);
if (fDate.is().saturday() || fDate.is().sunday()) {
fDate = fDate.next().monday();
}
var tDate = Date.today().addDays(10);
if (tDate.is().saturday() || tDate.is().sunday()) {
tDate = tDate.next().monday();
}
document.getElementById('fDate').innerHTML = fDate.toString('MMMM dS');
document.getElementById('tDate').innerHTML = tDate.toString('MMMM dS');
</script>
      Reply

  8. Hello, Your code is perfect, however I use it on a French site, how I could rename the elements such as days etc.?

    Reply

    1. Hey Thomas, Thank you so much for your comment! 😊

      Yes! It’s possible. Please insert the below code: 

      <p> <img src="https://image.flaticon.com/icons/png/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/> 
Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong>
</p> {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }} 
<script> 
var fromDate = Date.today().addDays(5); 
if (fromDate.is().saturday() || fromDate.is().sunday()) { 
fromDate = fromDate.next().monday(); 
} 
var toDate = Date.today().addDays(10); 
if (toDate.is().saturday() || toDate.is().sunday()) { 
toDate = toDate.next().monday(); 
} 
let options = { weekday: 'long', month: 'long', day: 'numeric' }; 
document.getElementById('fromDate').innerHTML = fromDate.toLocaleString('fr-FR',options); 
document.getElementById('toDate').innerHTML = toDate.toLocaleString('fr-FR',options); 
</script>
      Reply

  9. Hi Sagarika, Want to set a delivery date and delivery time slot picker in shopify..based on product preparation time and store opening closing time. please help

    Reply

    1. Hi Kunal,
      You can use the Order Delivery Date app! This app can help you add buffer time for product preparation time. You can also specify the time slots based on your store opening and closing time.
      If you need, the support team will help you with the app configuration as per your store requirements (free of cost).

      Reply

  10. Hi Sagarika,

    Thanks a lot for this article. Very useful!

    I would like to change the formatting to “Apr 18th – Apr 25th” (month is 3 letters).

    Please can you assist?

    Reply

  11. Hi,

    Thanks for this tutorial. The code works fine!

    I would like to change the formatting to make it different for my Dutch and English customers. Can someone help me with this?

    Reply

  12. Hello! I’m using Parallax 4.1.1 and I installed the code in the product.template.liquid on line 159 and this didn’t work for me. I also tried installing in Templates -> product.liquid and still nothing. Please help!

    Reply

      1. I tried that as well and don’t have the option to add custom liquid on the default product page.

        Reply

Leave a Reply

Your email address will not be published.

Post Tags

Our recent blogs