How to Display Estimated Delivery Date and Time in Shopify Store

  • sagarika.das

  • 12891 Views
  • Last updated: February 27, 2023
  • 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 an estimated delivery date or an 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.

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, and 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, and 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.

 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.

How to Display Estimated Delivery Date and Time in Shopify Store

About the author

48 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 ?

    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!

      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.

  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

    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

      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!

        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

  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

  4. 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.

    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>
  5. 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 !

    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>
      1. Hi,

        Thank you very much for sharing coding details. Helps a lot.

        I would like to link a product variant’s inventory status to the delivery date + calculate the estimated transit time from Shipping through integrated carriers.

        Let me give you an example. icebaejewelry.com is a direct to consumer business.

        Most items do not take more than 5 days to manufacture, However if an item is in the inventory, we can ship it the next day. Transit times vary between local and international customers.

        Ultimately maybe I should let you do it? There is a good number of items to fix on the site.

        I haven’t been able to link SKU and variant metafields to the product page either. I have a drop down menu, where the code is inside product,json.

        Thank you Sagarika.

        Onur Occal

    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>
  6. Hello, Your code is perfect, however I use it on a French site, how I could rename the elements such as days etc.?

    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>
  7. 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

    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).

  8. 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?

  9. 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?

      1. Hi,

        I would like to have it shorter and that it can be multilingual:

        Sep 27, 2022 ==> this way it’s right in both languages

        and not like this : Tuesday September 27th

        Thanks!

        1. Try this code.


          Get it between

          {{ ‘//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js’ | script_tag }}

  10. 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!

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

          1. Thanks for providing screenshots, that’s helpful, but I still don’t have the option to select add section “custom liquid”. Can I email a screenshot to you for review?

            I appreciate the help!

  11. Hi Sajini/Sagarika,

    This works fine if I add a custom.liquid template in my theme.
    But I want to display delivery date to be 5 days for products which are having inventory quantity > 1 and I want to keep selling the products where inventory quantity is 0 but just display a delivery date of 15days for the products which I know I’m going to restock and not all of them. is it possible?

    Thanks in advance!

  12. Hi Sagarika,

    Thanks for a nice article simplifying the process to customize delivery date ranges, which I have been looking for some time now.

    We are a business based in Canada and we are looking to display delivery dates on product page, but it should automatically change dates depending on the customer’s location (different delivery dates for different provinces in Canada). Please let us know if it is possible to automate this process.

    Thank you.
    Meenesh

  13. Hello!

    Thank you for this code, it’s perfect for my store!
    I was wondering… is there a way to change the background color? I think that a different color instead of the white background for this custom liquid section would help bring out the estimated delivery dates (I’m using the Shopify Dawn theme and I’m not familiar with coding, but there is no way to change the background color for the custom liquid section in my theme editor).

    Thanks in advance!
    Silvia

  14. Thanks for this code. I am using this code but tried to change fromDate = fromDate.next().monday(); to tuesday instead but it still shows mondays date. What am I doing wrong?

    Get it
    {{ ‘//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js’ | script_tag }}

    var fromDate = Date.today().addDays(2);
    if (fromDate.is().saturday() || fromDate.is().sunday()) {
    fromDate = fromDate.next().tuesday();
    }
    var toDate = Date.today().addDays(6);
    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’);

    Much appreciated
    Jamie

  15. Hello

    Thanks for providing us this code with the complete info of how to apply that code and where to apply that code and it is working now. Because while using Plugins my website speed is getting slower with too much plugins and by putting code we can control the page speed.

    My question is that can you please provide me another code for displaying timer with date of delivery so I can show exact day and exact time on my products except few of them because I don’t want to show all of the products. As I have bedding site so the big items like I don;t want to show that timer and date on those products.
    Will you please guide me. Thank you so much.

  16. I can only see the icon and the text – Get it By and the date won’t appear…. in Dawn 2.0 theme. I have done everything as mentioned above!

  17. Hello,
    I very like that code, but is it some way modify that code exclude calculating weekends?
    Right now the problem is I want to exclude weekend days from calculation (saturday and sunday). How should I do that?

  18. Thanks for the code,
    Could you advise how to show different delivery times for customers in different countries.
    We delivery US between 3-5 days and UK 7-10 days and rest of the world 12-15 days.
    Could you help us please?
    regards

Leave a Reply

Your email address will not be published. Required fields are marked *