How to Display Estimated Delivery Date and Time on your Shopify Store

How to Display Estimated Delivery Date and Time on your Shopify Store

Technical Writer

display-estimated-delivery-date-and-time

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.

Benefits of Order Delivery Date and Time in your Shopify store

It shows why you should have the Order Delivery Date and Time feature added to your 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 the estimated delivery date and time in your Shopify store

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

Showing estimated delivery date on the Shopify 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.

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.

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

Now let’s step-by-step add the estimated delivery date using scripts:

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://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();
}
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.

Display delivery date and 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/post code, 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

2 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!

Leave a Reply

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